漫谈@support与CSS3条件规则

好吧，好久没有聊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网站上的官方代码示例如下：

                              
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'》