判斷是否可以使用某個 css 屬性與使用- @supports

CSS3 雖然陸續被主流的瀏覽器支援，但也還是有持續在發展新的語法，或是如果有需要支援舊版瀏覽器，比如一些沒辦法使用 flex 排版的瀏覽器，可以使用這個來判斷是否支援某種屬性才去讀取這段內容，不支援的話就讀取舊的寫法。

@supports  (condition){
  /* specific rules */
}

那個 condition 就是用來判斷是否支援某個屬性的，比如我們要讓支援 flex 的瀏覽器才去讀取 flex 的屬性：

@supports (display) {
  div {
    display: grid;
  }
}

相對的如果不支援 flex，可以用 not 來判斷使用舊的寫法：

@supports not (display: grid) {
  div {
    float: right;
  }
}

另外還能夠用 and 跟 or 來增加一些判斷，如：

(display: table-cell) and (display: list-item)
( transform-style: preserve ) or ( -moz-transform-style: preserve )

不過萬惡 ie 不支援這個屬性，看一下各家瀏覽器的支援狀況。