[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
Post on:2013年6月10日
sponsors
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。
納品する際に、不要なセレクタを除去するのに役立ちますよ。
Heliumの準備
HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。
スクリプトは、開発環境で実行してください。
公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。
Step 1: 外部ファイル
テストするページの全てに、当スクリプトを外部ファイルとして記述します。
場所は、head内でも</body>の上でもどちらでも可です。
<script type="text/javascript" src="path/to/helium.js"></script>
Step 2: JavaScript
「helium.init();」でスクリプトが実行します。
<script type="text/javascript">
window.addEventListener('load', function(){
helium.init();
}, false);
</script>
Heliumの使用方法
HeliumはLocalStorageとdocument.querySelectorをサポートするモダンブラウザで動作します。
IE6/7などの古いブラウザをサポートすることはしないと決定、とのこと。
- Heliumを実行すると、URLリストを入力するtextareaが表示されます。
- リンクのリストをペーストし、Startをクリックします。
「Reset to Beginning」でtextareaをクリアし、データをストアします。 - 実行すると、リンクのリストのそれぞれのURLをロードし、チェックを始めます。終了すると、チェックしたスタイルシートのリストがレポートウインドウに表示されます。
全てのスタイルシート内にあるセレクタで使用しているのを見つけられなかったセレクタをリスト化します。 - チェックされたセレクタの結果は、色分けされています。
- グリーン
- 一致しないセレクタ。
- ブラック
- マッチしないセレクタが含まれたグループではマッチしたセレクタ。
- グループとは、多数のセレクタがh1, h2, h3{}のように、一緒に定義されたものです。
※Heliumでは全てのセレクタは個々にテストされます。 - レッド
- 解析不可能なセレクタ。
※これはCSSハックを使用している場合に表示されることがあります。 - ブルー
- 疑似classのセレクタで、これはユーザーの操作を必要とするセレクタのため、現在使用されているかどうかチェックはできません。
※疑似classは手作業でチェックをしてください。
sponsors
