文章主要給大家介紹了關于CSS中@support實現漸進式網頁設計的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用CSS具有一定的參考學習價值

前言

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

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

基本使用

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

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

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

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

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

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

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

布爾操作符

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

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

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

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

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

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

組合條件檢測

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

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

CSS.supports

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

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

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

兼容性

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

參考

• @support
• CSS.support

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值