如何在 CSS 中使用特性查詢
特性查詢是 CSS 的一個近期且相對較不為人知的功能,但它得到了良好的支持。
我們可以使用它來檢查瀏覽器是否支援某個特性,方法是使用 @supports
關鍵字。
舉個例子,這在目前的時候,檢查瀏覽器是否支援 CSS Grid 特別有用,可以這樣做:
@supports (display: grid) {
/* 應用這個 CSS */
}
我們檢查瀏覽器是否支援 display
屬性的 grid
值。
我們可以使用 @supports
來檢查任何 CSS 屬性,並檢查任何值。
我們還可以使用邏輯運算符 and
、or
和 not
來構建複雜的特性查詢。
以下示例檢查瀏覽器是否同時支援 CSS Grid 和 Flexbox:
@supports (display: grid) and (display: flex) {
/* 應用這個 CSS */
}