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怎么检测浏览器的兼容情况这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


网站标题:CSS怎么检测浏览器的兼容情况
分享URL:http://scyanting.com/article/jhicdj.html