CSS.supports() - Web API 接口参考 编辑

CSS.supports() 静态方法返回一个Boolean值，用来校验浏览器是否支持一个给定的CSS特性。

语法

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

参数

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

propertyName

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

value

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

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

supportCondition

一个包含了检查条件的DOMString。

实例

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	Status	Comment
CSS Conditional Rules Module Level 3 CSS.supports()	Candidate Recommendation	Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	28.0 [2]	(Yes)	22 (22) [1]	未实现	12.1	9 [2]

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.4	(Yes)	22.0 (22) [1]	未实现	12.1	9

[1]只有在用户设置layout.css.supports-rule.enabled=true时，Gecko 20和21才会支持这一特性。

[2] 在Chrome ≤ 51 (bug 584683) 和 Safari (bug 154669)中, 即使支持自定义属性，CSS.supports('--foo', 'red') 也会返回false。 您可以使用CSS.supports('(--foo: red)')，作为一种解决方案。

参见

• @supports at-rule 允许以声明的方式，使用相同的功能。
• CSSSupportsRule CSSOM 类允许在规则中操作@supports。