Version 0.99 Beta — 4th April 2010
Here are some of the things it can do:
- CSSUtilities can find all the rules that apply to an element, including information about properties, media, specificity and inheritance.
- It can give you properties information that bypasses browser normalization, so you get values such as colours and dimensions in the original unit they were specified with, rather than the normalized or computed values returned by built-in query methods.
It can tell you which properties apply directly,
or which through inheritance,
and can identify rules and properties that have been cancelled out by
others with a higher specificity, as well as those which only apply
to dynamic states like
- It can tell you the media for any rule, both the types that were originally specified and the computed values that ultimately apply.
- It can tell you the specificity of any selector.
- CSSUtilities supports both the W3C standard DOM CSS implemented in Firefox, Opera, and the Webkit browsers, and Internet Explorer's proprietary setup from IE6 onwards.
- CSSUtilities understands almost everything from CSS1, CSS2.1 and CSS3, and supports all forms of stylesheet include. It works in HTML, XHTML and XML, and can equally handle physical or virtual DOMs.
CSSUtilties provides CSS inspection capabilities that are more accurate and detailed even than those provided by Firebug! (Seriously!) And it makes these capabilities available to ordinary, unprivileged code that runs in any contemporary browser.
Live CSS Inspector Demo
The output area to the right will show real-time inspection of the CSS used on this page:
- Press "Inspect" to prime the demo
- Click any element to inspect its CSS
Any rules which apply to the element you select will be shown in the output area. You can also hover over each rule to see additional information in its tooltip.
But this is just a small sample of the full range of data available from CSSUtilities, and just one example of how it might be organised.
Some more demos
I've put together a few simple tools that illustrate some different kinds of data and functionality the library can provide:
- Get Specificity
- Enter a CSS selector into the textbox, and get a simple visual representation of its specificity
- Stylesheet Switching
- See how the library can automatically re-initialize in response to stylesheet switching
- Live CSS Inspector
- A standalone version of the demo on this page
- Stylesheets Summary
Browse around a test
<iframe>and get summary information about the stylesheets used on each page
And here are some more detailed technical demos, that illustrate each of the four primary design patterns you can use for getting data:
- Asynchronous with manual init
- Asynchronous with auto-init
- Synchronous with manual init
- Synchronous with auto-init
For more about design patterns see :: Getting data.
Get the script
CSSUtilities.js script has been aggressively compressed —
all comments and uneccesary whitespace have been removed, and most
of the names of variables, functions and so on have been
minimized to 2 or 3 characters. For your interest and reference,
the archive also includes a copy of the original, uncompressed script,
which has extensive commenting and friendly names
The archive also includes a selection of demos, that illustrate how to use the script, and demonstrate some sample output.
To start with you should check out Setup and Configuration, which will guide you through installing the script and choosing its basic settings, and shows you the different ways to get data from it. Then there's an exhaustive Functions Reference, which is a detailed technical breakdown of all the public methods the library provides; it also has a reference list of errors you may encounter, and a general list of specifications:
- Setup and Configuration
- Functions Reference
CSSUtilities is known to work fully in the following browsers:
- Internet Explorer 6 +
- Firefox 1.5 +
- Safari 3 +
- Chrome 2 +
- Opera 9 +
- Konqueror 4
More generally, it should work fully in any environment that supports
XMLHttpRequest (for example, it all works fine within the
Adobe AIR runtime, which uses a version of Webkit).
It's known to fail cleanly (without errors) in the following:
- Internet Explorer 5.5
- Opera 8
for details of the library's CSS support see :: General specifications.