CSS Code tree in Code Navigator

In addition to PHP mode and HTML mode available in PhpED's Code Navigator NuSphere's PHP IDE also provides CSS mode for code navigation. CSS Code tree combined with CSS Preview feature provides for easy CSS Editing.

CSS Code tree display

When the CSS file is loaded in the editor Code Navigator tab automatically switches to CSS mode. You can also always select CSS mode of the navigator for any file loaded in the editor. In this mode it displays the tree of CSS styles and elements defined in the file. The bottom part of the Navigator displays the properties of the selected CSS style. For example, this picture shows the CSS Code Navigator for NuSphere home page:

CSS Code tree navigation

CSS Code tree allows you to navigate easily through CSS code in any file. CSS Code Navigator Tool bar provides the means to configure the display of and navigation inside of the CSS code:

Search. Similar to the way it works in PHP Code Navigator it performs search in the elements and styles of the CSS tree on the text typed in the input field.

Track Current position. When this option is turned on and you move the cursor in the editor, the CSS Code navigator highlights the tree element corresponding to the current position of the cursor

Select button. When you press this button, the code corresponding to the current CSS Tree element or style gets selected in the editor.

Go To Definition. Pressing this button positions the cursor in the editor on the CSS code corresponding to the current element of CSS tree, as it shown in the example. The same behavior happens on double clicking of the CSS tree elements

CSS View Settings: Group Selectors. When Group Selectors item is checked CSS navigator groups CSS code into Elements, Classes and IDs and displays them on separate branches of the tree. In this mode selection with Select button will highlight only the name of the selected element.

With Group Selector unchecked, CSS code navigator displays all elements on one branch and select highlites the entire body of the selected element:

CSS Code navigator is only one of the many CSS Editor Tools available in PhpED along with PHP Editor Tools, and HTML Editor Tools such as HTML code folding and HTML Preview. You can see these tools in action when you Download a free trial of NuSphere's PHP IDE today!