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() 静态方法返回一个Boolean值,用来校验浏览器是否支持一个给定的 CSS 特性。

语法

boolValue = CSS.supports(propertyName, value);
boolValue = CSS.supports(supportCondition);

参数

有两种不同的传值形式。第一种用来检验浏览器对于一对“属性 - 属性值”的支持:

propertyName

一个包含要检查的 CSS 属性名称的DOMString

value

一个包含要检查的 CSS 属性值的DOMString

第二种语法需要一个匹配@supports条件的参数:

supportCondition

一个包含了检查条件的DOMString

实例

js
result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display", "flex");
result = CSS.supports("--foo", "red");
result = CSS.supports("(--foo: red)");
result = CSS.supports("( transform-origin: 5% 5% )");
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

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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

参见