• 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 :hover.
• 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.

You can see CSSUtilities in action in the wild, by grabbing a version of CodeBurner for Opera, Dashboard or AIR, where it powers the entire CSS inspection interface.

Live CSS Inspector Demo

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:

1. Asynchronous with manual init
2. Asynchronous with auto-init
3. Synchronous with manual init
4. Synchronous with auto-init

For more about design patterns see :: Getting data.

Get the script

Download the zipfile [370K] and unzip it into your site directory; then the Setting it up guide will show you what to do next.

The 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.

Developer’s Guide

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:

1. Setup and Configuration
   1. Setting it up
   2. Getting data
   3. Configuration options
2. Functions Reference
   1. Configuration methods
   2. Data methods
   3. Error messages
   4. General specifications

Browser support

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 DOM2 CSS and 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.