@supports是能力断言工具而非兼容开关，必须将降级样式写在块外部，否则老浏览器会白屏；常见失效原因包括括号缺空格、只写属性名、值非法或未实现，且IE11完全不支持该规则。
@supports 不是“兼容开关”，而是能力断言工具；它只在浏览器支持某声明对时才应用块内样式，不支持时整块被跳过——所以降级样式必须写在@supports块外部，否则老浏览器直接白屏。
为什么@supports (display: grid)写了却没生效
常见失效不是因为浏览器不支持，而是语法或上下文错误导致整块被解析器丢弃：
- 括号紧贴关键字：
@supports(display: grid)❌（缺空格），必须是@supports (display: grid)✅ - 只写属性名：
@supports (display)❌（缺值），@supports检测的是「声明对」，不是属性是否存在 - 值非法或未实现：
@supports (inset: 0)在 Safari 15.4 之前不识别，整块静默跳过，不会 fallback - 混用前缀：
@supports (-webkit-backdrop-filter: blur(1px))大部分引擎不认，应统一用标准名backdrop-filter
怎样组织样式才能真正渐进增强
核心原则：HTML 裸跑可用，CSS 分层交付，@supports只负责局部增强，不接管基础结构：
- 先写基础布局：
.card { display: flex; flex-wrap: wrap; }（IE10+ 可用） - 再用
@supports覆盖增强：@supports (display: grid) and (gap: 1rem) { .card { display: grid; gap: 1rem; } }（Chrome 85+/Safari 16.4+） - 避免用
@supports not做降级主逻辑——IE11 根本不解析该规则，整条被忽略 - 检测 subgrid 必须用
@supports (grid-template-columns: subgrid)，不能靠display: grid推断（Chrome 116 支持 grid 却不支持 subgrid）
在 SCSS 中怎么安全使用@supports
SCSS 编译器不执行运行时检测，@supports块必须出现在最终 CSS 的顶层位置，不能嵌套在选择器内：
立即学习“前端免费学习笔记（深入）”；
- 禁止写
@mixin grid-layout { @supports (display: grid) { display: grid; } }—— 编译后变成.card { @supports (display: grid) { ... } }，浏览器直接忽略 - 正确做法：把现代样式单独抽成
_card-modern.scss，开头就是@supports (display: grid) { ... }，再@import到主样式表中，且紧贴基础样式下方 - 多条件组合建议抽变量：
$supports-grid-gap: "(display: grid) and (gap: 1rem)"; @supports #{$supports-grid-gap} { ... } - 别在
@supports块里写通用重置（如* { box-sizing: border-box }），它不会生效
最容易被忽略的兼容性断层点
很多团队以为加了 @supports 就万事大吉，但实际部署时三个隐性断层常导致线上故障：
- IE11 完全不支持
@supports语法本身，整条规则被跳过——如果基础样式只藏在@supports外部、又没配 float/inline-block 等老方案，页面在 IE 里就彻底失联 - Safari 15.4 之前不支持
aspect-ratio和inset，写进去整块失效，且无任何警告 - 检测自定义属性要用
@supports (--css: variables)，不是@supports (color: var(--c))—— 后者是值计算，不是特性支持判断
