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 out … have 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 :-)
James EdwardsJames is a freelance web developer based in the UK, specialising in JavaScript application development and building accessible websites. With more than a decade's professional experience, he is a published author, a frequent blogger and speaker, and an outspoken advocate of standards-based development.
