如何为CSS的color-mix()添加兼容性回退？

color-mix()必须配合静态fallback和@supports双保险，fallback须前置且仅用#rrggbb等兼容格式，@supports应检测oklch()而非color-mix()本身，色彩空间与权重缺一不可，否则旧浏览器静默失效。

直接写 color-mix() 而不加回退，旧浏览器里颜色会静默消失或回退到继承值——不是变灰，是彻底“没颜色”。必须用静态色值 + @supports 双保险，缺一不可。

fallback 颜色必须写在 @supports 外部且顺序不能反

浏览器从上往下解析 CSS，如果 fallback 写在 @supports 块后面，部分早期 Chromium（如 Chrome 111 之前）会跳过它；写在前面才真正兜得住。

1. ✅ 正确写法：color: #3a5fa8; → 换行 → @supports (color: oklch(0% 0 0)) { color: color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%); }
2. ❌ 错误写法：把 @supports 块写在前面，后面再补 color: #3a5fa8; —— 这条 fallback 可能被忽略
3. fallback 只能用广泛支持的格式：#rrggbb、rgb()、hsl() 或命名色；不能用 oklch() 或 color-mix() 的输出作 fallback

@supports 必须检测色彩空间，不能检测 color-mix() 本身

写 @supports (color-mix: ...) 在 Safari 16.4 之前会被当语法错误整块丢弃；正确做法是检测基础色彩空间是否可用——它比混合函数更早落地、更稳定。

1. ✅ 推荐检测：@supports (color: oklch(0% 0 0)) 或 @supports (color: lch(0% 0 0))
2. ❌ 避免检测：@supports (color-mix: oklch(0% 0 0) 50%, red) —— 大部分浏览器根本不认识这个特性查询
3. 如果同时要用 oklch() 和 color-mix()，优先按 oklch 分组，在内部嵌套 color-mix() 规则，避免多层嵌套失效

混合空间必须显式声明且前后一致

color-mix() 不写 in srgb 或 in oklch 会直接解析失败，不是警告，是整条声明被跳过；而且两个输入颜色的空间必须和声明空间一致，混用 rgb() 和 oklch() 会导致静默失效。

1. ✅ 合法：color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%)
2. ❌ 非法：color-mix(in oklch, #3a5fa8 60%, white 40%) —— #3a5fa8 是 sRGB，white 是命名色，空间不匹配
3. 权重总和不必等于 100%，浏览器会自动归一化，但输入颜色必须同属一个空间；写成 red 60, blue 40（缺 %）也会被忽略

别指望它在伪类或动画里动态响应

color-mix() 只生成静态颜色值，比如 color-mix(in srgb, #007bff 30%, #fff 70%) 解析后就是 #81aef5，和手写十六进制完全等价。它不认变量、不响应 :hover、不参与 transition 插值。

1. 想实现悬停渐变？得先用 color-mix() 算出起点和终点色，再转成 hsl() 或 oklch() 格式，让 CSS 插值引擎接管
2. 不要在 background 这类复合属性里直接嵌套：background: color-mix(...) no-repeat; 会整体失效；拆成 --mixed-bg: color-mix(); background-color: var(--mixed-bg);
3. Firefox 默认仍禁用该功能（需手动开启 layout.css.color-mix.enabled），Safari 16.4+ 支持不全，Chrome/Edge 111+ 是目前唯一较稳环境

最容易被忽略的是：你写的每一个 color-mix() 都必须是「已知颜色 + 显式权重 + 明确色彩空间」三者齐全，缺一不可。它不 transition，不变量，不自动 fallback——写错一个字符，用户看到的就是空白或继承色。