@supports 是现代浏览器的增强通道而非兼容性开关；ie 和 safari ≤16.3 完全忽略它，因此降级样式必须裸写在外层，否则老用户将看到空白或错乱。
@supports 不是兼容性“开关”，而是现代浏览器的增强通道；IE 和 Safari ≤16.3 完全忽略它，所以降级样式必须裸写在外层，否则老用户看到的是空白或错乱。
为什么 @supports (display: grid) 写对了却没生效
常见错误不是语法写错，而是浏览器压根没执行到它——IE 所有版本、Safari ≤16.3 遇到 @supports 直接跳过整块规则，不报错也不回退。这意味着：
- 降级布局（如
float或inline-block）必须写在@supports块外部，且选择器权重一致 -
@supports (display: grid)不能替代.grid { display: flex; }，后者才是 IE 真正能执行的 fallback - DevTools 里看到灰色带
invalid的属性，说明该声明被解析但不支持；而整条@supports块消失，大概率是浏览器根本不认这个语法
@supports 里检测 color、aspect-ratio 等值要写全且合法
它检测的是「声明能否被当前上下文合法接受」，不是「浏览器是否渲染出效果」。例如：
-
@supports (color: oklch(0% 0 0))✅ 可靠（2026 年主流已支持） -
@supports (color: oklab(0 0 0))❌ 多数浏览器仍返回false，别当真 -
@supports (aspect-ratio: 1/1)在 Safari 15.4+ 才有效，旧版会静默丢弃整块 -
@supports (color-scheme: dark)必须放在:root下检测，写在.theme-btn里永远不成立
and/or/not 组合容易踩空格和括号坑
逻辑运算符大小写、空格、括号位置稍错，整条规则就失效。浏览器不会提示，只会跳过：
-
@supports (display: grid) and (gap: 1rem)✅ 正确 -
@supports (display: grid)and(gap: 1rem)❌ 缺空格，整块被丢弃 -
@supports not (user-select: none)✅ 正确（not后不加括号） -
@supports (not (user-select: none))❌ Safari ≤16.3 会崩溃解析 -
@supports selector(:has(*))是目前最安全的伪类存在性兜底，比:has(> img)更稳
JS 层用 window.CSS.supports() 更可控，但得先兜底
CSS 层做不到的事，JS 可以补上，但前提是环境本身支持该 API：
- 第一层必须判
typeof CSS === 'undefined' || !CSS.supports，为真就进全量降级（比如注入no-cssvars类） -
window.CSS.supports('margin-inline-start', '1rem')比@supports (margin-inline-start: 1rem)更准，尤其在 Safari ≤15.6 - 检测变量要用
window.CSS.supports('color', 'var(--x)')，别信@supports (--x: red)，Safari ≤13.1 会误判 - 动态注入样式时，现代版和 fallback 版必须用完全相同的选择器（如都用
.Card-root），否则老浏览器因权重差异漏掉降级
真正难的不是写出一个能跑的 @supports，而是确保它失效时，页面依然可用——那部分裸写的 fallback 样式，才是用户实际看到的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
