Programming
Article

A Specialized JavaScript Library for Querying CSS

By James Edwards

Some faintly-written CSS on leaf-patterned paper, tied with string in the corner.

For the last few months I’ve been beavering away on a fascinating project, that’s now finally seen the light of day! It’s called CSSUtilities, and it’s a specialized JavaScript library for querying CSS style sheets.

Perhaps the most unique thing about it is that can give you non-normalized properties information — in other words, you can get the colors and dimensions that apply to an element in the original unit they were specified with, rather than the normalized values you get from built-in query methods like getComputedStyle or even from the CSSStyleSheet interface.

There are scores of examples of this in all browsers, but to cite a few: Firefox normalizes most color values to RGB, when you might have originally defined them in hex or as color names; Opera normalizes colors to 6-digit hex; Internet Explorer splits-up margin properties, so even though you may have defined a single shorthand, it will return separate values for each direction.

But when you’re working with the CSSUtilities library, you get back exactly what was specified, and this makes it possible to work with dynamic styles in a way that was previously impossible — for example, when you’re reading the width of an element you always get a value in px, but now you can get its width in em or % that you can then apply to a clone, giving it exactly the same scaling or resizing characteristics as the original.

Some of the other things it can do include: listing all the rules that apply to a specified element, telling you the properties it inherits, or the media they apply to, or the specificity of any selector. It can tell you basically everything, about every rule in every style sheet.

I hope that many people will find it useful and that it spawns the development of some new and interesting applications and tools; I’ve made a few demos you can check-out at http://www.brothercake.com/scripts/cssutilities … perhaps they’ll inspire you to try something!

And in fact you can already see CSSUtilities in the wild, because a pre-release version powers the CSS inspection interface in CodeBurner for Adobe AIR, Opera Widgets and Mac OS X Dashboard. Their ability to extract and analyze style sheets, list their rules, and give you information about each one’s properties and selectors — all of that functionality is powered by CSSUtilities, and it’s the only thing that makes that possible — There simply isn’t anything else available to unprivileged code that can do the same job.

The only reason Firebug can give you this information is because it can call on Firefox’s dom-utilities class to tell it the rules that apply to the element you’re inspecting, but of course that’s only available in Firefox to privileged scripts like add-ons (and it’s still normalized data, not necessarily what the author originally specified). One of the demos I made is a Live CSS Inspector, that lays-out rules in a similar format; and it works in all browsers — even IE6!

So please do check it outhave a browse through the demos … let us know what you think (or if you find any bugs … hopefully unlikely, but always possible!). But most of all, I’d really love to hear your ideas for any tools or applications that could use it. I confess that I’m very excited about the possibilities; I haven’t had so much fun with DOM CSS since querySelectorAll came along :-)

  • Ryan Blunden

    Great work! I’ve wanted something like this in several projects over the years, particularly getting element properties in the units they were specified. Thanks James.

  • http://www.chrisbward.com chris ward

    Slightly confusing at first – you should really work on your elevator pitch :)

    Really cool app (I tweeted it), but I’m thinking it would be really handy as a bookmarklet?

  • http://mrclay.org/ mrclay

    “Get Specificity”: Why not show the raw integer, too? Also it’d be if we could put a selector in the location hash and have it computed on domready. Then we could make a bookmarklet for the page :)

    How I wish this were available anytime you hovered over a selector in Firebug or a CSS editor…

    “Live CSS Inspector”: It was slightly confusing to select an LI or the STRONG element and have nothing come up. This is, of course, correct since there’s nothing applied to them in the CSS, but it might be clearer to have a section above the “inherited from body” section that says something to this effect: “No selectors in the SS apply to this element directly.”

  • http://mrclay.org/ mrclay

    Did I forget to mention that this lib is a great idea and well-executed :)

  • http://www.brothercake.com/ brothercake

    A bookmarklet – you mean something like Firebug Lite – an analysis tool?

  • http://mrclay.org/ mrclay

    I forgot specificity has the infinite number base. In practice you could probably get away with displaying base 36 with a caveat.

    I imagine Chris was thinking of a bookmarklet to add an inspector to the current page.

  • http://www.brothercake.com/ brothercake

    @mrclay – thanks for your input, there’s some good ideas there :) I honestly hadn’t thought too much about these tools and their wider application, they were just demos I put together, but maybe developing them would be a good idea – all’s well that ends well, kinda thing.

    Get Specificity – the integer is the number of boxes you get. But I suppose it would make sense to display a pure numerical value as well, sure. As far as making it addressible via location hash goes, that’s an interesting thought. I’m not sure offhand whether all the various characters that selectors use would be allowed in a hash, especially quote marks, but then I suppose it could handle urlencoded characters easily enough.

    Firebug – there are quite a few features in this lib that would make useful additions to Firebug, and the CSS analysis it does is significantly more accurate than Firebug. There is no regular CSS development on Firebug at all, so maybe I should be making some noise there!

    Live CSS Inspector – yeah fair point.

    Specificity Number Base – I considered base 36, but then what’s the point? I mean, there’s no normalized mechanism for displaying or working with specificity values, it’s just not something you normally come across, so why not make a case for saying that they should be defined as an array in the first place? How do you imagine that browsers represent them? The whole idea of “numbers that operate in an infinite base” is exactly the kind of unreal concept we’ve come to expect from the W3C – theoretically perfect, but practically useless!

    Bookmarklet – I’ll look into it

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.