@supports 检测的是css声明对而非浏览器类型，常见失效原因包括括号缺空格、只写属性名、值非法或未实现；块内支持嵌套和逻辑运算符，禁止@import和操作html元素；渐进增强需先写降级样式，再用@supports覆盖；ie11完全不支持该规则，safari旧版存在解析与条件判断双重断层。
@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))，后者是值计算，不是特性支持判断 - 伪类如
:has()要配合 JS 打标：[data-has-loaded] .container:has(> .item)是兼容写法，@supports selector(:has(*))仅作覆盖，不可依赖
容易被忽略的兼容性断层点
IE11 完全不支持 @supports 语法本身，整条规则会被忽略——这意味着你写的降级样式如果只藏在 @supports 外部、又没配 float/inline-block 等老方案，页面在 IE 里就彻底失联。更麻烦的是，Safari 15.4 之前不支持 aspect-ratio 和 inset，但它们的 @supports 检测语句本身能解析，只是条件为 false；而 Safari 14 甚至无法解析 @supports (selector(:has(*)))，直接丢弃整块。这些断层不在同一维度，没法靠一个检测兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
