文章主要給大家介紹了關(guān)于CSS中@support實(shí)現(xiàn)漸進(jìn)式網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用CSS具有一定的參考學(xué)習(xí)價(jià)值

前言

特性查詢賦予了我們使用CSS檢測(cè)瀏覽器是否支持某個(gè)css特性的能力。我們可以使用該功能在瀏覽器支持最新的CSS特性時(shí)，使用新的語(yǔ)法來(lái)編寫(xiě)我們的樣式，同時(shí)對(duì)于不支持的瀏覽器進(jìn)行優(yōu)雅降級(jí)。

CSS的設(shè)計(jì)本身就是支持優(yōu)雅降級(jí)的。對(duì)于瀏覽器不支持的CSS語(yǔ)法，在瀏覽器解析時(shí)會(huì)被忽略。因此，我們只要在編寫(xiě)樣式時(shí)先滿足低版本瀏覽器的視覺(jué)完整性，再針對(duì)支持高級(jí)特性的瀏覽器進(jìn)行漸進(jìn)式樣式設(shè)計(jì)即可。但有時(shí)候這并不能滿足我們的需求：當(dāng)我們需要一系列的樣式組合來(lái)實(shí)現(xiàn)我們的視覺(jué)效果時(shí)，如果瀏覽器對(duì)我們使用的一系列樣式中的某一個(gè)CSS特性不支持，有可能出現(xiàn)樣式錯(cuò)亂的情況。

基本使用

@support的基本語(yǔ)法與@media十分相似

.selector {
/* property supported in old browsers  */
}
@support (property: value) {
/* property supported in new browsers */
}

特性查詢語(yǔ)句由@support關(guān)鍵字開(kāi)頭，加上一個(gè)條件語(yǔ)句和包含在一個(gè)大括號(hào)內(nèi)的CSS規(guī)則組成。我們可以現(xiàn)在特性查詢語(yǔ)句外寫(xiě)舊瀏覽器支持的樣式，然后再在特性查詢語(yǔ)句中寫(xiě)瀏覽器支持某些新特性時(shí)的新樣式。

div {
  display: flex;
}
@support (display: grid) {
  div {
    display: grid;
  }
}

在該示例中，我們先用flex布局實(shí)現(xiàn)舊瀏覽器支持的布局樣式，然后更進(jìn)一步我們可以在支持display: grid;屬性的新瀏覽器中使用grid布局快樂(lè)的玩耍了。

條件語(yǔ)句中的組合條件檢測(cè)

在特性查詢語(yǔ)句的支持條件中我們有時(shí)候可能需要同時(shí)查詢?yōu)g覽器對(duì)多個(gè)CSS屬性的支持情況來(lái)覺(jué)得如何組織我們的漸進(jìn)式樣式。這種時(shí)候我們可以用and、or、not這三種布爾操作來(lái)組合我們的查詢條件。

布爾操作符

and操作符可以對(duì)兩個(gè)表達(dá)式的結(jié)果進(jìn)行邏輯與操作，即只有當(dāng)兩個(gè)表達(dá)式都為真的時(shí)候，則生成的表達(dá)式也為真，否則為假。多個(gè)邏輯與表達(dá)式可以直接并列成一排，表示所有表達(dá)式都為真的時(shí)候，整體的求值才為真。

@support (display: table-cell) and (display: list-item) and (display:run-in) {
/* some style here */
}

or操作符可以對(duì)兩個(gè)表達(dá)式的結(jié)果進(jìn)行邏輯或操作，即只要兩個(gè)表達(dá)式有一個(gè)為真的時(shí)候，則生成的表達(dá)式也為真，否則為假。多個(gè)邏輯或表達(dá)式也可以直接并列成一排，表示所有表達(dá)式只有有一項(xiàng)為真的時(shí)候，整體的求值就為真。

@support (-webkit-mask-image: -webkit-linear-gradient(right,transparent,#000)) or (mask-image: linear-gradient(-90deg,transparent,#000)) {
  /* some style here */
}

not操作符一般放在表達(dá)式的前面表示對(duì)原表達(dá)式的否定，即求值為真的表達(dá)式加上not操作符后表示假，求值為假的表達(dá)式加上not后表示真。

@support not (display: flex) {
  div {
    float: left;
  }
}

組合條件檢測(cè)

布爾操作符也可以組合起來(lái)使用，但必須用括號(hào)來(lái)顯示的隔離不用的布爾操作符，以避免優(yōu)先級(jí)造成的混亂

@support (display: flexbox) and ( not (display: inline-grid) ) {
/* some style here */
}

CSS.supports

在JavaScript中有一個(gè)與特性查詢語(yǔ)句相對(duì)應(yīng)的API，window.CSS.supports。這個(gè)方法接受一個(gè)與CSS特性查詢語(yǔ)句的查詢條件類似的字符串作為參數(shù)，或者接受兩個(gè)參數(shù)，一個(gè)代表屬性名，一個(gè)代表屬性值。

CSS.support('(display: flex) and(not(display: line-grid)');
CSS.support('display', 'grid');

這個(gè)API可以和CSS的特性查詢配合使用，當(dāng)我們的瀏覽器支持某些更高級(jí)特性的時(shí)候，設(shè)計(jì)一些漸進(jìn)式功能。

兼容性

每個(gè)CSS特性使用最后都離不開(kāi)談兼容性。特性查詢是在2011年就已經(jīng)發(fā)布的草案，多年來(lái)支持程度已經(jīng)比較可觀了，除了IE系列全軍覆沒(méi)之外，其他主流瀏覽器都能夠很好的支持。

參考

• @support
• CSS.support

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值