@supports 语法错误会导致整块样式被浏览器静默忽略。常见错误包括括号空格缺失、声明对不完整、旧版浏览器不支持特性、未在外部提供基础样式、逻辑运算符空格或括号错误、以及误用代理检测替代真实特性检测。
@supports 语法写错会导致整块样式被丢弃
浏览器遇到语法错误的 @supports 规则，会直接跳过整个块，连带里面所有样式——不是部分失效，是彻底静默忽略。常见错误有三类：
• @supports(display: grid) 缺空格，必须写成 @supports (display: grid)
• @supports (display) 只写属性名，缺值，@supports 检测的是「声明对」，不是属性本身
• @supports (inset: 0) 在 Safari 15.4 之前不识别，整块被跳过，不会 fallback 到其他逻辑
降级样式必须写在 @supports 外部
这是渐进增强的地基，不是可选项。如果只把基础布局藏在 @supports 块里，IE11 会直接忽略整条规则，页面彻底失联。
• 先写裸跑可用的样式：.card { display: flex; }
• 再用 @supports 包裹增强部分：@supports (display: grid) { .card { display: grid; } }
• 不支持 grid 的浏览器自动回退到 flex，支持的才升级
多条件组合时 and/or/not 必须带空格且括号严谨
逻辑运算符不是 JS，优先级和空格缺失会让结果完全相反。
• @supports (display: grid) and (gap: 1rem) ✅（and 前后都有空格）
• @supports (display: grid)and(gap: 1rem) ❌（解析失败，整块丢弃）
• @supports not (user-select: none) ✅（not 单独用不加括号）
• @supports (display: grid) and not (container-type: inline) ✅（组合时 not 必须包在括号里）
• 避免嵌套太深：@supports ((display: grid) or (display: flex)) and (inset: 0) 可读性差，拆成两个独立块更稳妥
检测 subgrid 或自定义属性不能靠推断
很多特性无法用基础属性“代理”检测，写错就等于没检测。
• @supports (display: grid) 不能代表 subgrid 可用——Chrome 116 支持 grid 却不支持 subgrid，必须用 @supports (grid-template-columns: subgrid)
• @supports (color: var(--c)) 是值计算，不是特性支持判断，应写 @supports (--css: variables)
• @supports (grid-template-areas: "a b") 语法非法，grid-template-areas 是模板语法，不可检测，只能用 @supports (display: grid) 代理
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的不是“怎么写新功能”，而是“旧环境是否还能裸跑”。@supports 本身不加载资源、不执行逻辑，它只是 CSS 解析器的一次静态判断——这意味着你写的降级方案，必须在它生效前就已存在，且不依赖任何现代特性。
