如何在 CSS 中使用特性查詢

特性查詢是 CSS 的一個近期且相對較不為人知的功能,但它得到了良好的支持

我們可以使用它來檢查瀏覽器是否支援某個特性,方法是使用 @supports 關鍵字。

舉個例子,這在目前的時候,檢查瀏覽器是否支援 CSS Grid 特別有用,可以這樣做:

@supports (display: grid) {
  /* 應用這個 CSS */
}

我們檢查瀏覽器是否支援 display 屬性的 grid 值。

我們可以使用 @supports 來檢查任何 CSS 屬性,並檢查任何值。

我們還可以使用邏輯運算符 andornot 來構建複雜的特性查詢。

以下示例檢查瀏覽器是否同時支援 CSS GridFlexbox

@supports (display: grid) and (display: flex) {
  /* 應用這個 CSS */
}