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