CSS @supports at-rule() 怎麼用？Firefox 157 Beta 的新功能查詢

用 at-rule() 檢查規則名稱#

@supports at-rule(@scope) 在條件成立時套用區塊內的 CSS：

1
/* 舊瀏覽器先使用這條一般 selector fallback。 */
2
:where(.product-card) .price {
3
  color: #334155;
4
}
5

6
/* 支援 @scope 的瀏覽器才套用有範圍邊界的版本。 */
7
@supports at-rule(@scope) {
8
  @scope (.product-card) {
9
    .price {
10
      color: var(--product-price-color, #1d4ed8);
11
    }
12
  }
13
}

at-rule(@scope) 檢查的是瀏覽器是否接受 @scope 這個 at-rule，不是在檢查 color 或 var()。W3C 的 CSS Conditional Rules Level 5 草案將它寫成 at-rule( <at-keyword-token> )；@scope 的 at-sign 是參數的一部分，草案語法也不代表各瀏覽器已實作。

將必要樣式放在條件區塊外，支援查詢的新瀏覽器再使用 scoped 版本。這樣，即使瀏覽器尚未支援 at-rule()，baseline 仍存在。若新 at-rule 是版面成立的必要條件，還要準備真正可用的 fallback，不能只把整個元件塞進條件區塊。

和既有 @supports 條件有什麼不同#

@supports (display: grid) 測試 declaration；@supports selector(:has(*)) 測試 selector 語法；@supports at-rule(@scope) 則測試 at-rule 是否受支援。三者回答不同問題，不能用一個已支援的 CSS property 推論另一條規則也可用。

這裡只需要在 @supports 中做條件分流，不需要用 JavaScript 判斷後再切換 class。如果你的 fallback 需要支援的是屬性值而非 at-rule，可參考 CSS margin-trim 的 @supports fallback 寫法；若要比較的是 selector 支援，MDN 的 CSS feature queries 有對應語法。

先把 Firefox 157 Beta 當成版本線索#

MDN 在 2026 年 9 月 28 日仍將 Firefox 157 release notes 標成 Beta，並提醒內容尚在編輯中；頁面預告這個版本將於 9 月 29 日推出。本文沒有在 Firefox Beta 或穩定版瀏覽器執行範例，因此不推論 Chrome、Safari 或其他 Firefox 版本的支援狀態。

上線前用專案實際支援的瀏覽器檢查條件是否成立，並確認條件不成立時的 baseline 仍可完成主要任務。CSS 功能查詢是 progressive enhancement 的分流點，不是瀏覽器相容性測試的替代品。其他 fallback 範例可參考用 CSS @supports 為新屬性保留版面。

參考資料：

MDN：Firefox 157 release notes for developers (Beta)

MDN：@supports CSS at-rule

W3C：CSS Conditional Rules Module Level 5