您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何在CSS中使用@supports,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
基于瀏覽器的特性檢測大家應(yīng)該已經(jīng)很熟悉了,特別是modernizr.js推出來之后。其實w3c也出了規(guī)范,可以基于css來做一些特性檢測,也就是@supports,這個特性已經(jīng)有兩年多了,之前瀏覽器支持度不夠,現(xiàn)在webkit nightly也開始支持了,也就是說safari 9會支持到,這樣的話,Blink+webKit+gecko都支持了,只剩下IE瀏覽器不支持了,嗯,這樣更方便對IE差異化處理了。
但是@supports并不能完全替代JS的特性檢測方法,它只支持對CSS屬性的檢測,其它HTML5 api以及webP等技術(shù)的檢測還是需要JS來完成。
用法:
@supports就像media query一樣簡單:
CSS Code復(fù)制內(nèi)容到剪貼板
@supports(prop:value) { /* more styles */ }
@supports也允許你用各種復(fù)雜的組合來進行特性檢測。
基本用法:
CSS Code復(fù)制內(nèi)容到剪貼板
@supports (display: flex) { div { display: flex; } }
你可以用這種方法來檢測各種基本的CSS屬性。
not關(guān)鍵詞
就像這樣:
CSS Code復(fù)制內(nèi)容到剪貼板
@supports not (display: flex) { div { float: left; } /* alternative styles */ }
個人感覺有些雞肋了,支持@supports的瀏覽器會不支持各種CSS屬性么?不過萬事沒有絕對,這種情況以后還是可能會有。嗯,私有前綴的話可以試試。
多條件檢測
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語句放在一起混用。
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方法
同時也可以用javascript來做類似的檢測,方法也很簡單:
CSS Code復(fù)制內(nèi)容到剪貼板
boolValue = CSS.supports(propertyName, value); boolValue = CSS.supports(supportCondition);
兩種方法都可以,會返回一個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特性判斷的時候,不用再在js(或者傳統(tǒng)的js方法)了,用過modernizr.js的同學(xué)可能會印象很深刻,modernizr會在html標簽上加上各種各樣的class來區(qū)分,其它js方法也是類似的實現(xiàn)思路?,F(xiàn)在可以直接用@supports來區(qū)分或者做瀏覽器差異化了。
瀏覽器支持
chrome 28+
opera 12.1+
firefox22+
safari 9+
看完上述內(nèi)容,你們對如何在CSS中使用@supports有進一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。