CSS: supports() 静的メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年9月以降、すべてのブラウザーで利用可能です。

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

構文

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

引数

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

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

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

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

返値

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

例

次の例では、result はブラウザーが指定された CSS 機能に対応しているかどうかを示す論理値です。

result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display: flex");
result = CSS.supports("(--foo: red)");
result = CSS.supports("selector(:has(a))");
result = CSS.supports(
  "(transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve)",
);

その他の例や構文機能については、@supports アットルールを参照してください。