コード、データと QRツール

クリティカルCSSセレクター抽出

CSSとHTML断片を貼り付け、一致する要素のルールを探します。実際の画面表示位置は測定しません。

ブラウザ内で処理登録不要プライバシーの説明 ↗

CSSとHTMLはローカル処理(各100 KB)。セレクター照合のみで、描画や初期画面の可視性測定は行いません。

使い方

使い方

  1. CSSと確認するHTML断片を貼り付けます。
  2. 断片内の要素に一致するルールを抽出します。
  3. 使用前に出力を確認し、実際のレンダリングと照合します。

セレクター照合のみ

ブラウザーがCSSを解析し、指定HTML断片に対応するセレクターを確認します。要素が実際に初期画面に見えるか、実行時クラスやレイアウトで隠れているかは判定しません。

構文と制限

一致する通常のスタイル規則とネストした@media/@supportsを残します。@import、keyframes、font-face、未対応ルールは省略します。静的断片では一致しない疑似状態もあります。手動確認してください。

ローカル処理と上限

CSSとHTMLはブラウザー内で処理し、それぞれ100 KBまでです。本番用の完全なクリティカルCSSを保証しません。

よくある質問

あわせて知りたいこと

初期画面に見える要素を判断しますか?

いいえ。レイアウトを描画せず、指定HTMLへのセレクター照合だけを行います。

すべてのCSS機能を保持しますか?

いいえ。スタイル規則と対応するmedia/supportsに限られます。省略を確認してください。