CSS Overviewパネル

Chrome DevToolsで、Cmd+Shift+P → 「CSS Overview」を選択してCSS Overviewパネルを開きます。「Capture overview」をクリックすると、現在のページのスタイルシート全体が分析されます。このパネルには、色、フォント、メディアクエリ、未使用の宣言がまとめて表示されます。

Colorsセクションには、ページのCSSで使用されているすべての色の値が、種類ごとにまとめて表示されます。対象には、hex、rgb、名前付きカラー、グラデーションの色の停止点が含まれます。色をクリックすると、その色を使用している要素とプロパティが表示され、意図しない色のばらつきやパレットの乱立を見つけられます。

Fontsセクションには、ページに適用されているすべてのfont-family、font-size、font-weightの組み合わせが表示されます。フォントスタックのフォールバックや、一貫性のない文字サイズの体系が明らかになり、それぞれの組み合わせを使用している要素も確認できます。

Media Queriesセクションには、すべての@mediaルール、そのブレークポイント、ルール内の宣言数が表示されます。この概要から、ブレークポイントの不統一が明らかになります。コードベース全体で、開発者ごとに少しずつ異なるブレークポイントの値が15個以上蓄積されることもあります。

CSS Overviewは、詳細度の競合やセレクターの不一致によって適用されることのない宣言を検出します。これはCoverageとは異なり、ユーザー操作で有効化する必要がなく、常に上書きされているルールを見つけられます。

パネルでは、背景に対するWCAG AAまたはAAAのコントラスト比を満たさないテキストの色が強調表示されます。コントラスト違反をクリックするとDOM内の要素が選択されるため、別のツールを使わずにアクセシビリティの問題を簡単に修正できます。

大規模なリデザインの後や、既存のコードベースに参加したときにCSS Overviewを使用します。色の概要から、実装がデザイントークンからどの程度乖離しているかがわかります。フォントの概要からは、ユーザーが気づく前にタイポグラフィの不統一を見つけられます。

同じアプリケーションの複数のページでCSS Overviewを実行します。色とフォントの概要を比較すると、ページごとの乖離が明らかになります。つまり、他のページにある対応するコンポーネントとは異なるタイポグラフィや色で表示されるコンポーネントを見つけられます。

CSS Overviewから色のデータをエクスポートし、デザイントークンのパレットと比較します。概要にはあるもののトークンパレットにはない色はハードコードされた値です。これらはトークン参照に変換し、単独の値としては削除する必要があります。

CSS Overviewからブレークポイントを一覧化し、重複やほぼ同じ値（開発者ごとに768px、769px、770pxなど）を特定します。それらをデザインシステムのブレークポイントスケールに統合し、すべてのメディアクエリをCSSカスタムプロパティまたはSCSS変数で指定するように更新します。

CSS Overviewが分析するのはリンクされたスタイルシートであり、インラインスタイルや実行時に適用されるCSS-in-JSのスタイルは対象外です。初回レンダリング後にJavaScriptで追加された動的なクラスは表示されない場合があります。動的なスタイルを完全に確認するには、Coverageと手動検査も併用してください。

CSS Overviewは、どのようなアクセシビリティの問題を検出しますか？

CSS Overviewは、色、フォント、メディアクエリのブレークポイント、コントラストの問題をページ単位で監査します。これを使用すると、設計からの乖離、パレットの乱立、タイポグラフィの不統一、アクセシビリティの問題を、解消に大きなコストがかかる技術的負債へと蓄積する前に検出できます。