Discover great designs

There is a wealth of great CSS designs to be found on the internet. Xylescope's Bookmarks Library is already filled with dozens of interesting sites to get started with.

Understand how it works

Use Xylescope's Block Filter to understand a given page's overall structure. The Block Filter will suppress the display of inline elements and text strings in the HTML pane, while at the same time arranging the block level elements in a clear diagram. This allows you to easily grasp the overall organization and structure of the layout. Clicking into any part of the block diagram will highlight the exact portion of the web page that it governs.

Solve that nagging CSS problem

CSS design is all about making browsers apply the right styles to your HTML elements by taking advantage of CSS' efficient and flexible cascading mechanism. But great power comes with great responsibility. And sometimes it just doesn't seem possible to get that certain style rule to work as expected.

With Xylescope you can simply select that self-willed element in Cascade Mode to see which rules are actually applied and which ones are overridden, including those that are applied to ancestors of the given element! Xylescope displays the specificity of selectors to indicate why rules have precedence and dims overridden CSS properties to improve clarity.

Touch-up your styles

Using Xylescope it is easy to fine-tune CSS values. Simply select the desired element by clicking on the rendered page to bring up the whole cascade of rules applied to the selected element and its ancestors. Change any CSS value and hit return to see the resulting effect immediately regardless in which style sheet the altered style rule resides.

Not sure whether a style rule has become obsolete? Simply click on its selector to list its subjects (Selector matching). If there are no subjects you can be certain that the rule in question is no longer applied to elements of the given page.

By simply choosing Save from the file menu all associated style sheets will be consistently reformatted and saved in their original locations. Xylescope's preferences offer flexible control over the applied formatting.

Work with a text editor

Xylescope offers excellent integration with external text editors such as BBEdit. For example, after adding Xylescope to the list of preview browsers in BBEdit you can easily send any site you are working on over to Xylescope. Upon switching back, BBEdit will automatically update to any changes made using Xylescope.

You may also begin your workflow in Xylescope and re-open any file in your preferred editor. Switching back from your editor of choice it is now Xylescope to auto-update its views for possible changes.