One of the tools I mentioned during the talk, the $20USD Xyle scope CSS debugger and analysis tool, is something I’ve been using and recommending since shortly after its release. I think it’s high time I got around to writing up why exactly I think it’s so great.

What I like about Xyle scope is the richness of information it provides about a page’s DOM and CSS, and how easy it is to get to that information. A typical scenario that’s becoming far more common for me is that I come back into a site I last worked on a few months ago, and can’t remember the specific id and class values I’ve used, or how specific my selectors ended up being, or increasingly, which files contain which style.

Here’s an example of what I mean. On the front page of this site, there’s a listing of the 5 most recent posts. If I needed to get back into the CSS at some point and start changing the formatting of the dates within that list, traditionally I’d have had to refresh my memory by determining a few things:

What sort of HTML element the dates are contained in, and whether it has a class or id

Parent elements, and their respective id/classes

Which rules in the CSS apply to that element directly

Which rules in the CSS that element inherits from parents

The specificity of any of the CSS rules

Which CSS files the appropriate rules exist within

Any time I need to make an edit to a page, I need to go through that list and figure out all the relevant information about the element in question. Though I only have a single file on this site, these days I favour breaking up a larger site’s CSS into multiple files. This compounds the management problem, since it makes it a bit more difficult to narrow down on the exact rules I need. But that’s only part of the problem, the rest is the mental overhead required to work out myself how the specificity breaks down, and which rules I actually want to edit in order to affect my change.

What I’m getting at is that the mental energy exerted to figure out all of this is something that can and should be done by software. There’s no reason why I shouldn’t be able to just point and click on the element and have all of that information shown to me automatically. Enter Xyle scope.

The prevous screenshot gives you an idea of what all that click can tell you. Up in the top right (panel a), there’s a DOM drill-down that shows you the entire hierarchy up to the element you’ve clicked on. It’s informational, but it also acts as a DOM browser: if you need to, you can click on adjacent or parent elements and work your way back up or down the hierarchy (and the rest of the information, as well as the selection within the browser pane on the left, will update accordingly).

Down below the DOM browser (panel b), there’s a markup synopsis that outlines what the HTML elements, classes, and ids are for the element (and its various children, where applicable).

Then down at the bottom right, there’s a split-panel style rule browser. The more comprehensive listing includes selectors and fullrules on the left (panel c), and the summary on the right (panel d) is kind of a navigation for the left that includes just the selectors. The information in the left panel is extremely useful, and gives me exactly what I outlined above.

What we’re looking at in panel c is a summary of the cascade, followed by a listing of all the style rules that could potentially apply to the date in that home page listing I picked as my example. You’ll notice some properties are greyed out; these are properties that don’t actually make up the final styling of the element, since they’re being overridden in other, more specific rules. At a glance I can tell exactly which selectors are applying which properties, obviating the need to sift through multiple selectors and calculating specificity manually.

As well, you’ll notice the word ‘wintermint’ sitting beside each selector in this panel; this is the name of the CSS file that the selector resides in. As I have one single CSS file for the site, it’s not so useful in this instance. But when armed with a tool that clarifies to this level exactly which rules I should be looking at, you can see how that naturally eases any fear of maintaining multiple CSS files. Managing them is a snap with a tool like this.

I don’t just use Xyle scope for debugging; I use it for any sort of editing or CSS creation that involves thinking carefully about specificity issues. It has cut down on the time I spend fooling around in a CSS file trying to figure out exactly where to make my change, and its mastery of specificity has actually impacted the quality of my overall CSS for the better. I can write tighter, more precise style rules without the worry that I won’t be able to make sense of them later. And though other software offers similar results, as I mentioned at the top, I currently prefer Xyle scope’s ease of use and stand-alone nature over built-in browser tools.

No, there’s no Windows version at the moment, but Mac minis are cheap like bubble gum these days. You’ve already got a Mac for testing anyway, right? (And nope, I’m not getting paid for this posting or recommending the software, I’m simply an enthusiastic user.)

Good post, now I have a better idea of how Xylescope works. I had downloaded and tried this app out a few times, but never really sat down to use it extensively enough to really understand how to use it well. Thanks!

Dave, your post focuses primarily on using Xyle scope to edit and debug your own website and I agree it’s a terrific tool for that. But another of Xyle’s strengths is allowing you to really get under the hood of other people’s websites as well! Sure, I could look at a site’s (let’s say, yours) source and look at the CSS file, but no other tool that I know of allows me to put those two bits of information together in such a cohesive, visual manner. So not only does Xyle help with development time, it also helps us learn! Great tool!

My guess: do one thing and do it well. Why patch on a half-assed text editor when a ton of great ones exist already? This app does what it does; I’m prefectly content to use it without an internal editor.

Great write-up, Dave! I knew there was something to this program, but I hadn’t taken the time to dig into it yet. This helps a lot. As you mentioned before, a lot of this can be done with the Firefox Web Dev Extension, but this is very clean. I’m going to have to consider if it’s $20 worth of clean, though!

This tool looks very nice. If I will ever manage to switch to a mac, I would definitely give it a shot.
But for now I am happy with my PC workstation. I mostly use the DOM-Inspector that ships with Firefox in combination with the “InspectThis”-Extension (of course parallel to the “Web developer”- and “FireBug”-Extensions).

It gives me a tree-view of the DOM and also all the css-rules (along with the associated css-files) which apply to a certain element. For now I can live with that… although this “Xyle scope” looks very good. Especially the specificity-indicator. That one I would really like to be able to use. =)

This allows you to inspect items on a page on the fly. You put it in your favorites and click on it(or set up a shortcut) then it pops up a javascript window on the site you are on. It gives all kinds of information about the current site. Once you look at some of the shortcuts, it really becomes a powerful tool. Just thought I would give my two cents and yes Xyle scope is awesome as well!

CSSEdit is Mac only whereas StyleMaster has the advantage of working on Windows as well as Mac OS.

CSSEdit is lightweight, quick, has a really smart auto-complete, a live preview, a clean visual editor for those who are still learning and is much cheaper than its full featured competitor.
The next CSSEdit release (actually still beta) also feature a XyleScope like selection mode. Not as complete as XyleScope, but it becomes really handy in a daily use.

ps: The main trouble I encounter with StyleMaster was a white flash on each refresh in StyleMaster, it trigger a headache in less than 10 minutes. Also they might have solved this problem by now, its been a while.

Dave, I saw your panel at @media and found it very informative. I’m just getting to grips with advanced CSS (playing catch-up, I know) and a tool like this is an excellent way to keep yourself sane! Shame it doens’t ship for Windows as yet.

However, I’m finding Dreamweaver8 (which I use for most of my development) has much better CSS support than previous versions, and if you click any element in the design window, the CSS panel will tell you exactly which rules apply and where they are defined. That’s pretty handy and saves a lot of head-scratching at times :-)

Great post! The app is awesome and literally saves me hours of work. Producing XHTML and CSS (use BBEdit for that) is one thing, but tweaking the CSS based layout on the fly is another! Couldn’t live without it.