CSS使用状況
チェック時に使われた CSS のサイズと割合をページ別・スタイルシート別に確認できます。未使用のスタイルも、操作後や別のページで必要になる場合があります。
オンラインCSS監査
ページが読み込む CSS の量、チェック時に使われたスタイル、重複するルールを確認できます。色、フォント、重なり順、エラーも同じレポートに表示します。
レポート形式
レポートにはCSSソース、指標、シグナルが表示されます
CSS のサイズと使用状況を調べた後、色、フォント、重なり順、検証エラーを確認してください。
レポートを説明するためのサンプルデータです。実際のページの結果は検査後に表示されます。
スタイルシートの取得元
外部スタイルシートとページ内のスタイルを比較できます。取得元ごとにサイズと、チェック時の使用済み・未使用コード量を表示します。
| ソース | タイプ | 使用率 | 未使用 |
|---|---|---|---|
| app.css | 外部 | 48 KiB / 72 KiB | 72 KiB · 60% |
| components.css | 外部 | 32 KiB / 8 KiB | 8 KiB · 20% |
| インラインスタイル | インライン | 6 KiB / 2 KiB | 2 KiB · 25% |
- ソース
- app.css
- タイプ
- 外部
- 使用率
- 48 KiB / 72 KiB
- 未使用
- 72 KiB · 60%
- ソース
- components.css
- タイプ
- 外部
- 使用率
- 32 KiB / 8 KiB
- 未使用
- 8 KiB · 20%
- ソース
- インラインスタイル
- タイプ
- インライン
- 使用率
- 6 KiB / 2 KiB
- 未使用
- 2 KiB · 25%
まずスタイルシートの取得元と重複する宣言を確認し、同じコンポーネントと状態に属する重複かを調べてください。ソースを変更したら、再検査したレポートと比較します。
チェック内容
一般的なアドバイスではなく、完全なCSSインベントリ
レポートにはスタイルの取得元とサイズ、コードの使用状況、セレクターの優先度、重複宣言、デザイン値、検証エラーをまとめています。
サイズとソース
CSSの合計サイズ、スタイルシートソースの数、インラインと外部スタイルシートの個別の数を収集します。
セレクタの詳細度
ルールの優先度に関わるセレクター詳細度の最小値・平均値・最大値を比較できます。特に複雑なセレクターは別に表示します。
重複宣言と !important
ルール、セレクター、宣言の数、重複するプロパティと値の組み合わせ、!important の使用例を確認できます。
メディアクエリとプレフィックス
最も頻繁なメディアクエリを表示し、ベンダープレフィックス付きのCSSプロパティをカウントします。-webkit-、-moz-、-ms-、-o-です。
色、フォント、z-index、エラー
レポートは、一意の色の値、検出されたfont-familyの値、数値のz-index値、CSS検証エラーの例を出力します。
使い方
URLからページの完全なCSSサマリーまで
ページの URL を入力してください。Milten がブラウザでページを開き、スタイルシートを収集してレポートを作成します。ビルドへの組み込みは不要です。
ページを読み込み、CSSを収集
レポートにはチェックしたURL、日付、スタイルの取得元が表示されます。ページに埋め込まれたスタイルと外部スタイルシートは分けて表示されます。
CSS の使用状況とセレクターの優先度を測定
使用された CSS の量、ルールと宣言の数、詳細度が最も高いセレクターを確認できます。
CSSレビュー用のテーブルを作成
重複宣言、!important、メディアクエリ、ブラウザ接頭辞、色、フォント、重なり順、CSS エラーを確認できます。
FAQ
CSS監査に関するよくある質問
CSS の使用状況、セレクターの優先度、!important、レポート内容、所要時間についての回答です。
未使用CSSは速度にどう影響しますか？
ブラウザはページをレンダリングする前にCSSをダウンロード、解析、適用します。不要なルールが多いほど、初回レンダリングの遅延リスクが高まり、インターフェースの保守も難しくなります。
なぜセレクターの詳細度を見直すのですか？
詳細度は、CSS ルールが競合した際のセレクターの優先度を判断する手掛かりです。詳細度が高すぎると、上書きにさらに強いルールが必要になり、後の変更が難しくなります。
!important宣言はすべて削除すべきですか？
いいえ。!importantは宣言の優先順位を変えるもので、意図的に使われる場合もあります。レポートは調査すべき箇所を示します。置き換える前に、カスケードとコンポーネントの状態を確認してください。
レポートにはどのようなデータが含まれますか？
レポートには URL と日時、スタイルの取得元とサイズ、コードの使用状況、セレクターと詳細度、重複宣言、!important、メディアクエリ、ブラウザ接頭辞、色、フォント、重なり順、CSS エラーを含みます。
ページチェックにはどのくらい時間がかかりますか？
単一ページのチェックは通常1分未満です。所要時間はリソース数、ネットワーク状況、読み込み後にページが安定するまでの時間によって異なります。