@supports 是现代浏览器的增强通道而非兼容性开关；IE 和 Safari ≤16.3 直接跳过整块规则，降级样式必须裸写在外层且权重一致，否则老用户看到空白或错乱。
@supports 不是兼容性开关，而是现代浏览器的增强通道；IE 和 Safari ≤16.3 遇到它直接跳过整块规则，不报错也不回退。降级样式必须裸写在外层，否则老用户看到的是空白或错乱。
为什么 @supports 块写在前面会导致 fallback 失效
CSS 是从上到下解析的。浏览器遇到无法识别的值（比如 oklch(60% 0.2 240)）会跳过整条声明，继续读下一条；但如果 @supports 块写在前面，而 fallback 写在后面，部分早期 Chromium（Chrome 111 之前）和某些 WebView 会忽略后续所有同名属性声明。
- ✅ 正确顺序：
background-color: #4a5568;→ 再写@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); } - ❌ 错误顺序：把
@supports块放在前面，fallback 放在后面——旧环境可能一条都不生效 - ⚠️ 注意：
@supports块本身在 IE11 中会被整块忽略，但 fallback 行仍能被读取，前提是它独立存在、未被包裹
@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)❌ 缺空格，整块被丢弃
selector() 检测必须用 JS 运行时判断
@supports 只能检测属性和值（如 @supports (display: grid)），**不能检测选择器是否被支持**。写 @supports selector(:has(a)) 在 Chrome 110+ 才有效，IE、Safari ≤15.3、Firefox ≤108 都不识别该语法，连兜底逻辑都进不去。
- 真正可行的方式是运行时 JS 检测：
const supportsHas = CSS.supports('selector(:has(a))'); - 注意 IE11 不支持
CSS.supports()，需先判typeof CSS === 'undefined' || !CSS.supports，为真就进全量降级（比如注入no-cssvars类） - 检测必须在 DOM ready 后执行，否则
document.createElement创建的测试元素可能未挂载，导致误判 - 不要在单个组件里既用
@supports写 CSS 规则，又用 JS 注入降级样式——加载顺序不确定，容易覆盖
最容易被忽略的一点：@supports 检测的是“能否安全启用”，不是“要不要禁用”。它不提供否定语义的兜底能力，尤其对 :has() 这类选择器，连检测都得靠 JS，更别说自动翻译了。
