fallback必须写在@supports外部且顺序靠前，因为CSS从上到下解析，旧浏览器遇到不支持的值或规则会跳过，而早期Chromium等引擎若先见@supports内同名属性，会静默丢弃后续fallback声明。
@supports 不是降级开关，而是增强开关——现代样式必须写在块内，fallback 必须裸写在外部且顺序靠前，否则旧浏览器可能一条样式都拿不到。
为什么 fallback 必须写在 @supports 外部
CSS 是从上到下解析的。遇到无法识别的值（如 oklch(60% 0.2 240)）或整条不支持的规则（如 @supports 块本身），浏览器会跳过该行或该块，继续读取后续声明。但部分早期 Chromium（Chrome 111 之前）和 WebView 有个关键行为：如果同名属性（如 background-color）先出现在被忽略的 @supports 块里，后面 fallback 行会被静默丢弃。
- ✅ 正确顺序：
background-color: #4a5568;→@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); } - ❌ 错误顺序：把
@supports块写在前面，fallback 写在后面 → iOS 12.4 WebView、某些 Android 8.0 系统可能最终渲染为透明背景 - ⚠️ IE11 会整块忽略
@supports，但它能正常读取外部的display: flex或float: left—— 前提是这些语法它认识
@supports (display: grid) 检测为何常不准
单写 @supports (display: grid) 容易漏掉 Safari 10.1 这类“半支持”环境：它认 display: grid，但对 gap、subgrid 或 grid-template-areas 渲染异常。检测必须带一个高频、断层明显的配套声明。
- ✅ 推荐写法：
@supports (display: grid) and (grid-template-columns: 1fr)—— 能筛掉 IE10/11 和 Safari ≤9.1 - ❌ 避免：
@supports (grid: 1fr / 1fr)——grid不是标准可检测属性，所有浏览器都返回 false - ❌ 少用
@supports not (display: grid)—— Safari ≤12.1 对not解析不稳定，空格或换行会导致整条规则失效 - ⚠️ 注意：检测不能替代测试。即使通过
@supports，仍需在真机上验证grid-gap在 Safari 15.6 是否真生效
颜色函数降级的三个硬约束
用 @supports 处理 oklch()、color-mix() 等新颜色函数时，语法错一点就全崩。
立即学习“前端免费学习笔记（深入）”；
- ✅ 检测色彩空间：
@supports (color: oklch(0% 0 0))或@supports (color: lch(0% 0 0))—— 必须是完整、合法的值，不能省略参数 - ✅ 检测
color-mix()：@supports (color-mix(in srgb, black, white))—— 必须包含颜色空间、至少两个颜色、逗号分隔 - ❌ 禁止 fallback 用新格式：
background-color: oklch(60% 0.2 240)不能当 fallback，老浏览器直接跳过整条声明 - ✅ fallback 只能用：
rgb()、rgba()、#rrggbb、命名色；带 alpha 必须用rgba(74, 111, 165, 0.9)，不能用#4a5568e6（IE11 不认）
JS 的 CSS.supports() 和 CSS 的 @supports 不是一回事
CSS.supports() 是 JS 运行时方法，只接受两个参数（属性名 + 值），不支持 and/or/not 组合，也不能嵌套调用。它和 CSS 层的 @supports 规则是平行关系，不是上下级。
- ✅ 合理用法：
CSS.supports('margin-inline-start', '1rem')—— 测逻辑属性兼容性，比查 UA 更准 - ✅ 兜底方案：用
document.documentElement.classList.add('supports-grid')，再写.supports-grid .container { display: grid; } - ❌ 错误用法：
CSS.supports(CSS.supports('display', 'grid'), 'gap', '1rem')—— 语法错误，JS 不允许嵌套调用 - ⚠️ SSR 场景注意：服务端无法执行
CSS.supports()，若首屏依赖它注入 class，水合 mismatch 风险极高
真正容易被忽略的是：@supports 块里的样式一旦生效，就会参与层叠计算；而 fallback 样式若选择器权重更低（比如用 .card vs .legacy .card），旧浏览器反而可能被现代规则意外覆盖。降级不是加代码，是做减法——删掉所有冗余权重，让 fallback 在任何环境下都稳稳落地。
