CSS.supports()

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

语法

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

参数

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

propertyName
一个DOMString类型的参数,是需要检查的是否支持的属性.
value
一个DOMString类型参数,是上述属性(propertyName)的某个特定属性值.

第二种写法是传入一个特性查询(Feature Query)语句来匹配当前支持情况,请务必参考CSS/@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

规范

规范 状态 备注
CSS Conditional Rules Module Level 3
CSS.supports()
Candidate Recommendation 首次定义。

浏览器兼容性

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!

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 未实现 (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)'),作为一种解决方案。

参见

文档标签和贡献者

 此页面的贡献者: ElliottZheng, jnlong, caoweiju, xgqfrms-GitHub
 最后编辑者: ElliottZheng,