@supports 是检测「声明对」是否被支持的 css 规则块，非选择器；常见失效原因包括括号缺空格、只写属性名、值非法或未实现，且 and/or/not 运算符空格与括号必须规范，不可 @import 或操作 dom，ie11 完全不支持该规则。
@supports 不是选择器，它是个 CSS 规则块，用来包裹现代样式；真正起作用的是它检测的「声明对」是否被浏览器支持——写错一个空格或值，整块就被丢弃，连降级都失效。
为什么 @supports (display: grid) 经常不生效
看似语法对，但实际没进块，大概率是这三类问题：
- 括号紧贴关键字：
@supports(display: grid)❌（缺空格），必须写成@supports (display: grid)✅ - 只写属性名：
@supports (display)❌（缺值），@supports检测的是「声明对」，不是属性本身 - 值非法或未实现：
@supports (inset: 0)在 Safari 15.4 之前完全不识别，整块被跳过，不会 fallback 到其他逻辑
如何安全组合 and/or/not 条件
逻辑运算符看着灵活，但空格、括号稍错，结果就完全相反：
-
and和or必须前后加空格：@supports (display: grid) and (gap: 1rem)✅，@supports (display: grid)and(gap: 1rem)❌ -
not单独用不用括号：@supports not (user-select: none)✅；但组合时必须包住：@supports (display: grid) and not (container-type: inline)✅ - 避免多层嵌套：
@supports ((display: grid) or (display: flex)) and (inset: 0)可读性差，拆成两个独立块更稳妥
哪些写法在 @supports 块里绝对不能做
它不是 JS 运行时环境，而是 CSS 解析器同步执行的声明式规则：
- 不能
@import：CSS 规范禁止在@supports块中使用@import，会报解析错误 - 不能操作 HTML 元素：
link[rel="stylesheet"] { }这类选择器在@supports内无效，CSS 无法修改<link>标签属性 - 不能写伪类检测以外的选择器逻辑：比如
@supports selector(:has(*))只能用于覆盖，不可依赖；真要兼容:has()，得配合 JS 打标如[data-has-loaded] .container:has(> .item)
IE11 和旧 Safari 的断层点最容易被忽略
IE11 完全不支持 @supports 语法本身，整条规则会被忽略——这意味着你写的降级样式如果只藏在 @supports 外部、又没配 float/inline-block 等老方案，页面在 IE 里就彻底失联。Safari 旧版存在解析与条件判断双重断层，比如 @supports (aspect-ratio: 1/1) 在 Safari 15.4+ 才支持，之前版本直接跳过整块，连带里面所有样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
