@supports 仅检测特性支持与否，不自动降级；降级样式须写在外部且优先级不低，基础值前置静态，组合检测需谨慎括号，旧环境需手动验证兼容性。
@supports 本身不自动降级，它只做检测；真正实现“自动降级”的，是你写的样式顺序和逻辑组合方式。
为什么 @supports 里写降级样式是错的
常见错误是把兜底样式（比如 float 或 inline-block）塞进 @supports 块里，以为“不支持就执行里面”。但实际行为是：只有浏览器声明支持某特性时，@supports 块内样式才被解析和应用；不支持时整块被忽略——旧浏览器根本看不到它。
- 降级样式必须写在
@supports外部，且优先级不能低于块内规则（否则新浏览器会覆盖它） - 选择器权重要一致，比如都用
.grid-list，别外面用.grid-list，里面用.grid-list.grid - IE11 完全忽略
@supports，所以外部样式必须是它能理解的语法（不能含gap、place-items等）
window.CSS.supports() 的安全调用方式
不是所有环境都暴露 window.CSS.supports，尤其老版 Opera 和某些 WebView。直接调用会报 TypeError。
- 必须先判断是否存在：
typeof window.CSS?.supports === 'function' - 推荐封装一层：
const supports = (prop, val) => window.CSS?.supports?.(prop, val) || false - 避免用
window.supportsCSS—— 这个 API 已废弃，2026 年主流引擎都不再支持
and/or/not 组合检测的真实约束
组合逻辑不是“写出来就能用”，它受浏览器解析能力限制。例如 Safari 12.1 会把 @supports (display: grid) or (-ms-display: grid) 当成语法错误直接丢弃整条规则。
-
and最稳妥，但要求所有条件都被识别（哪怕只是忽略）；or容易触发解析失败 - 混合使用必须加括号：
@supports ((display: grid) or (display: flex)) and (gap: 1rem) - 检测
clamp()不能写@supports (clamp: 0)—— Safari 12.1 会误判为 true，正确写法是@supports (font-size: clamp(0px, 0px, 0px))
基础值必须前置且静态
这是最容易被忽略的执行顺序陷阱。如果把 font-size: 1.5rem 写在 @supports 块后面，新浏览器会因层叠优先级而保留 clamp()，旧浏览器则因整块被忽略而无样式可读。
- 基础值（fallback）永远写在最前面，且必须是静态单位：
1.5rem、24px，不能是calc(1rem + 0.5vw) -
@supports块内只放增强样式，且所有属性都要带单位（clamp(1rem, 2vw, 1.5rem)，不能省略rem/vw） - 若目标环境明确不支持（如微信 X5 内核、IE11），跳过
@supports，改用媒体查询 +calc()手动模拟clamp()
真正难的不是写对 @supports 语法，而是确保 fallback 样式在所有旧环境里都能被解析、生效、不被覆盖——这需要你手动验证每一条外部样式是否被 IE11、Android 4.4 WebView、Safari 10 等目标浏览器真正识别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
