Xyle Scope 1.1

Cultured Code bills Xyle Scope as “the world’s most innovative CSS analysis tool,” and that claim is no idle boast. Surfing the Web with it is like surfing with Safari (Xyle Scope uses Safari’s rendering engine), but Xyle Scope 1.1.5 simultaneously exposes the underlying HTML and CSS source code. Highlight different parts of a page and you can immediately see the corresponding code, making it incredibly easy to decipher how the page was built. It’s a great way to learn CSS and an indispensable tool for Web experts who want to dig under the hood.

Xyle Scope’s outstanding interface—especially its integration with the Web page—makes it unique. The document window presents three views: Web View (which displays the page as it would appear in your browser), HTML View, and CSS View. The Web View offers two different modes: a Browser Mode for surfing and a Selection Mode, which lets you highlight any HTML element. Xyle Scope highlights the selected element in the other views, revealing the related HTML and CSS source code.

For example, a Hierarchical View displays the HTML in a tree structure. The HTML pane shows the code in several different styles, which are fully customizable. Using the Block Filter, you can display all of the blocks within a page as a diagram, eliminating the content and focusing on the underlying structure (see screenshot). Click in the diagram and Xyle Scope highlights the corresponding part of the Web page in the Web View. The CSS View shows the Cascade, as well as a selector (the CSS style definition) list. You can search within the HTML or CSS code using filters to pare down the results, making it a snap to navigate complex documents.

Xyle Scope’s unique split-pane interface lets you view the underlying CSS and HTML as you surf. With Block Filter selected, you can hide the content to make the underlying structure of a page easier to see. (Click image to open full screenshot)

Nothing gives you more insight into the underlying structure of a Web page than Xyle Scope, but as an editor, it needs a little outside help (Cultured Code is developing a full-fledged CSS editor, which should be available by the end of the year). Click on an element of a Web page in Selection Mode and all of the rules applied to that element appear in the CSS Cascade pane. You can change CSS values and preview them on the fly within Xyle Scope, even if the source is on the Internet and not on your hard drive (just edit the value and hit Return), but you’ll need to use an external editor to add or delete selectors.

You can save all associated style sheets, or copy the CSS for the current page to the clipboard. If you open the saved CSS file in your favorite editor, any changes you make are dynamically updated when you return to Xyle Scope. You can copy the HTML and paste it into an HTML editor for editing, but if you make changes, you’ll have to hit Reload when you return to Xyle Scope to view them.

Macworld’s buying advice

Xyle Scope 1.1.5 is a solid analysis and troubleshooting tool, well worth its modest price. If you want to pull back the curtains and see how the wizards of CSS do their magic, Xyle Scope is for you.

[ Robert Ellis is a frequent contributor to Macworld . He maintains the blog Futurosity.]