Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。フォールバック戦略の基盤として必須。

@supports feature queries

@supports は CSS のアットルールで、ブラウザーがある CSS 機能に対応しているかによって、CSS 宣言を指定することができます。 このアットルールを使用することは、一般に機能クエリーと呼ばれます。 ルールはコードの最上位または他の条件付きグループアットルールの中に配置しなければなりません。

JavaScript では、@supports は CSS オブジェクトモデルのインターフェイス CSSSupportsRule からアクセスできます。

機能検出フォールバック

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@supports
28
12
22
9
28
9
DOM API
supportsText

supportsText は CSSImportRule インターフェイスの読み取り専用プロパティで、 @import アットルールで指定された supports 条件を返します。
121
121
114
17.5
121
17.5
CSSSupportsRule

CSSSupportsRule インターフェイスは、1 個の CSS @supports アットルール を表すオブジェクトを表します。
28
12
22
9
28
9
CSS @ ルール
supports

インポート条件として `supports()` を指定する
122
122
115
17.5
122
17.5
font-format

`フォントフォーマット()`
108
108
106
17
108
17
font-tech

`font-tech()`
108
108
106
17
108
17
selector

`セレクター()`
83
83
69
14.1
83
14.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Check if Grid is supported */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
}

/* Check selector support */
@supports selector(:has(*)) {
  .card:has(img) {
    grid-row: span 2;
  }
}

/* NOT condition */
@supports not (backdrop-filter: blur(10px)) {
  .modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
  }
}

ライブデモ

@supports (display: grid)

@supports feature queries @supports (display: grid) demo.

プレビュー全画面表示

Fallback with @supports

fo-back demo. with @supports feature queries @supports

プレビュー全画面表示

featurecheckdisplay

@supports feature queries featurecheckdisplay demo.

プレビュー全画面表示

実務での使いどころ

  • プログレッシブ・エンハンスメント

    新機能をサポートするブラウザだけに拡張スタイルを適用し、未対応ブラウザにはフォールバックを提供。

  • セレクターサポート検出

    @supports selector() で :has() などの新しいセレクターの対応状況を検出。

注意点

  • @supports 自体に対応していない古いブラウザではブロック全体が無視される。
  • プロパティの存在チェックのみで、実装の正確さは保証されない。

アクセシビリティ

  • フォールバック時もコンテンツへのアクセスが確保されていることを検証する。

参考リンク