CSS.supports()

CSS.supports() メソッドは、ブラウザーが指定された CSS 機能に対応しているかどうかを示す Boolean 値を返します。

構文

CSS.supports(propertyName, value);
CSS.supports(supportCondition);

引数

引数の組み合わせが二種類あります。一つ目は、対応しているかどうかをテストするプロパティと値を指定することができます。

propertyName
DOMString で、チェックする CSS プロパティの名前が入ります。
value
DOMString で、チェックする CSS プロパティの値が入ります。

二つ目の構文は一つの引数を取り、 @supports の条件に一致させます。

supportCondition
DOMString で、チェックする条件が入ります。

返値

ブラウザーが規則に対応しているのであれば true、そうでなければ false。

例

result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display: flex");
result = CSS.supports("(--foo: red)");

result = CSS.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or
                       (-o-transform-style: preserve) or (-webkit-transform-style: preserve)`);

// result is true or false

仕様書

仕様書 状態 備考
CSS Conditional Rules Module Level 3
CSS: supports() の定義		 勧告候補 初回定義

ブラウザーの対応

BCD tables only load in the browser

関連情報

  • @supports @-規則は、同様の機能を宣言的な方法で行うことができます。
  • CSSSupportsRule は CSSOM のクラスで、 @supports @-規則を操作することができます。