如何在CSS中使用@supports

介绍

今天就跟大家聊聊有关如何在CSS中使用@supports,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

基于浏览器的特性检测大家应该已经很熟悉了,特别是modernizr。js推出来之后。其实w3c也出了规范，可以基于css来做一些特性检测，也就是@supports，这个特性已经有两年多了，之前浏览器支持度不够，现在webkit nightly也开始支持了，也就是说safari 9会支持到，这样的话，Blink+webKit+gecko都支持了，只剩下IE浏览器不支持了，嗯，这样更方便对IE差异化处理了。

但是@supports并不能完全替代JS的特性检测方法，它只支持对CSS属性的检测，其它HTML5 api以及webP等技术的检测还是需要JS来完成。
用法：

@supports就像media query一样简单：

  1. @supports(prop:value) {  }  

@supports也允许你用各种复杂的组合来进行特性检测。
基本用法：

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

你可以用这种方法来检测各种基本的CSS属性。
not关键词

就像这样：

  1. @supports not (: flex) { div { : ; }  }  

个人感觉有些鸡肋了，支持@supports的浏览器会不支持各种CSS属性么？不过万事没有绝对，这种情况以后还是可能会有。嗯，私有前缀的话可以试试。
多条件检测

  1. @supports (: -webkit-flex) or (: -moz-flex) or (: flex) {  }   

  2.   

  3.  @supports (: flex) and (-webkit-appearance: caret) {  }  

你也可以将or和and语句放在一起混用。

  1. @supports ((: -webkit-flex) or (: -moz-flex) or (: flex)) and (-webkit-appearance: caret) {  }  

或者更复杂的：

  1. @supports ( not ((-last:) or (-moz--last:) ){ …  }  

JS方法

同时也可以用javascript来做类似的检测，方法也很简单：

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

两种方法都可以，会返回一个bool值。比如：

  1. result = CSS.supports(, );   ,,

    <李>

    result =, CSS.supports (,),,,,,

    <李>

    result =, CSS.supports ();,,,,

    <李>

    result =, CSS.supports (,),,,,,

<强>用途

最大的用途是做css特性判断的时候,不用再在js(或者传统的js方法)了,用过modernizr.js的同学可能会印象很深刻,modernizr会在html标签上加上各种各样的类来区分,其它js方法也是类似的实现思路。现在可以直接用@supports来区分或者做浏览器差异化了。
浏览器支持

,,,chrome 28 +
,,,opera 12.1 +
,,,firefox22 +
,,,safari 9 +

看完上述内容,你们对如何在CSS中使用@supports有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。

如何在CSS中使用@supports