@supports 用于按css特性是否被引擎解析生效来分级启用样式，而非适配浏览器；它比ua判断更可靠，因直接检测声明有效性，天然忽略ie11，且需注意and/or/not的语法坑点及色彩函数的正确检测方式。
直接上结论：@supports 不是用来“适配浏览器”，而是用来“按特性分级启用样式”——它不看 Chrome 还是 Safari，只认 display: grid、aspect-ratio、color-mix() 这类具体声明是否被当前引擎解析并生效。
@supports (display: grid) 为什么比 UA 判断更可靠
- UA 字符串会骗人：Safari 声称支持
gap，但早期版本（≤15.4）在flex容器里根本无效；Chrome 声称支持color-mix()，但没写in srgb就会和 Firefox 渲染出不同灰度 - @supports 是 CSS 解析器层面的判断：只要引擎能成功 parse 并 apply 该声明，规则块就生效；失败则整块跳过，不触发 FOUC，也不影响后续样式
- 它天然忽略 IE11：IE 完全不认识
@supports语法，直接丢弃整条规则，自然 fallback 到外层样式——这反而是最干净的降级
@supports 中 and/or/not 的实际坑点
-
@supports (display: grid) and (gap: 1rem)看似合理，但多数浏览器（尤其 Safari ≤16.2）会因gap单独出现无上下文而判定为 false，即使它在 grid 里可用 - 正确做法是只检测有明确语义的组合：比如
@supports (display: grid) and (grid-template-columns: subgrid)，或拆成两个独立块 -
not要慎用：写@supports not (aspect-ratio: 16/9)没问题，但@supports not (color: oklch(50% 0.2 270))在旧 Safari 里可能因语法报错导致整条规则失效 - 多条件嵌套别贪多：
@supports ((display: flex) and (justify-content: space-evenly)) or (display: -webkit-flex)容易因空格或括号错位被整条忽略，优先用 class + JS 补充控制
检测 color-mix() 和 oklch() 这类色彩函数的正确姿势
- 别写
@supports (color: color-mix(in srgb, red, blue))：部分浏览器解析时会因函数参数报错，直接丢弃规则 - 推荐写法：
@supports (color: oklch(0% 0 0))—— oklch 是基础色空间，兼容性梯度平缓，且语法简单不易出错 - 如果必须用 color-mix()，改用背景属性检测：
@supports (background: color-mix(in srgb, red 50%, blue 50%))，因为 background 是广泛支持的接收属性 - 所有色彩函数降级必须提供前一个有效声明：
.btn { color: #3498db; }<br>@supports (color: oklch(60% 0.2 250)) { .btn { color: oklch(60% 0.2 250); } }这样旧浏览器会忽略第二行，沿用 #3498db
和媒体查询嵌套时的真实限制
-
@media screen and (min-width: 768px) { @supports (display: grid) { ... } }合法，但注意：@supports 块内不能再嵌 media 查询（CSS 规范不支持） - 更关键的是执行顺序：媒体查询先筛 viewport，@supports 再筛能力——两者不互斥，但不能指望 @supports 动态响应 viewport 变化（它只在初始解析时跑一次）
- 真实场景中，常需组合：比如深色模式下启用 backdrop-filter，就得写
@media (prefers-color-scheme: dark) {<br> .header { background: rgba(0,0,0,.8); }<br> @supports (backdrop-filter: blur(4px)) {<br> .header { backdrop-filter: blur(4px); background: rgba(0,0,0,.2); }<br> }<br>}注意 fallback 背景必须在外层 media 块里声明，否则不支持 backdrop-filter 的深色模式用户会看到透明 header
真正容易被忽略的，是 @supports 对“声明有效性”的判断粒度极细——它不关心你写了什么前缀、什么 flag，只看你写的那一行 CSS 是否能被当前渲染引擎无错误地消化。写错一个空格、漏一对括号、或者用了尚未进入标准的实验性值（如 font-optical-sizing: auto 在 Safari 16.5 之前），整块规则就静默失效。这不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
