Code Coverage for CSS – Part Two

May 4th, 2009 Alex Moffat Posted in CSS | 3 Comments »

I’ve been busy recently with my Google I/O presentation so I’ve not had the time to do much work on CSS coverage. However, there is some progress to report. One of the comments to my previous post pointed to Dust-Me Selectors, another Firefox plugin that collects and displays CSS usage information. I’ve modified the CSS Coverage plugin to use the technique Dust-Me Selectors uses to collect all of the rules defined in all of the stylesheets referenced by a page. At least I think it’s the same technique, I’ve not actually looked at the code.

I’m using the styleSheets document property that gives you access to all of the stylesheets directly loaded by a page. This includes external sheets directly loaded via LINK elements and inline styles loaded via STYLE elements. To get at sheets loaded via @import statements you can use the cssRules property of each stylesheet to find the CSSImport rules. These give you access to the stylesheet they reference and you just process recursively.

The alternative to this approach is to use an offline CSS parser and download and parse the stylesheets separately. This is what I did in my original proof of concept code, for which I used an extremely crude parser. To improve on that I looked at using flute parser. This is JavaCC based so I was able to modify it. However, it was just too much effort for the rewards.

However, there are a couple of disadvantages with using the styleSheets approach. Neither is very serious though. First, you can only download rules from styleSheets from the same origin as the original page. Firefox enforces the same origin policy restrictions on stylesheets and you get an NS_ERROR_DOM_SECURITY_ERR exception if you try to violate it. I don’t regard this as too serious a problem. CSS Coverage is a development time tool and if you have to abide by a restriction that all CSS comes from the same origin that’s not too onerous.

The second problem is identifying the rule in the stylesheet file from the information available in Firefox. What we get from Firefox is the selectors and the line in the file the rule comes from. Basically this means you need to restrict yourself to a single rule per line. As with the previous restriction this isn’t a problem in development where the clarity of the rules is most important. The final production stylesheet should be produced from the development sheets using a tool like the CSS compressor that’s part of Yahoo’s YUI compressor.

Download the latest CSS Coverage plugin. The next phase is the parser for the file created by the plugin and some simple reporting.