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

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

CSS Usageのキャプチャ

CSS Usage

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

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

CSS Usageのキャプチャ

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

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

CSS Usageのキャプチャ

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

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

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

top of page

©2017 coliss