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

浏览器兼容性

BCD tables only load in the browser

参见