---

title: "CSS @supports 特性查询：渐进增强与回退策略"

keywords:

• @supports
• 特性查询
• 渐进增强
• 回退
• 兼容性
• 性能

description: "解释 CSS 特性查询（@supports）的语法与用法，在新特性启用与旧环境回退中的工程实践与性能注意，并附权威参考。"

categories:

• 文章资讯
• 编程技术

---

概述

@supports 允许基于浏览器对某 CSS 特性的支持与否来启用或回退样式，是渐进增强与兼容策略的重要工具。结合 @layer 与低特异性规则可提升可维护性。

语法与示例

@supports (container-type: inline-size) {
  .card { container-type: inline-size; }
}
@supports not (container-type: inline-size) {
  .card { display: grid; }
}

工程建议

• 仅围绕需要的特性写最小查询块；避免过多嵌套导致复杂级联。
• 与 @layer/:where() 协作管理级联与特异性，减少覆盖冲突。

参考与验证

• ［参考1］MDN 中文：@supports 特性查询语法与示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports
• ［参考2］web.dev：渐进增强与特性检测策略与案例：https://web.dev/articles/progressive-web-apps

关键词校验

关键词与 @supports 渐进增强一致。