Cultured Code bills Xyle scope as “the world’s most innovative CSS analysis tool,” and that claim is not idle boasting. When I’m looking for inspiration, I surf with Xyle scope. It’s like surfing with Safari (Xyle scope uses Safari’s rendering engine), but Xyle scope simultaneously exposes the underlying HTML and CSS source. Highlight different parts of a page and you can immediately see the corresponding code, making it incredibly easy to decipher what’s going on. If you want to pull back the curtains and see how the wizards of CSS spin their magic, Xyle scope is for you.

It’s Xyle scope’s outstanding information design that 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 the formatting box of any HTML element (you can quickly toggle between modes using shortcut keys). Xyle scope highlights the selected element in the other views, revealing the HTML and CSS source code.

A Hierarchical View displays the HTML in a tree structure. The HTML pane shows the HTML code in any of 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 of the page. 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 list. You can search within the HTML or CSS using filters to pare down the results, making it a snap to navigate complex documents.

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. 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. Choose Save from the File menu and Xyle scope saves all associated style sheets, or choose Copy Sheet from the contextual menu in the CSS pane to copy the CSS for the current page to the clipboard. If you open the saved CSS file in your favorite editor (I usually use MacRabbit’s CSSEdit), 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 (if you use BBEdit, you can add Xyle scope to the list of preview browsers), but if you make changes, you’ll have to hit Reload (Command-R) when you return to Xyle scope to view them.

Xyle scope is a solid analysis and troubleshooting tool, well worth its modest price. It shows a lot of promise as an editor and Cultured Code has plans to evolve Xyle scope into a full-fledged CSS editor, a prospect that should be exciting for both newbie and experienced web designers. If Xyle scope offered direct editing of HTML and CSS within its document window, it would be hard to imagine why you’d want to use anything else.

Note: This review was edited for minor clarifications on October 8, 2005.

Bottom Line: Xyle scope is a great way to learn CSS and an indispensable tool for web designers who want to dig under the hood.
From: Cultured Code
Price: $14.95
Platform: Macintosh