color-mix() 必须显式指定色彩空间且 fallback 写在 @supports 外，旧浏览器才不会失效；检测应使用 color: oklch(0% 0 0)，而非 color-mix 本身或 oklab。
color-mix() 没有自动 fallback，不写降级就会在旧浏览器里彻底失效——文字变黑、背景变透明、按钮消失都是真实发生过的线上事故。
必须把 fallback 颜色写在 @supports 外面
CSS 是从上到下解析的。旧浏览器（比如 Safari 16.3 或 Chrome 110）不认识 color-mix()，会直接跳过整行声明；如果 fallback 写在 @supports 块里，它根本看不到。
- ✅ 正确顺序：
background-color: #4a6fa5;→ 再写@supports (...) { background-color: color-mix(...); } - ❌ 错误写法：
@supports (color: oklch(0% 0 0)) { background-color: color-mix(in oklch, ...); }→ 旧 Safari 连这个块都不解析 - fallback 只能用广泛支持的格式：
#rrggbb、rgb()、hsl()、命名色；不能用oklch()或color-mix()的输出作 fallback
检测要用 color: oklch(0% 0 0)，别试 color-mix 本身
@supports (color-mix: ...) 在 Safari 16.4 之前完全无效——浏览器根本不认识这个特性名，整个 @supports 块被静默丢弃。
- ✅ 安全检测：
@supports (color: oklch(0% 0 0))或@supports (color: lch(0% 0 0))，基础色彩空间支持了，color-mix()才大概率可用 - ✅ 检测
color-mix()本身（仅限较新版本）：@supports (background: color-mix(in srgb, red, blue))，括号内必须是语法合法的完整调用 - ❌ 别用
@supports (color: oklab(0 0 0))：截至 2026 年中，主流浏览器仍返回false，检测永远失败
color-mix() 必须显式写 in oklch 或 in srgb
不写色彩空间时，Firefox 默认按 srgb-linear 混合，Chrome/Safari 用 srgb，结果颜色明显偏灰；而旧版 Safari 直接忽略整条声明。
- ❌ 危险写法：
color-mix(#3a5fa8, white)或color-mix(in srgb, #3a5fa8, white)——white是srgb值，但#3a5fa8不是显式色彩空间格式，空间不一致导致解析失败 - ✅ 安全写法：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 70%, oklch(100% 0 0) 30%)，两个颜色都用oklch()，空间一致 - ⚠️ 注意：
oklch(100% 0 0)是纯白，oklch(0% 0 0)是纯黑；混白/黑必须用oklch或lch，in srgb下color-mix(in srgb, white, black)会报错
最易被忽略的一点：你不能指望 color-mix() 在 :hover 或动画中“动态响应”深色模式变化——部分 Safari 版本对它的重计算有延迟甚至跳变，真要适配系统主题，得配合 light-dark() 或 JS 监听 prefers-color-scheme 手动切换变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
