CSSファイル内のセレクタが使用されているか確認できるFirefoxのアドオン -CSS Usage

ページに読み込まれたCSSファイル内のセレクタが、実際に使用されているか確認できるFirefoxのアドオンを紹介します。

「CSS Usage」を起動すると記述されているセレクタが一覧表示され、CSSファイルごとに結果が表示されます。

表示のグリーンは一回以上適用、レッドは未適用、グレーはhoverなどの確認できないセレクタです。
各ファイルの末尾には結果が数字で表示されます。

ファイルの末尾には結果が表示

使用方法は簡単で、確認したいページを表示し、「CSS Usage」ボタンをクリックし、「Scan」ボタンをクリックすると、セレクタのチェックが始まります。

「CSS Usage」ボタンは通常右端の方にあると思います。

最新の機能としては、「Auto Scan」機能、CSSファイル名をクリックすると別タブでそのファイルを開くことができます。

「CSS Usage」の動作には別途、「Firebug」が必要です。

Post on:2010年7月28日

on 2010年7月29日

[...] CSSファイル内のセレクタが使用されているか確認できるFirefoxのアドオン -CSS Usage | コリス (tags: css extension firebug firefox tools) [...]