CSS: supports() 静的メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

構文

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

引数

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

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

2 つ目の構文は 1 つの引数を取り、@supports の条件と照合します。

supportCondition: 文字列で、チェックする条件が入ります。

返値

ブラウザーがそのルールに対応しているのであれば 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 (-webkit-transform-style: preserve)",
);

// 結果は true または false

仕様書

Specification
CSS Conditional Rules Module Level 3 # ref-for-dom-css-supports

ブラウザーの互換性

BCD tables only load in the browser

構文

引数

返値

例

仕様書

ブラウザーの互換性

関連情報