Abstract illustration for this script: some faintly-written CSS on leaf-patterned paper, tied with string in the corner.


Version 0.99 Beta — 4th April 2010

CSSUtilities is a JavaScript library that provides unique and indispensible methods for querying CSS style sheets!

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 :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

The output area to the right will show real-time inspection of the CSS used on this page:

  1. Press "Inspect" to prime the demo
  2. 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.

I recommend checking out some more demos, and familiarising yourself with the Developer’s Guide provided, to give you a fuller sense of the script's capabilities.

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  (smile)

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.

Get the script

BSD License → Terms of use

Additional Credits

(Redundent Selectors API)
© 2009 henrik.lindqvist@llamalab.com



Website gadgets

Bits of site functionality:

Usability widgets

Local network apps

Web-applications for your home or office network:

Game and novelties

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.

In this area

Main areas

[brothercake] a round peg in a square hole, that still fits