CSS詳細度「実際レンダリング」勝者ルールチェッカーブラウザエンジンでどのCSSルールが実際に勝つか検証

なぜ「実際にレンダリング」する必要があるのか？理論計算だけでは不十分な理由

ネット上のCSS詳細度計算ツールのほとんどは、セレクターを数式に当てはめてスコアを出すだけです。例えば #main p は (1,0,1)、.card.active は (0,2,0) となります。しかし実際のブラウザが「どのルールが適用されるか」を判断する際には、継承、CSSの重ね順（カスケード順序）、!important、さらには同じプロパティが複数のルールでどう書かれているかといった要素も関わってきます——理論計算ツールはこれらをすべて無視しています。本ツールは異なるアプローチを取ります。貼り付けられたHTMLとCSSを非表示のiframe内でブラウザに「実際にレンダリング」させ、getComputedStyle()で本当に適用された結果を読み取ります。表示される結果は紙の上で計算したスコアではなく、ブラウザが本当に下した判定そのものです。

詳細度 (a, b, c) はどう比較される？具体例で解説

CSSの詳細度は (a, b, c) という3つの数字で表されます。aはIDセレクターの数、bはclass／属性／擬似クラスセレクターの数、cは要素／擬似要素セレクターの数です。比較は桁の比較と同じで、aが高い方が無条件で勝ち、aが同じ場合のみbを比較します。例えば #main p は (1,0,1)、.card .title.active は (0,3,0) です——後者が3つのclassセレクターを重ねていても、aが1 > 0であるため #main p が勝ちます。2つのルールの詳細度が完全に同じ場合は、CSS内で後に定義されたルールが適用されます。これがソースの記述順序も重要となる理由です。!importantは詳細度を完全に無視して結果を覆せる唯一の存在で、詳細度が低いルールでも!importantが付いていれば、!importantのない高詳細度のルールに勝ちます（ただし両方に!importantが付いている場合は、再び詳細度で決まります）。

このツールはどんな時に使うべき？

典型的な使用シーンは「このCSSルールを書いたのに、画面が変わらない」という状況です——これは通常、詳細度がより高い（または!importantが付いた）別のルールに上書きされていることを意味します。競合しているHTMLとCSSを貼り付け、確認したい要素のセレクターを入力すれば、本ツールはマッチするすべてのルールとその詳細度スコアを一覧表示し、実際のブラウザエンジンにどちらが本当に勝っているかを判定させます。もうカスケードのどの階層が勝っているかを目で推測する必要はありません。

本ツールは隔離されたiframe内でレンダリングするため、外部フォントや画像の読み込み、外部JavaScriptの実行はサポートされておらず、Shadow DOMやCSS-in-JSによって動的に生成されるスタイルにも対応していません。正確な結果を得るには、静的なHTML/CSSスニペットを貼り付けてください。