CSS 特性查詢

如何在 CSS 中使用特性查詢

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

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

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

1
2
3

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

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

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

我們還可以使用邏輯運算符 and、or 和 not 來構建複雜的特性查詢。

以下示例檢查瀏覽器是否同時支援 CSS Grid 和 Flexbox：

1
2
3

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

tags: [“CSS”, “特性查詢”, “CSS Grid”, “Flexbox”]