The CSS Pane

The CSS Pane is located at the bottom right of Xylescope's main window and offers easy access to all the style rules that are relevant for the page you are viewing

Individual files

Xylescope automatically provides users with all the CSS source files for each page that they visit.

All <style> elements and those <link> elements which are related to CSS files are listed, using their title attribute, in the CSS Pop-Up Menu (see screen shot). If a title attribute is missing, the file name is used instead. <style> elements are simply numbered.

An angled arrow is placed in front of @imported files and they are offset underneath the <style> element or CSS file in which they are referenced.

By exploiting errors in older browsers it is possible to include CSS files in such a way that they only get loaded by specific 5th generation browsers. These techniques are known as Filter Hacks. Files imported using a filter hack are highlighted with a dotted arrow and given the name of the filter hack in brackets.

The Cascade

When Cascade is chosen from the CSS Pop-Up Menu, the program filters out exactly those style rules which are influencing the presentation of the currently selected element. The next topic is dedicated to the Cascade Mode.

Experiment in real time

In Cascade Mode, and when looking at whole CSS files, CSS values can be changed in situ. In the CSS Pane, click in a displayed value to edit changes. After pressing the enter key the adjoining Web Pane will refresh immediately.

Save changes, reformat style sheets

Changes made to local CSS files can be saved by choosing Save from the File menu. Every active CSS file associated with the given page will be reformatted and saved in its original file path. There is a flexible set of options for controlling the formatting of source code available by selecting "Source Code" in the preference dialog.

Searching and filtering

In order to give the user a better overview, the Selector Pane down the right hand side can be dragged open. Clicking on one of the selectors displayed here will highlight its corresponding rule in the CSS Pane.

The list of rules that is displayed can be narrowed down by using search terms and pre-defined Smart Groups.

Error messages

If Xylescope cannot read a CSS file completely because of syntax errors, the section containing the error is displayed in red.

The lettering of the "Cascade" and the titles of all the files affected by errors are also marked in red.

Additional details