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

4日(米国時間)、興味深いJavaScriptライブラリCSSUtilitiesが公開された。CSSUtilitiesはCSSに対してクエリを発行するタイプのJavaScriptライブラリ。ダイナミックにCSSを変更する場合に使えるのみならず、WebサイトやWebページの制作段階においてFirebugよりも詳細なCSSデータを取得して分析する場合などに利用できる。CSSUtilitiesの興味深い機能は次のとおり。

CSSUtilitiesの主な機能
CSS1、CSS2.1、CSS3、HTML、XHTML、XMLをサポート
Firefox、Opera、Webkit (Chrome、Safari)におけるDOM CSSをサポート
IE6以上に実装されたDOM CSSもサポート
要素に適用されているCSSルールをすべてチェック可能。プロパティ、メディア、指定内容、継承関係をすべて取得可能。:hoberなど動的な状況やメディア、セレクタも取得可能。
どのプロパティが直接指定され、どのプロパティが継承して適用されているかを取得可能。またほかの指定によってキャンセルされた指定が何であるかも取得可能。
JavaScriptのgetComputedStyleやCSSStyleSheetインタフェース経由で得られるスタイル情報の単位は、どういった単位で指定されているかに関わらず、ブラウザごとに違った単位になって返ってくる。CSSUtilitiesを使うと指定した単位での値取得が可能。

CSSUtilities (JavaScript Library for Querying CSS)においてCSSUtilitiesのデモンストレーションが公開されている。CSSUtilitiesを使うと具体的にどういった機能を実現できるかがわかる。

Live CSS Inspector - CSSUlititiesデモ動作例

Get Specificity - CSSUlititiesデモ動作例

Stylesheet Switching - CSSUlititiesデモ動作例

Stylesheets Summary - CSSUlititiesデモ動作例

CSSUlititiesが提供するCSSのインスペクタ機能はFirebugが提供するものより詳細なものとなる。特に継承関係も含めて適用関係を整理できるあたりは秀逸。CSSの適用内容を整理する場合にも利用できる。