CSS @support 實現漸進式網頁設計

特性查詢賦予了咱們使用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