如何在CSS中使用@supports

今天就跟大家聊聊有關如何在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復制內容到剪貼板

1. @supports(prop:value) { /* more styles */ }  

@supports也允許你用各種復雜的組合來進行特性檢測。
基本用法：

CSS Code復制內容到剪貼板

1. @supports (display: flex) { div { display: flex; } }  

你可以用這種方法來檢測各種基本的CSS屬性。
not關鍵詞

就像這樣：

CSS Code復制內容到剪貼板

1. @supports not (display: flex) { div { float: left; } /* alternative styles */ }  

個人感覺有些雞肋了，支持@supports的瀏覽器會不支持各種CSS屬性么？不過萬事沒有絕對，這種情況以后還是可能會有。嗯，私有前綴的話可以試試。
多條件檢測

CSS Code復制內容到剪貼板

1. @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /* use styles here */ }   

2.   

3. /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /* something crazy here */ }  

你也可以將or和and語句放在一起混用。

CSS Code復制內容到剪貼板

1. @supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /* use styles here */ }  

或者更復雜的：

CSS Code復制內容到剪貼板

1. @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復制內容到剪貼板

1. boolValue = CSS.supports(propertyName, value); boolValue = CSS.supports(supportCondition);  

兩種方法都可以，會返回一個bool值。比如：

CSS Code復制內容到剪貼板

1. result = CSS.supports("text-decoration-style", "blink");     

2. result = CSS.supports("display", "flex");     

3. result = CSS.supports("( transform-origin: 5% 5% )");     

4. 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有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。