概述

@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 渐进增强一致。