漫談@supports與CSS3條件規則 · Web前端-關注HTML5與CSS3

? ? ? ?好吧，好久沒有聊CSS3了，今天我們來講講CSS3的最新特性。 ? ? ? ?在Chrome最新的動態里，添加了對CSS.supports()方法的支持，而許多關注瀏覽器發展的朋友也可能已經了解到Firefox和Opera開始支持@supports規則。CSS.supports()和@supports看起來非常相似，它們之間有什么關聯，它們的前世今生究竟是怎么一回事呢？ ? ? ? ?為了應付瀏覽器分裂的CSS3支持情況、支持漸進增強式設計，我們之前經常采用[Modernizr](http://modernizr.com/)這個庫來判斷瀏覽器對于HTML5、CSS3的支持情況，以便有針對性的設計網站界面和功能。 ? ? ? ?也許很快我們不再需要[Modernizr](http://modernizr.com/)，因為瀏覽器本身將會告訴我們這些信息。 ? ? ? ?**@supports的源起** ? ? ? ?@supports其實來源于W3C的這份工作草案：《[CSS Conditional Rules Module Level 3](http://www.w3.org/TR/css3-conditional/#at-supports)》，即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 ( 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()的支持，詳見[這里](https://bugs.webkit.org/show_bug.cgi?id=100324)。 ? ? ? ?Firefox在去年8月份[支持了@supports](http://mcc.id.au/blog/2012/08/supports)，在12月份[支持了CSS.supports](http://mcc.id.au/blog/2012/12/css-supports-api%20CSS.support)()。對照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的支持](http://dev.opera.com/articles/view/native-css-feature-detection-via-the-supports-rule/)，順帶還提供了一個3D Transform的漸進增強式演示供大家體驗。[這里](http://dev.opera.com/static/articles/2012/supports/example-with-supports/two-faced-cheek-supports.html)是使用@supports的方案，而[這里](http://dev.opera.com/static/articles/2012/supports/example-with-modernizr/two-faced-cheek-modernizr.html)是使用[Modernizr](http://modernizr.com/)的方案，感興趣的朋友可以嘗試對比一下。 ![](https://box.kancloud.cn/2016-08-09_57a9aa58c6dcd.jpg) Opera提供的@supports演示 ? ? ? ?主流瀏覽器已經或者正在支持@supports，這對我們來說是好消息。 ? ? ? ?**使用@supports的好處** ? ? ? ?我們為什么要用@supports，它比起[Modernizr](http://modernizr.com/)來說有什么優勢呢？** ? ? ? ?1、?速度 ? ? ? ?@supports采用瀏覽器本地方法實現、速度更快、效率更高。 ? ? ? ?2、效率 ? ? ? ?避免引入JavaScript庫，讓開發更簡單快捷；另外因為不需要加載JavaScript庫，能減少HTTP請求量和服務器流量。 ? ? ? ?3、?功能 ? ? ? ?@supports支持多種邏輯操作符，可以很好的滿足各種需求。 ? ? ? ?**方案的選擇** ? ? ? ?那我們該何時使用[Modernizr](http://modernizr.com/)呢？ ? ? ? ?1、?瀏覽器不支持CSS.supports()和@supports時； ? ? ? ?2、?需要用它來判斷HTML5的支持情況時（其實你也可以自己手寫這部分代碼）。 ? ? ? ?**@suppprts in Action** ? ? ? ?實際上，[Modernizr](http://modernizr.com/)自身也在計劃未來使用@supports來[替代自身的檢測方法](http://www.broken-links.com/2012/08/06/firefox-supports-supports-gets-my-support/#comment-72122)。 ? ? ? ?所以，現在你就應該立即使用@supports，正確的步驟是先檢測是否支持CSS.supports()和@supports，如果不支持，再加載[Modernizr](http://modernizr.com/)，這樣你的網站從始至終會有一個很好的兼容性。下面是實現代碼： ~~~ if ( !(window.supportsCSS || (window.CSS && window.CSS.supports) )) load_modernizr(); ~~~ ? ? ? ?我預計@supports將會在網站中得到廣泛的使用，@supports in Action now！ ? ? ? ?原創文章，轉載請注明來自[蔣宇捷的博客](http://blog.csdn.net/hfahe)（http://blog.csdn.net/hfahe） ? ? ? ?參考文章： ? ? ? ?《[CSS Conditional Rules Module Level 3](http://www.w3.org/TR/css3-conditional/#at-supports)》 ? ? ? ?《[why use supports instead of modernizr](http://my.opera.com/ODIN/blog/why-use-supports-instead-of-modernizr)》 ? ? ? ?《[Use Tomorrow's Web Standards Today WithCSS '@Supports'](http://www.webmonkey.com/2012/11/use-tomorrows-web-standards-today-with-css-supports/)》