color-mix() 不能直接向后兼容 HEX，必须搭配显式 HEX 回退色和完整 @supports 检测；漏写 in、权重缺 %、混入变量或用于复合属性均导致整条声明静默失效。
color-mix() 不能直接“向后兼容 HEX”——它本身不接受 HEX 以外的动态值，且不支持 fallback 到 HEX 的语法机制。你写的每个 color-mix() 都必须搭配显式回退色和 @supports 检测，否则旧浏览器或禁用环境里会静默丢弃整条声明。
为什么直接写 color-mix(in srgb, #2563eb, #1e40af) 会失效
常见错误不是颜色写错，而是漏掉三要素中的任意一个：in <space>、具体字面量颜色、权重总和隐式归一化逻辑被误读。例如：
- 漏写
in srgb→ 整个声明被忽略（不是警告，是跳过） - 写成
color-mix(in srgb, var(--primary), #1e40af)→ 报Invalid property value，Firefox/Safari 直接不解析 - 写成
color-mix(in srgb, #2563eb 60, #1e40af 40)（缺%）→ 浏览器无法识别数值单位，整条失效 - 在
background简写里混用：background: color-mix(...) no-repeat;→ 复合属性全崩，连no-repeat都不生效
必须用 @supports 包裹 + 显式 HEX 回退
@supports 不是可选优化，而是生产必需。因为 color-mix() 在 Firefox（即使 111+）仍需手动开启 layout.css.color-mix.enabled，Safari 16.4+ 也非默认全开。不加检测，多数用户看到的是上一个有效声明（可能完全无关）。
正确写法是：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: #2563eb; /* 所有浏览器都认的 HEX */
}
@supports (background-color: color-mix(in srgb, red, blue)) {
button {
background-color: color-mix(in srgb, #2563eb 70%, #1e40af 30%);
}
}注意：@supports 条件里必须写完整函数调用（含 in srgb），只写 color-mix() 会被 Safari 16.4 之前的版本误判为支持。
HEX 回退色不能随便抄设计稿中间值
很多人取 #7f007f 当 red 和 blue 的 50/50 混合回退，但这是错的——color-mix(in srgb, red, blue) 的结果确实是 #7f007f，可如果你用的是 in oklab（默认空间），结果会更亮、更饱和。回退色必须和你实际使用的色彩空间一致。
- 用
in srgb→ 回退色用工具算：比如color-mix(in srgb, #2563eb, #1e40af)在 Chrome DevTools 里点出计算值，复制 HEX - 用
in lch或in oklch→ 别手估，用在线转换器或 VS Code 插件导出对应 sRGB 近似值，再设为回退 - 别用
mix(#2563eb, #1e40af)（Less/Sass）当回退：预处理器输出的是 RGB 加权平均，和 CSS runtime 的color-mix()空间不等价
构建时降级比运行时更可控
真要覆盖 Firefox 或旧 Chrome，靠 @supports + HEX 回退只是“看起来不崩”，并不能还原混合意图。更稳的做法是在构建阶段用 postcss-color-mix 插件把 color-mix() 编译成静态 HEX：
/* 输入 */
.element { background-color: color-mix(in srgb, #2563eb 60%, #1e40af 40%); }
<p>/<em> 输出（PostCSS 处理后） </em>/
.element { background-color: #2158a0; }这样所有浏览器拿到的都是确定 HEX，无解析风险，transition 也能正常作用于 background-color。而纯 CSS 方案永远卡在“函数不支持就只能切静态色”的事实里——color-mix() 从设计上就不是渐进增强型特性，它要么全有，要么全无。
