[email protected]� ，相信小伙伴们对这个话题应该有所关注吧，[email protected] 的相关资料，希望小伙伴们看了有所帮助。
基于浏览器的特性检测大家应该已经很熟悉了，特别是modernizr.js推出来之后。其实w3c也出了规范，可以基于css来做一些特性检测，[email protected]，这个特性已经有两年多了，之前浏览器支持度不够，现在webkit nightly也开始支持了，也就是说safari 9会支持到，这样的话，Blink+webKit+gecko都支持了，只剩下IE浏览器不支持了，嗯，这样更方便对IE差异化处理了。
[email protected]，它只支持对CSS属性的检测，其它HTML5 api以及webP等技术的检测还是需要JS来完成。用法：
@supports就像media query一样简单：
CSS Code复制内容到剪贴板 @supports(prop:value){}@supports也允许你用各种复杂的组合来进行特性检测。基本用法：
CSS Code复制内容到剪贴板 @supports(display:flex){div{display:flex;}}你可以用这种方法来检测各种基本的CSS属性。not关键词
就像这样：
CSS Code复制内容到剪贴板 @supportsnot(display:flex){div{float:left;}}个人感觉有些鸡肋了，[email protected]？不过万事没有绝对，这种情况以后还是可能会有。嗯，私有前缀的话可以试试。多条件检测
CSS Code复制内容到剪贴板 @supports(display:-webkit-flex)or(display:-moz-flex)or(display:flex){} @supports(display:flex)and(-webkit-appearance:caret){}你也可以将or和and语句放在一起混用。
CSS Code复制内容到剪贴板 @supports((display:-webkit-flex)or(display:-moz-flex)or(display:flex))and(-webkit-appearance:caret){}或者更复杂的：
CSS Code复制内容到剪贴板 @supports(not((text-align-last:justify)or(-moz-text-align-last:justify)){…}JS方法
同时也可以用javascript来做类似的检测，方法也很简单：
CSS Code复制内容到剪贴板 boolValue=CSS.supports(propertyName,value);boolValue=CSS.supports(supportCondition);两种方法都可以，会返回一个bool值。比如：
CSS Code复制内容到剪贴板 result=CSS.supports("text-decoration-style","blink"); result=CSS.supports("display","flex"); 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)");用途
最大的用途是做css特性判断的时候，不用再在js（或者传统的js方法）了，用过modernizr.js的同学可能会印象很深刻，modernizr会在html标签上加上各种各样的class来区分，其它js方法也是类似的实现思路。现在可以直接用@supports来区分或者做浏览器差异化了。浏览器支持
chrome 28+ opera 12.1+ firefox22+ safari 9+
来源：爱蒂网
