CSS @supports クエリビルダー
プロパティと値を入力し、and / or で 2 つ目の条件を組み合わせ、必要なら not で否定して @supports ブロックをコピーします。判定はこのページを表示しているブラウザーによるものです。
ブラウザ内でローカルに実行 · CSS.supports() · @supports · selector()
✓
プロパティと値を入力し、and / or で 2 つ目の条件を組み合わせ、必要なら not で否定して @supports ブロックをコピーします。判定はこのページを表示しているブラウザーによるものです。
ブラウザ内でローカルに実行このビルダーはプロパティと値を 1 つの CSS 機能テストにまとめ、@supports ブロックとして書き出します。2 つ目のテストは and / or で結合でき、クエリ全体は not で否定でき、判定はこのページを実行しているブラウザーの CSS.supports() が出します。訪問者のブラウザーではなく、いま使っているブラウザーの結果です。
プリセットはよく使う 5 つを用意しています: display: grid、container-type: inline-size、color: oklch(60% 0.2 140)、backdrop-filter: blur(8px)、セレクターテストの selector(:has(*)) です。選ぶとプロパティと値の欄が埋まり、結合の設定はリセットされます。その後に入力を変えるとプリセットは Custom に切り替わります。
selector()、font-tech()、font-format() はそれだけで完結するテストです。プロパティ欄に selector(:has(*)) や font-tech(color-COLRv1) を入力すると、値の欄は条件に使われません。プロパティと値の組が (property: value) として包まれるのは、両方の欄が埋まったときだけです。
プロパティが空、または値が空のときはクエリも空になります。判定には「条件はまだありません」と表示され、書き出しも空のままです。以前のこのページは (: ) という不正なブロックを生成していました。否定も同じ考え方で、@supports not (property: value) はその宣言が未対応のとき（未知のプロパティを含む）に成立します。
CSS.supports() はページ内で実行されるため、判定が示すのは使用中のブラウザーだけです。計測時の Chrome 153 は (display: grid)、(container-type: inline-size)、(color: oklch(60% 0.2 140))、(backdrop-filter: blur(8px))、selector(:has(*)) のすべてに true を返しました。古いブラウザーでは同じページでも結果が変わります。
判定が対応を示しても、それは閲覧者全体の互換性表ではありません。@supports ブロックの前に通常の宣言を書いておけば、テストに失敗したブラウザーはそちらを使います。
書き出されるブロックは @supports <条件> { <ルール> } の形です。条件はテストした文字列のまま出力され、ルール欄の各行は 2 スペースで字下げされます。ルール本文はコメントやフォールバック宣言も含めて入力どおりにコピーされ、CSS をコピーはコード欄の内容をそのままクリップボードへ入れます。
処理はすべてページ内で完結します。計測では入力、プリセット、結合、否定、CSS をコピー、リセットのいずれも外部リクエストを送らず（en / fr / ja）、オフラインでも動作しました。第三者のリクエストは共通のアクセス解析タグのみです。