必须用@supports检测完整合法的color-mix()声明，fallback颜色须写在@supports外且顺序在前；因浏览器不识别color-mix特性名会直接忽略规则，仅@supports(color:color-mix(in srgb,red 50%,blue 50%))或@supports(color:oklch(0% 0 0))有效。
不能直接检测 color-mix() 是否支持，必须用 @supports 检测一个完整、合法的 color-mix() 声明，且 fallback 颜色必须写在 @supports 外部、顺序在前。
为什么 @supports (color-mix) 会失效
浏览器不认识 color-mix 这个特性名，整个 @supports 规则会被跳过（不是返回 false，是直接忽略）。实测中 Safari 16.3 及更早、Firefox 111 及更早都会这样处理。你写的规则根本不会执行，连降级逻辑都进不去。
-
@supports (color-mix: ...)→ 语法非法，所有主流浏览器静默丢弃整块 CSS -
@supports (color: color-mix())→ 缺参数，解析失败，同样被跳过 -
@supports (color: color-mix(in srgb, red, blue))→ ❌ 权重缺失，声明无效，检测不成立 -
@supports (color: color-mix(in srgb, red 50%, blue 50%))→ ✅ 唯一可工作的基础检测写法
推荐检测方式：用 oklch() 替代 color-mix()
oklch() 是更底层的色彩函数，支持梯度比 color-mix() 平缓得多。Chrome 111+、Safari 16.4+、Firefox 117+ 都已启用，检测成功率高得多。
-
@supports (color: oklch(0% 0 0))→ 安全、简洁、覆盖广 - 只要
oklch()可用，color-mix(in oklch, ...)大概率也可用（仍需验证空间一致性） - 避免嵌套检测：
@supports (color: oklch(0% 0 0)) { @supports (background: color-mix(...)) { ... } }会增加解析失败风险
fallback 必须靠层叠，不能靠 @supports 内部兜底
旧浏览器遇到无法识别的 color-mix() 声明，会静默跳过整条属性，但继续解析后续同名属性。这是唯一可靠的降级路径。
- ✅ 正确顺序：
background-color: #2563eb; background-color: color-mix(in srgb, #2563eb 70%, white 30%); - ❌ 错误顺序：
background-color: color-mix(...); background-color: #2563eb;→ 旧浏览器可能连 fallback 都不读 - ⚠️ 千万别把 fallback 放进
@supports块里 —— 它只控制“谁执行新代码”，不控制“谁看到老颜色”
最容易被忽略的点：检测通过 ≠ 功能可用
@supports 只确认语法能被解析，不校验权重是否加总为 100%、颜色是否为字面量、色彩空间是否被当前浏览器真正实现。例如：
- Safari 16.4 支持
in srgb，但不支持in lch；写了in lch仍会静默失效 - Firefox 112+ 支持
color-mix()，但默认按srgb-linear混合，和 Chrome/Safari 的srgb行为不一致 -
color-mix(in srgb, var(--primary) 60%, #fff 40%)在任何浏览器都不生效 ——var()不被接受，但@supports检测照样通过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
