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

# 概述 `@supports` 允许基于浏览器对某 CSS 特性的支持与否来启用或回退样式，是渐进增强与兼容策略的重要工具。结合 `@layer` 与低特异性规则可提升可维护性。 # 语法与示例 ```css @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` 渐进增强一致。