@support与CSS3条件规则

原文  http://blog.csdn.net/hfahe/article/details/8619480

好吧，好久没有聊CSS3了，今天我们来讲讲CSS3的最新特性。

         在Chrome最新的动态里，添加了对 CSS.supports() 方法的支持，而许多关注浏览器发展的朋友也可能已经了解到Firefox和Opera开始支持@supports规则。CSS.supports()和 @supports 看起来非常相似，它们之间有什么关联，它们的前世今生究竟是怎么一回事呢？

         为了应付浏览器分裂的CSS3支持情况、支持渐进增强式设计，我们之前经常采用 Modernizr 这个库来判断浏览器对于HTML5、CSS3的支持情况，以便有针对性的设计网站界面和功能。

         也许很快我们不再需要 Modernizr ，因为浏览器本身将会告诉我们这些信息。

         @supports的源起

         @supports其实来源于W3C的这份工作草案：《 CSS Conditional Rules Module Level 3 》，即CSS的条件规则模块：允许我们在不同条件下来定义CSS样式。众所周知，CSS2.1支持@media条件规则，可以根据不同的媒介来加载不同的样式表，这个功能虽然出发点很好，但是使用起来并不方便，因为开发者需要写多个样式表来对应不同的媒介，非常麻烦。这份新的规范扩展了@media规则，允许在一个CSS样式文件里根据不同的媒介来定义样式。同时此规范增加了另外一个群众呼声很高的条件规则，即@supports。在浏览器CSS新特性越来越常见、更新越来越迅速，网站功能越来越前卫的今天，它 允许我们可以根据浏览器对 CSS 特性的支持情况来定义不同的样式 。这对我们来说非常重要。

         W3C网站上的官方代码示例如下：

@supports ( display: flexbox ) {  body, #navigation, #content { display: flexbox; }  #navigation { background: blue; color: white; }  #article { background: white; color: black; }}

         上面的规则表示，当浏览器支持弹性盒子布局时，括号里的所有样式将会生效。而且@supports还支持简单的逻辑操作符，例如“not”，“and”、“or”等。例如，一个可能的规则如下（请注意我们是如何来为各浏览器提供兼容的）：

@supports not ( box-shadow: 2px 2px 2px black ) or          ( -moz-box-shadow: 2px 2px 2px black ) or          ( -webkit-box-shadow: 2px 2px 2px black ) or          ( -o-box-shadow: 2px 2px 2px black ) {  .outline {    color: white;    -moz-box-shadow: 2px 2px 2px black;    -webkit-box-shadow: 2px 2px 2px black;    -o-box-shadow: 2px 2px 2px black;    box-shadow: 2px 2px 2px black; /* unprefixed last */  }}

         这篇规范里还提到了一个DOM API，即CSS.supports()，它是作为@supports的另一种形式出现的，供JavaScript调用来获得CSS属性的支持情况。顺便提一句，window.CSS这个命名空间将会包含多个CSS相关的常用方法（可以想想作为开发者来说，你需要哪些方法？）。

         它的定义如下，我们可以传入CSS属性的key和value或者一串字符来得到结果。

interface CSS {  static boolean supports(DOMString property, DOMString value);  static boolean supports(DOMString conditionText);}

         浏览器支持情况

         规范总是要落地的，我们来看看浏览器的支持情况。

         Chrome已经在2月份最新的27版本里提供了对CSS.supports()的支持，详见 这里 。

         Firefox在去年8月份 支持了@supports ，在12月份 支持了CSS.supports ()。对照W3C标准，在Firefox的示例里，CSS.supports()的调用方式有如下两种：

// 方法1if (CSS.supports("display", "flex")) {  // do something relying on flexbox}// 方法2if (CSS.supports("(display: flex) and (display: grid)")) {  // do something relying on flexbox and grid layout}

         而Opera在去年11月就 添加了对@supports的支持 ，顺带还提供了一个3D Transform的渐进增强式演示供大家体验。 这里 是使用@supports的方案，而 这里 是使用 Modernizr 的方案，感兴趣的朋友可以尝试对比一下。

Opera提供的@supports演示

         主流浏览器已经或者正在支持@supports，这对我们来说是好消息。

         使用@supports的好处

         我们为什么要用@supports，它比起 Modernizr 来说有什么优势呢？

         1、 速度

         @supports采用浏览器本地方法实现、速度更快、效率更高。

         2、效率

         避免引入JavaScript库，让开发更简单快捷；另外因为不需要加载JavaScript库，能减少HTTP请求量和服务器流量。

         3、  功能

         @supports 支持多种逻辑操作符，可以很好的满足各种需求。

         方案的选择

         那我们该何时使用 Modernizr 呢？

         1、 浏览器不支持CSS.supports()和 @ supports 时；

         2、  需要用它来判断 HTML5 的支持情况时（其实你也可以自己手写这部分代码）。

         @suppprts in Action

         实际上， Modernizr 自身也在计划未来使用 @supports 来 替代自身的检测方法 。

         所以，现在你就应该立即使用 @ supports ，正确的步骤是先检测是否支持 CSS.supports()和 @ supports ，如果不支持，再加载 Modernizr ，这样你的网站从始至终会有一个很好的兼容性。下面是实现代码：

if ( !(window.supportsCSS || (window.CSS && window.CSS.supports) )) load_modernizr();

         我预计@supports将会在网站中得到广泛的使用，@supports in Action now！

         原创文章，转载请注明来自 蒋宇捷的博客 （http://blog.csdn.net/hfahe）

         参考文章：

         《 CSS Conditional Rules Module Level 3 》

         《 why use supports instead of modernizr 》

         《 Use Tomorrow's Web Standards Today WithCSS '@Supports' 》