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 機能に対応しているかどうかを論理値で返します。
構文
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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
supports() static method | ||||||||||||
Parentheses for single-argument version are optional. |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
@supports
アットルールは、同様の機能を宣言的な方法で行うことができます。CSSSupportsRule
は CSSOM のクラスで、@supports
アットルールを操作することができます。