建站
咨询
售后
建站咨询
今天就跟大家聊聊有关如何在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一样简单：
CSS Code复制内容到剪贴板
@supports(prop:value) { /* more styles */ }
@supports也允许你用各种复杂的组合来进行特性检测。
基本用法：
CSS Code复制内容到剪贴板
@supports (display: flex) { div { display: flex; } }
你可以用这种方法来检测各种基本的CSS属性。
not关键词
就像这样：
CSS Code复制内容到剪贴板
@supports not (display: flex) { div { float: left; } /* alternative styles */ }
个人感觉有些鸡肋了，支持@supports的浏览器会不支持各种CSS属性么？不过万事没有绝对，这种情况以后还是可能会有。嗯，私有前缀的话可以试试。
多条件检测
CSS Code复制内容到剪贴板
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /* use styles here */ }
/* and */ @supports (display: flex) and (-webkit-appearance: caret) { /* something crazy here */ }
你也可以将or和and语句放在一起混用。
CSS Code复制内容到剪贴板
@supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /* use styles here */ }
或者更复杂的：
CSS Code复制内容到剪贴板
@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ … /* specific CSS applied to simulate 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+
看完上述内容，你们对如何在CSS中使用@supports有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
分享标题：如何在CSS中使用@supports
文章分享：http://scgulin.cn/article/pseose.html
