We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

@supports CSS @-規則は、波括弧でくくられた CSS ブロックへ入れ子にした文のセットと、プロパティと値のペアを任意で論理積・論理和・否定と組み合わせた検査対象の CSS 宣言で構成される条件文を関連付けます。このような条件を supports condition と呼びます。

@supports は、feature query を実行する機能を CSS にもたらします。

@supports @-規則は CSS のトップレベルだけでなく、CSS 条件付きグループ規則の内部でも使用できます。また、CSS object model の CSSSupportsRule インターフェイスを通してアクセスできます。

構文

supports condition は 1 個の宣言、あるいはさまざまな論理演算子で結合した複数の宣言で構成されます。演算子の優先順位は、括弧を使用して変更できます。

宣言の構文

もっともシンプルな式は CSS 宣言であり、CSS プロパティ名の後ろに値をコロン区切りで置いた形です。

( transform-origin: 5% 5% )

上記の式は、transform-origin5% 5% を有効とみなして構文を実装していれば true を返します。

CSS 宣言は、常に括弧でくくります。

not 演算子

not 演算子は新たな式を作成するために任意の式の前に置くことができ、元の式を否定します。

not ( transform-origin: 10em 10em 10em )

上記の式は、transform-origin10em 10em 10em を有効とみなして構文を実装していなければ true を返します。

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

not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )

注記: トップレベルにある場合は、not 演算子を括弧でくくる必要はありません。andor といった他の演算子と組み合わせるときは、括弧が必須です。

and 演算子

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

(display: table-cell) and (display: list-item)

括弧を増やすことなく、複数の論理積を並記することができます:

(display: table-cell) and (display: list-item) and (display:run-in)

以上の式と以下の式は等価です:

(display: table-cell) and ((display: list-item) and (display:run-in))

or 演算子

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

( transform-style: preserve ) or ( -moz-transform-style: preserve )

括弧を増やすことなく、複数の論理和を並記することができます:

( transform-style: preserve ) or ( -moz-transform-style: preserve ) or 
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )

以上の式と以下の式は等価です:

( 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>
}

指定した 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: green;
  }
}

仕様

仕様書 策定状況 コメント
CSS Conditional Rules Module Level 3
@supports の定義
勧告候補 最初期の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 28.0 (有) 22 (22) [1] 未サポート 12.1 9
機能 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート ? 22.0 (22) [1] 未サポート 12.1 9 28.0

[1] Gecko 17 から Gecko 21 では、ユーザが設定項目 layout.css.supports-rule.enabledtrue に設定して有効化した場合に限り、この機能をサポートしていました。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss
最終更新者: yyss,