仕様と根拠

クラスの取り出し方

貼り付けた CSS からコメントと文字列を除き、「{」の直前にあるセレクタの部分から .名前 の形を取り出します。宣言の中(0.5em のような数値)は読まないため、小数点をクラスと取り違えません。クラスセレクタは、要素が属するクラスで照合するもので、クラスの決め方は文書言語が定めると Selectors Level 4 は述べています。

HTML との突き合わせ

HTML の class 属性を空白で区切って語に分け、CSS のクラス名と文字列として比べます。大文字小文字は区別します。CSS にあって HTML に一度も出てこないクラスを「未使用の候補」、HTML だけにあるクラスを情報として表示します。

画面幅の切れ目

@media の条件にある (min-width: 値) と (max-width: 値) を、px・em・rem の単位つきで一覧にします。同じ条件は 1 つにまとめます。範囲構文(width >= 600px)や、高さ・向きなどの条件は読み取りません。

根拠にした仕様・資料

指摘の段階

• エラー: 仕様に反していて、正しく読めない・処理できない入力です。
• 警告: 読めるものの、仕様の推奨に反する・矛盾する・意図と違う結果になりやすい入力です。
• 情報: 誤りではありませんが、知っておくとよい扱い(読み飛ばした部分や解釈)です。

入力の扱い(送信しない仕組み)

処理はすべてお使いのブラウザの中で行います。処理の本体はこのサイトから配信する小さなスクリプト(/app.js)で、外部のサービスやライブラリを読み込みません。ページはブラウザに通信を禁止させる設定(Content-Security-Policy の connect-src)つきで配信しており、入力した内容がサーバーや第三者へ送られることはありません。ファイルを選んだ場合も、端末の中で読み込むだけです。

このツールでできないこと(制約)

• スクリプトで後から付けるクラス(classList の追加など)や、別のページだけで使うクラスは判定できません。「未使用の候補」は削除してよいという意味ではありません。
• クラス名のエスケープ(.sm\:flex のような書き方)、属性セレクタ [class~=x]、CSS の入れ子の展開には対応していません。
• HTML の class 属性との細かい一致規則(ページのモードによる大小の扱いなど)は、このツールでは区別せず、大文字小文字を区別する単純な比較にしています。
• CSS を書き換えたり、不要な部分を自動で削除したりはしません。一覧を見て自分で判断してください。