クリティカルCSSセレクター抽出
CSSとHTML断片を貼り付け、一致する要素のルールを探します。実際の画面表示位置は測定しません。
CSSとHTMLはローカル処理(各100 KB)。セレクター照合のみで、描画や初期画面の可視性測定は行いません。
使い方
使い方
- CSSと確認するHTML断片を貼り付けます。
- 断片内の要素に一致するルールを抽出します。
- 使用前に出力を確認し、実際のレンダリングと照合します。
セレクター照合のみ
ブラウザーがCSSを解析し、指定HTML断片に対応するセレクターを確認します。要素が実際に初期画面に見えるか、実行時クラスやレイアウトで隠れているかは判定しません。
構文と制限
一致する通常のスタイル規則とネストした@media/@supportsを残します。@import、keyframes、font-face、未対応ルールは省略します。静的断片では一致しない疑似状態もあります。手動確認してください。
ローカル処理と上限
CSSとHTMLはブラウザー内で処理し、それぞれ100 KBまでです。本番用の完全なクリティカルCSSを保証しません。
よくある質問
あわせて知りたいこと
初期画面に見える要素を判断しますか?
いいえ。レイアウトを描画せず、指定HTMLへのセレクター照合だけを行います。
すべてのCSS機能を保持しますか?
いいえ。スタイル規則と対応するmedia/supportsに限られます。省略を確認してください。