關於CSS中@support實現漸進式網頁設計例項程式碼

咖啡豆豆發表於2019-10-16
CSS網頁

文章主要給大家介紹了關於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系列全軍覆沒之外，其他主流瀏覽器都能夠很好的支援。

參考

總結

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

相關文章