DevToolsでCSSを分析する
Chromeは最近、「CSSの概要」と呼ばれる新しい実験的な機能を導入しました。これは、CSSの分析パネルを表示することで、ドキュメント内の潜在的なスタイルの問題の概要を示します。執筆時点では、新機能はまだ実験段階ですが、私の使用法では問題なく機能しました。 「CSSの概要」は、MicrosoftEdgeなどの他のChromiumブラウザでも利用できます。
CSSの概要を開く方法
- DevToolsパネルを開きます
- コマンドパレットを使用します（macOSの場合はShift + Command + P、Windowsの場合はShift + Ctrl + P）
- 検索語「cssoverview」を入力します
- 正しい結果をクリックするか、キーボードのEnterキーを押します
これで、「CSSの概要」パネルを操作する準備が整いました。
「CSSの概要」で分析できるもの
灯台のスコアと同様に、CSSの概要は表示するたびに生成する必要があります。デフォルトのビューは、レポートを実行する理由をわかりやすく説明しています。あなたがする必要があるのは、プライマリボタンを押すだけで、作成されたレポートを実際に即座に見ることができます。
選択ツールで要素が選択されていない場合、レポートには現在のドキュメントが反映されます。これは、デフォルトで、現在表示されているページが分析されることを意味します。特定の要素を選択した場合、レポートはこの要素のみを分析し、特定のスタイルの問題についての洞察を提供します。
レポート自体は非常にシンプルに設計されており、セクションのリストが表示され、それぞれが特定のトピックに焦点を当てています。最初のセクションでは、主要な指標の概要を説明します。以降の各セクションには、特定のトピックの詳細が表示されます。
私の経験では、最も有用なセクションは、使用される色と、現在の選択がコントラストの問題にどのようにつながる可能性があるかに関するものです。したがって、「CSSの概要」は、アクセシブルなWebアプリを実装するためのツールを補完するものです。
Tailwind.cssを使用している場合（私が実質的にすべてのWebアプリで行っているように）、PostCSSは前処理ですべての未使用のCSS定義を取り除くため、未使用のスタイルに関するレポートは多くの洞察を提供しません。
「CSSの概要」の展望
前述のように、この機能は現在実験的なものとしてマークされており、安定したリリースの前に変更される可能性があります。現在のバージョンでは非常に単純ですが、それでも優れた洞察を提供できます。このパネルには将来、より多くのデータが表示され、たとえば、コントラストの問題をすばやく修正するためのインタラクティブな変更が可能になると思います。
