CSS怎么检测浏览器的兼容情况

这篇文章主要讲解了“CSS怎么检测浏览器的兼容情况”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么检测浏览器的兼容情况”吧！

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. }  

感谢各位的阅读，以上就是“CSS怎么检测浏览器的兼容情况”的内容了，经过本文的学习后，相信大家对CSS怎么检测浏览器的兼容情况这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！