Xyle Scope Review: A Taste of the Real Web

Many of us learn by seeing. That’s how we all learned how to talk and even read. Many programming books do this nowadays: they show you example code, and you can usually understand what is going on. This was the idea Cultured Code had when creating Xyle scope, because this is exactly what it does: it allows you to learn CSS by seeing it.

For those of you who don’t know about CSS, I will quickly explain it. A while ago, all Web programmers had to program all of their styles (fonts, colors, positioning) in HTML, which was really annoying. So, CSS was created to address this problem. Instead of having to individually add styles, you create styles that you can apply to certain parts of your Web page, or even the whole thing. It gets better with every update, which is a reason that the quality of Websites has gone up over time.

When you first download Xyle scope, it has a lot of bookmarks built-in. These are Websites that the guys at Cultured Code think has interesting CSS. The most interesting of these (in the Favorites folder) is called CSS Zen Garden. As said at their Website, their Website is “a demonstration of what can be accomplished visually through CSS-based design.” You can select a style sheet from the sidebar of the Website, and it will load with that sheet. This allows you to see what the masters of CSS do.

Once you have loaded a Web page in Xyle scope, you will see three panes it its sidebar: the Hierarchical View, HTML Pane and Cascade view. The Hierarchical View shows you the HTML document as a hierarchy of elements. You can use your arrow keys or your mouse to navigate through these. When you select any item, you will see that the HTML Pane changes. The HTML Pane also shows you a hierarchy of elements, but it goes a little further in showing you the properties inside those tags. Like, for doing a link, you write, “a href=…” In the Hierarchical View, you would just see an ‘a’, but in the HTML view, you see the ‘a’, the ‘href’ and even the link. It is like a simplified version of a real HTML document. The Cascade allows you to see the CSS for the selected element in either the HTML Pane of the Hierarchical View.

Xyle scope also gives you another way to select elements: through the preview itself. Just click on the toolbar item next to the [Link] item, and you can just click somewhere in the preview to select an element. Sometimes it can be hard for beginners to understand things like ‘li’ and ‘ul’, and this really addresses that problem. Instead of having to know what ‘li’ means, you just have to click on the element you want to select. This can even help you learn what certain tags mean.

Xyle scope has a nice feature called Selector matching. To the right of the Cascade pane (if you pull it out from the right side of the window), there is another pane. If you click on a selector like ‘img’, this pane will show you all of the HTML element that will be effected by a change to the selector. This is a really nice tool, so I do not see why it is hidden by default.

Xyle scope also allows you to edit the CSS on Web pages. It gives you two ways to do it: typing in new values, or having Xyle scope helping you a little bit. If you know CSS, you may just want to type in new values in the Cascade view. If you’re not so familiar with it, you will want to do it the other way. In the Cascade view, just click on a property (like margin), and Xyle scope will present you with a window that gives you a place for a name and a value. So, you can also use this to add new properties. The reason this is good for people who don’t know much CSS is because it gives you lists of possible Names and Values. But of course, you can also add your own. Xyle scope also allows you to edit the CSS and HTML of Web pages in BBEdit, TextMate or TextEdit. However, the Web page you are editing must be a file on your hard drive. Xyle scope’s built-in CSS editor is not that great (which is why you would want to use Xyle scope to preview, and something like BBEdit to edit), but that is not really its purpose.

Cultured Code’s Xyle scope retails for $19.95 and you can download a free trial from their site. It is a wonderful tool for anyone learning CSS, or anyone who just wants to see how others do CSS, wishing to improve their own. It is not, however, a CSS editor and should not be compared to one. For actual editing purposes, it is mainly only used to do the finishing touches of Web pages.

share permalink ping 3 Comments