原文
好吧，好久沒有聊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()的調用方式有如下兩種：
// 方法1
if (CSS.supports("display", "flex")) {
// do something relying on flexbox
}
// 方法2
if (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 》