color-mix()在旧浏览器中不报错而是静默失败，需用@supports检测并提供静态色值fallback。
color-mix() 在旧浏览器里直接报错怎么办
不支持 color-mix() 的浏览器（比如所有 Safari 版本、Chrome color-mix() 却没给 fallback，结果颜色变成透明或继承值，界面突然“消失”。
- 必须用「声明顺序 fallback」：先写兼容色，再写新语法，浏览器按从左到右取第一个有效值
- 别用
@supports (color-mix: ...)包裹——它本身也受支持度限制，Safari 完全不识别这个特性查询 -
color-mix()的输出是 sRGB 值，但输入可以是 lch()、oklch() 等；fallback 里只能用 hex / rgb() / named color 这类广泛支持的格式
button {
background-color: #4a6fa5; /* fallback: solid sRGB */
background-color: color-mix(in oklch, #4a6fa5 70%, white 30%); /* subtle lightening */
}
oklch() 颜色在 CSS 里怎么安全降级
oklch() 比 lch() 支持稍好（Chrome 112+、Firefox 119+），但依然无法在 Safari 或 Edge 115 之前使用。它不是“解析失败就跳过”，而是整个声明失效——哪怕你只在一个 background 里混用了 oklch() 和 rgb()，整条规则都可能被丢弃。
- 不要试图用 JS 检测
oklch()支持：CSSOM 无法可靠判断颜色函数是否被解析成功 - fallback 必须是独立声明，且放在同一选择器下，靠层叠覆盖（不能拆到不同 class 或媒体查询里）
- 如果用到
oklch(0.6 0.2 240)这类带小数的写法，fallback 的 hex 值建议手动转成相近的 sRGB 值，而不是粗暴用工具截断——人眼对蓝紫系明度变化特别敏感
.tag {
color: #3a5fc7; /* ≈ oklch(0.6 0.2 240) in sRGB */
color: oklch(0.6 0.2 240);
}
color-contrast() 没 fallback 时文字直接看不见
color-contrast() 是实验性功能（仅 Chrome 111+ 实现），不支持时浏览器完全无视该函数，但如果你只写了一行 color: color-contrast(...)，那 color 就没了默认值，最终继承父级或回退到用户代理样式（通常是黑色），看起来像“没生效”，实则风险极大——深色背景上文字变黑，直接不可读。
- 永远搭配
color的初始值一起写，例如color: #000; color: color-contrast(...); - 别依赖
color-contrast()做关键可访问性保障：它的对比度算法和 WCAG 计算方式不一致，且不处理透明度叠加场景 - 当前所有实现都不支持自定义对比度阈值（比如强制要求 4.5:1），它只返回列表中第一个达标颜色，fallback 里得预先准备好至少两个备选色
.card-title {
color: #1e1e1e; /* dark fallback */
color: color-contrast(#1e1e1e vs white, #fff, #f0f0f0, #e0e0e0);
}
用 custom property + @property 做渐进增强要小心
有人想用 @property 注册一个 --accent 并设 syntax: "<color>"</color>，再配合 color-mix() 动态生成衍生色——这在支持的浏览器里很优雅，但一旦 @property 不被识别（Safari 全系、Firefox color-mix() 会因输入非法而静默失败，整条链路崩掉。
-
@property必须带inherits: false，否则未注册时可能意外继承值，干扰 fallback 行为 - 不要把 fallback 色写在
@property的initial-value里——那个值只用于计算，不参与 CSS 层叠，对渲染无意义 - 真要动态配色，优先用 JS 检测
CSS.supports('color-mix', 'in srgb, red, blue')，再注入对应规则，比纯 CSS 渐进更可控
复杂点在于：颜色函数的 fallback 不是“兜底”，而是“替代方案”。浏览器不会帮你做色彩空间转换，也不会警告你某条声明被跳过了——它只是安静地不用那行代码。你得自己盯住 DevTools 的 computed 面板，看最终生效的是哪条 color 声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
