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

前言

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

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

基本使用

@support的基本語法與@media十分相似

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

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

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

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

條件語句中的組合條件檢測

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

布爾操作符

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

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

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

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

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

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

組合條件檢測

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

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

CSS.supports

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

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

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

兼容性

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

參考

• @support
• CSS.support

總結(jié)

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