詳解CSS中@supports的用法

前端觀察 發(fā)布時(shí)間：2015-07-14 17:15:10 作者：神飛

這篇文章主要介紹了詳解CSS中@supports的用法,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下

基于瀏覽器的特性檢測(cè)大家應(yīng)該已經(jīng)很熟悉了，特別是modernizr.js推出來(lái)之后。其實(shí)w3c也出了規(guī)范，可以基于css來(lái)做一些特性檢測(cè)，也就是@supports，這個(gè)特性已經(jīng)有兩年多了，之前瀏覽器支持度不夠，現(xiàn)在webkit nightly也開(kāi)始支持了，也就是說(shuō)safari 9會(huì)支持到，這樣的話，Blink+webKit+gecko都支持了，只剩下IE瀏覽器不支持了，嗯，這樣更方便對(duì)IE差異化處理了。

但是@supports并不能完全替代JS的特性檢測(cè)方法，它只支持對(duì)CSS屬性的檢測(cè)，其它HTML5 api以及webP等技術(shù)的檢測(cè)還是需要JS來(lái)完成。
用法：

@supports就像media query一樣簡(jiǎn)單：

CSS Code復(fù)制內(nèi)容到剪貼板

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

@supports也允許你用各種復(fù)雜的組合來(lái)進(jìn)行特性檢測(cè)。
基本用法：

CSS Code復(fù)制內(nèi)容到剪貼板

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

你可以用這種方法來(lái)檢測(cè)各種基本的CSS屬性。
not關(guān)鍵詞

就像這樣：

CSS Code復(fù)制內(nèi)容到剪貼板

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

個(gè)人感覺(jué)有些雞肋了，支持@supports的瀏覽器會(huì)不支持各種CSS屬性么？不過(guò)萬(wàn)事沒(méi)有絕對(duì)，這種情況以后還是可能會(huì)有。嗯，私有前綴的話可以試試。
多條件檢測(cè)

CSS Code復(fù)制內(nèi)容到剪貼板

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

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

或者更復(fù)雜的：

CSS Code復(fù)制內(nèi)容到剪貼板

@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ … /* specific CSS applied to simulate text-align-last:justify */ }

JS方法

同時(shí)也可以用javascript來(lái)做類似的檢測(cè)，方法也很簡(jiǎn)單：

CSS Code復(fù)制內(nèi)容到剪貼板

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

兩種方法都可以，會(huì)返回一個(gè)bool值。比如：

CSS Code復(fù)制內(nèi)容到剪貼板

result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display", "flex");
result = CSS.supports("( transform-origin: 5% 5% )");
result = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );

用途

最大的用途是做css特性判斷的時(shí)候，不用再在js（或者傳統(tǒng)的js方法）了，用過(guò)modernizr.js的同學(xué)可能會(huì)印象很深刻，modernizr會(huì)在html標(biāo)簽上加上各種各樣的class來(lái)區(qū)分，其它js方法也是類似的實(shí)現(xiàn)思路?，F(xiàn)在可以直接用@supports來(lái)區(qū)分或者做瀏覽器差異化了。
瀏覽器支持

    chrome 28+
    opera 12.1+
    firefox22+
    safari 9+