[CSS]簡単で便利！ページで使用されていないCSSのセレクタを見つける無料ツール -Unused CSS
Post on:2018年2月19日
sponsors
指定したWebサイトで、使用されていないCSSのセレクタを自動で検出する無料オンラインツールを紹介します。
ページ内部のリンクも再帰的に調査し、複数のページにも対応しています。
Unused CSS finderの特徴
Unused CSS finderは指定したWebサイトの内部リンクを再帰的に調査し、複数のページで使用されていないCSSのセレクタを一覧表示するオンラインツールです。
- Webページで使用されていないCSSのセレクタを一覧表示。
- 内部リンクを自動解析し、配下ページも解析（現在ベータ版で100ページまで）。
- 解析するCSSは最初に指定したWebページで読み込まれているCSSのみ。
- 配下ページのみのCSSは、対象外。
- 擬似クラス（:hover, :focusなど）は未使用か判定できないため、対象外。
現在はベータ版で公開されており、需要があれば開発を続ける、とのことです。
Unused CSS finderの使い方
使い方は、簡単です。
サイトにアクセスし、ルートのURLを入力します。
リンクされているすべてのCSSファイルとインラインスタイルにあるスタイルシートを抽出し、未使用のセレクタを見つけるためにページを解析します。さらに、すべての内部リンクを見つけ、ページの解析を繰り返します。
ということで、まずはGoogleのトップページで試してみました。
https://www.google.co.jp/を解析
解析時間は、割とすぐに完了しました。
シンプルなページながら、使用されていないCSSのセレクタがけっこうありました。
Googleの解析結果
当ブログでも試してみました。
当ブログの解析結果
ユーティリティのセレクタは仕方ないとしても、プラグインの未使用セレクタがたくさんあり、これはどうにかしないと、と思いました。
sponsors
