color-mix() 兼容性需构建时转义，@supports 检测常失灵因旧版 Safari/Firefox 无法解析该函数；必须用 PostCSS 插件配置 preserve: false 和 space: 'srgb'，且输入须为字面量百分比。
color-mix() 在旧浏览器里不是报错，而是静默丢弃整条声明——你写的那行 background 或 color 会直接失效，元素可能变透明或继承默认色。必须用 PostCSS 在构建时转成确定色值，不能靠 @supports 或 JS 补救。
为什么 @supports 检测 color-mix() 常常失灵
@supports (background: color-mix(in srgb, red, blue)) 看似合理，但 Safari 16.3 及更早版本、所有 Firefox 版本（截至 2024 年中）根本无法解析 color-mix() 这个函数名，整条 @supports 规则会被 CSS 解析器当作语法错误直接跳过，里面的内容一概不执行。更糟的是，只写 @supports (color-mix: ) 是无效语法，浏览器直接忽略。检测 oklch() 相对可靠，但它和 color-mix() 的支持梯度并不重合——你开了 oklch() 并不等于 color-mix() 就能用。
实操建议：
- 别把兼容性赌在运行时检测上；@supports 只适合渐进增强非关键样式，比如 hover 色微调
- 关键颜色（如按钮主色、错误提示色）必须提供静态 fallback，且写在 color-mix() 前面，靠层叠顺序覆盖
- 检查构建产物：grep -r "color-mix" dist/ 应该返回空；如果有残留，说明 PostCSS 插件没生效或配置漏了
postcss-color-mix 插件必须显式启用并关闭 preserve
很多人装了 postcss-color-mix 却发现 CSS 里同时存在 background: #6b5b95 和 background: color-mix(...) 两行，旧浏览器反而用了后一条（因为层叠顺序），结果还是失效。这是因为插件默认开启 preserve: true，即保留原始声明+插入降级值。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 配置中必须写
preserve: false，否则生成冗余代码且逻辑混乱 - 必须指定
space: 'srgb'，避免输入是in lch时插件因无法安全降级而跳过或报错 - 不要用
postcss-preset-env自带的旧版 color-mix 支持——它不处理自定义色彩空间，也不支持百分比字面量解析
正确配置示例：
plugins: [
require('postcss-color-mix')({
preserve: false,
space: 'srgb'
})
]
color-mix() 输入必须是字面量，变量和 calc() 全部失效
color-mix(in srgb, red var(--weight), blue) 或 color-mix(in srgb, red calc(50% + 10%), blue) 这类写法，postcss-color-mix 直接跳过不处理——它只认 red 60%、blue 40% 这样的静态数字+百分号组合。一旦用了 CSS 变量，构建时无法知道具体数值，也就没法算出确定色值。
实操建议：
- 设计系统中若定义了
--brand-hover: color-mix(...)，确保这个变量只在经过 PostCSS 处理的 CSS 文件中使用，不要在 CSS-in-JS 里直接引用 - CSS-in-JS 场景需额外配置插件（如 emotion 的
@emotion/babel-plugin或 styled-components 的stylis-plugin-rtl不适用，得找专为 color-mix 设计的预编译方案） - 权重不能省略单位：
red 60是非法的，必须写red 60%或red 0.6
LCH / OKLCH 混合降级到 sRGB 会丢失视觉一致性
用 color-mix(in lch, #f00 50%, #00f) 在 Chrome 里生成的紫色，在 PostCSS 降级成 #800080 后，人眼会觉得更暗、更浊。这不是精度问题，而是 LCH 空间里亮度（L）和彩度（C）的感知权重远高于 sRGB，线性插值在圆柱坐标系中本就不均匀。尤其浅灰、高饱和粉/青色降级后差异最明显。
实操建议：
- 非必要不混用
in lch和in srgb；如果设计稿强制要求 LCH 混合效果，fallback 色建议人工校准，而非依赖插件自动转换 - 在 CI 流程中加检查：构建后扫描 CSS 是否含
in lch或in oklch，若有则触发警告，提醒人工 review fallback - 按钮悬停、状态指示等对色彩敏感的交互点，优先用
in srgb，避免降级后行为突变
真正难的不是写对语法，而是判断哪些颜色值得用 color-mix() —— 它天生不适合做实时响应或高保真还原，只适合预计算一组协调、可预测的静态色值。
