CSS3 @supports

CSS3的屬性在當前並沒有被所有的瀏覽器所支援。

為了在各個瀏覽器實現大致一樣的效果，會首先判斷瀏覽器是否支援此屬性。

如果支援那麼就應用此屬性，否則就通過其他方式模擬實現。

當前通常使用Modernizr庫來實現判斷功能，不過CSS3也提供了@supports實現判斷。

不過好像此屬性當前應用並不是太多，因為不少瀏覽器本身就不支援此屬性，那如何實現判斷。

隨著軟硬體水平的提高，瀏覽器都支援此屬性，那麼新加入的CSS屬性的支援度就可以利用它判斷。

語法結構：

[CSS] 純文字檢視 複製程式碼
@supports <條件規則> {
  /* code */
}

瀏覽器相容性：

（1）.IE瀏覽器不支援此屬性。

（2）.谷歌瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.opera瀏覽器支援此屬性。

（5）.safria瀏覽器支援此屬性。

（6）.Edge瀏覽器支援此屬性。

下面就通過簡單的程式碼片段介紹一下它的使用方式。

程式碼例項:

[CSS] 純文字檢視 複製程式碼
@supports (display:flex) {
  section { display: flex }
  /* 其他code*/
}

上面的程式碼判斷是否支援display:flex，如果支援就執行大括號中的程式碼。

關於display:flex可以參閱display:flex彈性佈局一章節。

@supports還可以與邏輯運算子配合使用，下面分別做一下介紹:

一.not邏輯運算子：

它表示如果不支援後面的條件：

[CSS] 純文字檢視 複製程式碼
@supports not (display: flex){
  #container div{float:left;}
}

表示如果不支援display: flex，那麼就應用大括號中的樣式。

二.and邏輯與運算子：

表示要同時滿足指定條件：

[CSS] 純文字檢視 複製程式碼
@supports (column-width: 20rem) and (column-span: all) {
  div { column-width: 20rem }    
  div h2 { column-span: all }
  div h2 + p { margin-top: 0; }
  /*其他程式碼*/
}

瀏覽器必須要同時滿足支援column-width: 20rem和column-span: all才會執行大括號中的程式碼。

column-width可以參閱CSS3 column-width一章節。

column-span可以參閱CSS3 column-span一章節。

三.or邏輯或運算子:

表示只要滿足其中一個條件就可以:

[CSS] 純文字檢視 複製程式碼
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
  section {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    /*其他程式碼*/
  }         
}

只要滿足條件之一，那麼就執行大括號中的程式碼。

四.邏輯與和邏輯或混用:

在@supports中or和and混用時，必須使用括號()來區分其優先順序：

[CSS] 純文字檢視 複製程式碼
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
  /*code*/
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
  /*code*/
}