CSS: supports() 静的メソッド
CSS.supports()
メソッドは、ブラウザーが指定された CSS 機能に対応しているかどうかを論理値で返します。
構文
js
CSS.supports(propertyName, value)
CSS.supports(supportCondition)
引数
引数の組み合わせが 2 種類あります。1 つ目は、対応しているかどうかをテストするプロパティと値を指定することができます。
propertyName
-
文字列で、チェックする CSS プロパティの名前が入ります。
value
-
文字列で、チェックする CSS プロパティの値が入ります。
2 つ目の構文は 1 つの引数を取り、@supports
の条件と照合します。
supportCondition
-
文字列で、チェックする条件が入ります。
返値
ブラウザーがそのルールに対応しているのであれば true
、そうでなければ false
です。
例
js
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
関連情報
@supports
アットルールは、同様の機能を宣言的な方法で行うことができます。CSSSupportsRule
は CSSOM のクラスで、@supports
アットルールを操作することができます。