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!

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

参见

文档标签和贡献者

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