@supports

CSS@supports @-規則は、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは機能クエリと呼ばれます。規則はコードの最上位または他の条件付きグループ @-規則の中に配置することができます。

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

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

構文

@supports @-規則は、ステートメントのブロックを対応条件に関連付けます。対応条件は1つまたは複数の名前と値の組を結合条件 (and)、非結合条件(or)、否定 (not) で組み合わせたものです。演算子の結合順位は、括弧を使用して変更できます。

宣言の構文

もっとも基本的な対応条件は、単純な宣言 (プロパティ名に続けて、コロンで区切って値) です。宣言は括弧で囲む必要があります。以下の例は、ブラウザーが transform-origin プロパティの値として 5% 5% を有効とみなすのであれば true を返します。

@supports (transform-origin: 5% 5%) {}

関数構文

第二の基本的な対応状況は関数の対応であり、これらの構文はすべてのブラウザーで対応されていますが、関数自体はまだ標準化の過程にあります。

selector() 

ブラウザーがテストされたセレクターの構文に対応しているかどうかを検査します。以下の例は、ブラウザーが子結合子に対応していれば true を返します。

@supports selector(A > B) {}

not 演算子

not 演算子は、新たな式を作成するために任意の式の前に置くことができ、元の式を否定します。以下の例は、ブラウザーが transform-origin プロパティの値として 10em 10em 10em を有効とみなさないのであれば true を返します。

@supports not (transform-origin: 10em 10em 10em) {}

他の演算子と同様に、 not 演算子はどれだけ複雑な宣言にも適用できます。以下の例はすべて有効な式です。

@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}

メモ: not 演算子が最上位にある場合は、括弧でくくる必要はありません。 andor といった他の演算子と組み合わせるときは、括弧が必須です。

and 演算子

and 演算子は 2 つの式から、元の式の論理積で構成される新たな式を作成します。元の式の両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式が同時に true になる場合に限り、全体の式も true になります。

@supports (display: table-cell) and (display: list-item) {}

括弧を増やすことなく、複数の論理積を並記することができます。以下の式はどちらも等価です。

@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}

or 演算子

or 演算子は 2 つの式から、元の式の論理和で構成される新たな式を作成します。元の式の一方または両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式の少なくとも 1 つが true になる場合に限り、全体の式も true になります。

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

括弧を増やすことなく、複数の論理和を並記することができます。以下の式はどちらも等価です。

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or 
          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

メモ: and 演算子と or 演算子を両方とも使用するときは、これらを適用する順序を定義するために括弧を使用しなければなりません。そうしなければ、@-規則全体を無視させる無効な条件になります。

形式文法

@supports <supports-condition> {
  <group-rule-body>
}

where
<supports-condition> = not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*

where
<supports-in-parens> = ( <supports-condition> ) | <supports-feature> | <general-enclosed>

where
<supports-feature> = <supports-decl> | <supports-selector-fn>
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where
<supports-decl> = ( <declaration> )
<supports-selector-fn> = selector( <complex-selector> )

where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

指定した CSS プロパティの対応状況を確認する

@supports (animation-name: test) {
  … /* 接頭辞がないプロパティでアニメーションに対応する場合に適用する CSS */
  @keyframes { /* @supports は CSS 条件付きグループ規則であり、他の適切な @-規則を含むことができる */
    …
  }
}

指定した CSS プロパティの対応状況を、接頭辞付きも含めて確認する

@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
         (-ms-perspective: 10px) or (-o-perspective: 10px)) {
  … /* 接頭辞つきを含めて 3D transforms を対応する場合に適用する CSS */
}

指定した CSS プロパティに対応していないことを確認する

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  … /* text-align-last:justify をシミュレートするために適用する CSS */
}

カスタムプロパティの対応状況を確認する

@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}

セレクターの対応の検査 (例: :is())

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

/* この規則は :is() に対応していないブラウザーでは適用されません */
:is(ul, ol) > li {
  … /* :is(…) セレクターに対応している場合に CSS が適用される */
}

@supports not selector(:is(a, b)) {
  /* :is() に対応していない場合の代替 */
  ul > li,
  ol > li {
    … /* 上記のものは :is(…) に対応していないブラウザーのために展開しています */
  }
}

@supports selector(:nth-child(1n of a, b)) {
  /* This rule needs to be inside the @supports block, otherwise
     it will be partially applied in browsers which don't support
     the `of` argument of :nth-child(…) is supported */
  :is(:nth-child(1n of ul, ol) a,
  details > summary) {
    … /* CSS applied when the :is(…) selector and
         the `of` argument of :nth-child(…) are both supported */
  }
}

仕様書

仕様書 状態 備考
CSS Conditional Rules Module Level 4
@supports の定義
編集者草案 selector() 関数を追加
CSS Conditional Rules Module Level 3
@supports の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@supportsChrome 完全対応 28Edge 完全対応 12Firefox 完全対応 22
完全対応 22
未対応 17 — 22
無効
無効 From version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 12.1Safari 完全対応 9WebView Android 完全対応 ≤37Chrome Android 完全対応 28Firefox Android 完全対応 22
完全対応 22
未対応 17 — 22
無効
無効 From version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1Safari iOS 完全対応 9Samsung Internet Android 完全対応 1.5
selector()
実験的
Chrome 未対応 なし
補足
未対応 なし
補足
補足 See bug 979041.
Edge 未対応 なしFirefox 完全対応 69
完全対応 69
完全対応 64
無効
無効 From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なし
補足
未対応 なし
補足
補足 See bug 979041.
Safari 未対応 なしWebView Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 979041.
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 979041.
Firefox Android 完全対応 64
無効
完全対応 64
無効
無効 From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 979041.
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 979041.

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報