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() の定義		 勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
supportsChrome 完全対応 61
完全対応 61
部分対応 28
補足
補足 Version 60 or older didn't support parentheses-less one-argument version.
Edge 部分対応 12
補足
部分対応 12
補足
補足 Edge doesn't support parentheses-less one-argument version.
Firefox 完全対応 55
完全対応 55
部分対応 22
補足
補足 Version 54 or older didn't support parentheses-less one-argument version.
部分対応 20
無効
無効 From version 20: this feature is behind the layout.css.supports-rule.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 12.1Safari 完全対応 10WebView Android 完全対応 61
完全対応 61
部分対応 37
補足
補足 Version 60 or older didn't support parentheses-less one-argument version.
Chrome Android 完全対応 61
完全対応 61
部分対応 28
補足
補足 Version 60 or older didn't support parentheses-less one-argument version.
Firefox Android 完全対応 55
完全対応 55
部分対応 22
補足
補足 Version 54 or older didn't support parentheses-less one-argument version.
部分対応 20
無効
無効 From version 20: this feature is behind the layout.css.supports-rule.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1Safari iOS 完全対応 ありSamsung Internet Android 完全対応 8.0
完全対応 8.0
部分対応 1.5
補足
補足 Samsung Internet 8.0 or older didn't support parentheses-less one-argument version.

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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