使用特性查詢
特性查詢是條件組規則，用於測試使用者代理是否支援一個或多個 CSS 特性，例如 CSS 屬性和屬性值。特性查詢為 Web 開發者提供了一種方法，可以測試瀏覽器是否支援某個特性，然後根據測試結果提供僅在該條件下執行的 CSS。在本指南中，你將學習如何使用特性查詢實現漸進增強。
特性查詢是使用 CSS at-rule @supports（或 @import at-rules 中的 supports() 函式）建立的。
語法
CSS 特性查詢是 CSS 條件規則模組的一部分，該模組還定義了媒體查詢 @media at-rule。特性查詢的行為類似於媒體查詢。區別在於，媒體查詢是測試 Web 頁面執行環境的某些方面，而特性查詢是測試瀏覽器對 CSS 特性的支援。
特性查詢由 @supports at-rule 及其後的支援條件，或 @import at-rule 宣告中的 supports() 函式和宣告引數組成。
/* `@supports` at-rule */
@supports <support-condition> {
/* CSS rules to apply */
}
/* `supports()` function */
@import url_to_import supports(<declaration>);
例如，如果使用者代理支援 red 作為 CSS color 屬性的有效值，我們可以應用一組樣式或匯入整個樣式表
/* `@supports` at-rule */
@supports (color: red) {
/* CSS rules to apply */
}
/* `supports()` function */
@import "/css/styles.css" supports(color: red);
再舉一個例子，如果你想檢查瀏覽器是否支援 row-gap 屬性，你可以編寫以下特性查詢。在很多情況下，你使用什麼值並不重要：如果你只是想檢查瀏覽器是否支援此屬性，那麼任何有效值都可以。
<div class="box">
If your browser supports the row-gap property, the border will be dashed and
text will be red.
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 4px solid blue;
color: blue;
padding: 1em;
}
@supports (row-gap: 10px) {
.box {
border: 4px dashed darkgreen;
color: red;
}
}
如果你正在測試特定屬性的新值，屬性-值對的值部分就更重要了。所有瀏覽器都支援 color: red：這可以追溯到 CSS1。然而，CSS 中經常會向屬性新增額外的值，例如相對顏色，這些值可能不受支援。特性查詢可以測試屬性和值對，這意味著我們可以檢測對值的支援。
在上方的 color 屬性示例基礎上，我們在這裡檢查瀏覽器是否支援 color: AccentColor 宣告
/* `@supports` at-rule */
@supports (color: AccentColor) {
/* CSS rules to apply */
}
/* `supports()` function */
@import "/css/styles.css" supports(color: AccentColor);
在這些示例中，我們使用特性查詢來檢查使用者代理是否支援 CSS 屬性的特定值，將單個宣告列在括號內。你可以測試多個屬性值或不支援的情況。
測試不支援某特性
除了詢問瀏覽器是否支援某個特性外，你還可以透過新增 not 關鍵字來測試相反的情況
/* `@supports` at-rule with `not` */
@supports not (property: value) {
/* CSS rules to apply */
}
如果瀏覽器不支援 row-gap，以下示例特性查詢中的 CSS 將會執行。
<div class="box">
If your browser does not support row-gap, the content will be darkgreen with a
dashed border.
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 4px solid blue;
color: blue;
padding: 1em;
}
@supports not (row-gap: 10px) {
.box {
border: 4px dashed darkgreen;
color: darkgreen;
}
}
測試多個特性
你可能需要在特性查詢中測試多個屬性的支援情況。為此，你可以包含一個要測試的特性列表，用 and 關鍵字分隔
/* multiple feature `@supports` at-rule */
@supports (property1: value) and (property2: value) {
/* CSS rules to apply */
}
例如，如果你想要執行的 CSS 需要瀏覽器支援 CSS Shapes 和 CSS Grid，你可以建立一個規則來測試瀏覽器對這兩個特性的支援。以下規則僅在瀏覽器同時支援 shape-outside: circle() 和 display: grid 時才返回 true。
<div class="box">
If your browser supports <code>display: grid</code> and
<code>shape-outside: circle()</code>, the content will be darkgreen with a
dashed border.
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 4px solid blue;
color: blue;
padding: 1em;
}
@supports (display: grid) and (shape-outside: circle()) {
.box {
border: 4px dashed darkgreen;
color: darkgreen;
}
}
測試多個特性中的至少一個
你還可以使用 or，僅當支援一個或多個宣告時才應用 CSS
/* any feature `@supports` at-rule */
@supports (property1: value) or (property2: value) {
/* CSS rules to apply */
}
如果某個特性帶有供應商字首，這會特別有用，因為你可以測試標準屬性以及任何供應商字首。
<div class="box">
The text and border will be green if your browser supports font smoothing.
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 4px solid blue;
color: blue;
padding: 1em;
}
@supports (font-smooth: always) or (-webkit-font-smoothing: antialiased) {
.box {
border: 4px dashed darkgreen;
color: darkgreen;
}
}
其他特性查詢選項
特性查詢不限於屬性-值對。你可以在特性查詢中包含 font-tech()、font-format() 和 selector() 函式，以根據使用者代理是否支援指定的字型技術、字型格式或選擇器語法有選擇地應用 CSS。
例如，selector() 函式可以用於為支援帶供應商字首的偽元素的瀏覽器匯入樣式表
/* A `selector()` query within a `supports()` function */
@import "/css/webkitShadowStyles.css"
supports(selector(::-webkit-inner-spin-button));
示例
瀏覽器支援測試
在此示例中，我們檢查瀏覽器是否支援 AccentColor <system-color>，如果支援該顏色型別，則使用 display: none 將預設的“不支援”訊息更改為“已支援”訊息。
HTML
<p class="accentcolor">
Your browser does <span>not</span> support <code>AccentColor</code> as a color
value.
</p>
CSS
body {
font: 1.2em / 1.5 sans-serif;
}
p {
padding: 1em;
}
@supports (color: AccentColor) {
p {
color: green;
border: 2px solid;
}
span {
display: none;
}
}
@supports not (color: AccentColor) {
p {
color: red;
}
}
結果
特性查詢的侷限性
@supports 規則用於測試瀏覽器是否可以解析一個或多個屬性/值對，並因此是否聲稱支援相關特性。如果瀏覽器理解這些屬性/值對，它將返回一個肯定的響應。特性查詢會檢查宣告是否被瀏覽器認為是有效的，但不能用於檢查它是否正確支援某個特性而沒有錯誤或違反規範。特性查詢無法測試部分實現。
總結
特性查詢是漸進增強網站的有用工具。它們使你能夠為所有瀏覽器提供一個良好的解決方案，併為支援新屬性和值的瀏覽器提供一個增強的解決方案。
你不需要使用特性查詢才能開始使用新的 CSS 特性；CSS 錯誤處理意味著瀏覽器會簡單地忽略它尚不識別的 CSS。然而，特性查詢是回退宣告的有用替代方案，並且能夠一次編寫程式碼，最終在所有地方都能得到支援。