@supports 是现代浏览器的增强通道而非降级开关；必须在外层写 fallback 样式（如 .card { display: flex; }），再用 @supports (display: grid) { .card { display: grid; } } 增强，否则旧浏览器无样式可渲染。
@supports 不是降级开关，而是现代浏览器的增强通道；不写外层 fallback，旧浏览器就什么也看不到。
必须把降级样式写在 @supports 外部
CSS 是从上到下解析的。IE11、Safari ≤16.3 遇到 @supports 直接跳过整块，不报错也不执行——但它们仍会读取外面的规则。如果只把 .card { display: grid; } 塞进 @supports 里，而没在外层写 .card { display: flex; }，老用户看到的就是未定义布局。
- ✅ 正确顺序：
.card { display: flex; }→ 再写@supports (display: grid) { .card { display: grid; } } - ❌ 错误顺序：把
@supports块放前面，fallback 放后面；部分 Chromium 111 之前版本会忽略后续同名属性 - ⚠️ 权重必须一致：别用
.legacy .card做降级，否则老浏览器因权重更高反而优先应用，导致现代样式被覆盖
@supports (display: grid) 为什么没生效
不是语法错，而是浏览器压根没进那个块。常见失效点集中在空格、值合法性、上下文依赖三处：
-
@supports(display: grid)❌ 缺少空格，整条被丢弃；必须写成@supports (display: grid)✅ -
@supports (grid-template-columns: subgrid)✅ 检测 subgrid；@supports (display: grid)❌ 不能推断 subgrid 支持 -
@supports (gap: 1rem)❌ 单独检测无意义；gap 依赖容器为flex或grid，应和 display 一起判断 - Safari 15.4 之前完全不识别
inset、aspect-ratio等声明，整块静默跳过
检测 color、selector 等易错特性要写对声明对
@supports 检测的是「该声明能否被当前上下文合法接受」，不是「浏览器是否渲染出效果」：
立即学习“前端免费学习笔记（深入）”；
- 颜色空间检测必须带合法值：
@supports (color: oklch(0% 0 0))✅；@supports (color: oklab(0 0 0))❌（2026 年中主流仍返回 false） - 伪类存在性检测优先用
@supports selector(:has(*))✅；@supports selector(:focus-visible)在 Safari 16.3 及更早版本无效 - 变量使用能力检测：
@supports (color: var(--c))❌ 不可靠；应改用 JS 的window.CSS.supports('color', 'var(--c)')✅ -
@supports块内禁止@import，也禁止写link[rel="stylesheet"]这类选择器
JS 层检测比 CSS 层更可控，但不能替代外层 fallback
当需要精确控制（比如动态注入 class、做 SSR 兜底），window.CSS.supports() 是更稳的选择：
- 先判
typeof CSS === 'undefined' || !CSS.supports，为真则走全量降级（如注入no-cssvars类） -
window.CSS.supports('margin-inline-start', '1rem')比@supports (margin-inline-start: 1rem)更准，尤其在 Safari ≤15.6 - 避免用
document.styleSheets[0].insertRule()动态插入@supports块——多数浏览器会忽略 - 真正安全的做法是 JS 切换 class：
document.documentElement.classList.add('supports-grid')，再写.supports-grid .card { display: grid; }
最常被忽略的一点：@supports 的价值不在“加新功能”，而在“确保基础流可用、增强部分可被干净剥离”。它从来不是兼容性开关，只是现代浏览器里一道可控的增强门。漏掉外层 fallback，等于把门锁死在了门外。
