使用CSS的@supports标记来检测浏览器的兼容情况

前端  /  管理员 发布于 7年前   268

CSS @supports标记在CSS代码里跟@media查询语句的语法相似：

CSS Code复制内容到剪贴板

1. @supports(prop:value) {   
2.  /* 各种样式 */  
3. }  

CSS @supports允许程序员用多种不同的方法来探测当前浏览器是否支持某项CSS样式特征。

 

基本属性检测
你可以执行对基本属性和属性值的检测：

CSS Code复制内容到剪贴板

1. @supports (display: flex) {   
2.  div { display: flex; }   
3. }  

这是@supports标记最基本的用法。

 

not关键字
@supports标记可以和‘not’关键字组合，用来应对不支持的情况：

CSS Code复制内容到剪贴板

1. @supports not (display: flex) {   
2.  div { float: left; } /* 替换样式 */  
3. }  

 

多检测及条件检测

CSS Code复制内容到剪贴板

1. /* or */  
2. @supports (display: -webkit-flex) or   
3.           (display: -moz-flex) or   
4.           (display: flex) {   
5.   
6.     /* use styles here */  
7. }   
8.   
9. /* and */  
10. @supports (display: flex) and (-webkit-appearance: caret) {   
11.   
12.  /* something crazy here */  
13. }   
14.   
15. /* and and or */  
16. @supports ((display: -webkit-flex) or   
17.           (display: -moz-flex) or   
18.           (display: flex)) and (-webkit-appearance: caret) {   
19.   
20.     /* use styles here */  
21. }  

 

Javascript CSS.supports()
在Javascript中通过使用window.CSS.supports方法来对CSS @supports进行检测，规范中提供了两个方法，一个方法可以接收两个参数boolValue = CSS.supports(propertyName, value);另一个可以接收一个字符串（A DOMString containing the condition to check），boolValue = CSS.supports(supportCondition);具体使用看下例：

JavaScript Code复制内容到剪贴板

1. //测试环境，Chrome:34.0.1847.131 m   
2. var res01 = CSS.supports("text-decoration-style", "blink");   
3. //Outputs: false   
4. console.log(res01);   
5.   
6. var res02 = CSS.supports("display", "flex");   
7. //Outputs: true   
8. console.log(res02);   
9.   
10. var res03 = CSS.supports("( transform-origin: 5% 5% )");   
11. //Outputs: false   
12. console.log(res03);   
13.   
14. var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   
15.                       "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   
16. //Outputs: false   
17. console.log(res04);  

@supports的使用场景

大多数情况，@supports是用来支持老式浏览器，并在有可能的情况下，利用现代浏览器的新特征来提高用户体验。@supports的一个最重要的使用场景是页面布局。很多现代浏览器都提供了对flexbox网页布局的支持，在这种还有很多浏览器不支持的情况下，你的代码可以写成这样：

CSS Code复制内容到剪贴板

1. section {   
2.  float: left;   
3. }   
4.   
5. @supports (display: -webkit-flex) or   
6.           (display: -moz-flex) or   
7.           (display: flex) {   
8.   
9.     section {   
10.       display: -webkit-flex;   
11.       display: -moz-flex;   
12.      display: flex;   
13.      float: none;   
14.     }   
15. }  

相信随着程序员对这种新的@supports功能的使用和体验，更多的更好的使用场景会不断的出现。