@supports 检测的是渲染引擎对完整 CSS 声明对的支持，非浏览器类型；括号空格、属性值合法性及旧版兼容性（如 Safari 15.4 前不支持 inset）均会导致静默失效。
@supports 不是“检测浏览器”，而是检测当前渲染引擎是否支持某个完整的 CSS 声明对；写错括号、空格或值，整块样式会被静默丢弃——连降级都失效。
为什么 @supports (display: grid) 经常不生效
看似语法正确，但实际没进块，大概率是这三类问题：
- 括号紧贴关键字：
@supports(display: grid)❌（缺空格），必须写成@supports (display: grid)✅ - 只写属性名：
@supports (display)❌（缺值），@supports检测的是「声明对」，不是属性本身 - 值非法或未实现：
@supports (inset: 0)在 Safari 15.4 之前完全不识别，整块被跳过，不会 fallback 到其他逻辑
@supports 块里能写什么、不能写什么
它是个纯 CSS 解析时执行的声明式规则，不是 JS 运行时环境：
- ✅ 可嵌套：
@supports块内可再写@media或另一个@supports - ✅ 可用逻辑运算符：
@supports (display: grid) and (gap: 1rem)，注意and前后必须有空格 - ❌ 不能
@import：CSS 规范禁止在@supports块中使用@import，会报解析错误 - ❌ 不能操作 HTML 元素：
link[rel="stylesheet"] { }这类选择器在@supports内无效，CSS 无法修改<link>标签属性
真正安全的渐进增强结构
核心不是“加新功能”，而是确保基础流可用、增强部分可被干净剥离：
立即学习“前端免费学习笔记（深入）”；
- 降级样式必须写在
@supports外部，比如先定义.card { display: flex; }，再用@supports (display: grid) { .card { display: grid; } } - 检测
subgrid必须用@supports (grid-template-columns: subgrid)，不能靠display: grid推断——Chrome 116 支持 grid 却不支持 subgrid，会错触发 - 检测自定义属性要用
@supports (--css: variables)，不是@supports (color: var(--c))，后者是值计算，不是特性支持判断 - IE11 完全不支持
@supports语法本身，整条规则会被忽略——这意味着你写的降级样式如果只藏在@supports外部、又没配float/inline-block等老方案，页面在 IE 里就彻底失联
最易被忽略的点是：@supports 的条件判断发生在 CSS 解析阶段，不等同于运行时能力；它不检查父容器是否满足布局前提（如 container-type 是否已声明），也不保证动画、滚动等交互行为真能触发。写完别只看 DevTools 手动加样式是否有效——那只是绕过了声明上下文校验。
