@supports

概要

@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-origin が 5% 5% を有効とみなして構文を実装していれば true を返します。

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

not 演算子

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

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

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

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

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

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  )))

形式文法

@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;
  }
}

仕様

ブラウザ実装状況

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

関連情報

• JavaScript で同様のチェックを実行できる、CSSOM の CSSSupportsRule クラスおよび CSS.supports メソッド