2019年2月7日 星期四

CSS 判斷是否支援某種屬性 @supports

CSS3 雖然陸續被大多數的瀏覽器支援,但也還是有持續在發展新的語法,或是如果有需要支援舊版瀏覽器如 ie 的話,可以使用這個來判斷是否支援某種屬性才去讀取這段內容。

用法跟 @media 類似,都先用 @supports 開頭,這是判斷瀏覽器是否支援 display:grid 的寫法
@supports (display: grid) {
  div {
    display: grid;
  }
}

如果寫成這樣
@supports (display) {
  div {
    display: grid;
  }
}

則代表只要瀏覽器可以認得出 display 這個屬性,就可以讀取裡面的內容,但由於 display 存在很久了,若要瀏覽器判斷是否支援的話則用 display:grid 會比較好

反之若要判斷不支援的話,可以參考以下寫法
@supports not (display: grid) {
  div {
    float: right;
  }
}

此外也可以用 AND 跟 OR 把好幾個判斷式連接在一起做比較複雜的判斷。

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...