oklch声明在旧浏览器中“消失”是因为css引擎直接忽略整条不支持的声明，而非降级；正确做法是同一属性内按层叠顺序前置rgb fallback，如background-color: #4a6fa5; background-color: oklch(60% 0.18 250);。
OKLCH颜色在Safari、Firefox旧版和部分Edge中直接失效，不是变灰，而是整条声明被丢弃——必须用CSS层叠顺序提供RGB fallback，不能依赖JS或@supports包裹。
为什么OKLCH声明会“消失”而不是降级
浏览器遇到不支持的oklch()函数时，并不会报错，而是跳过整条CSS声明。比如写color: oklch(60% 0.2 240);，在Safari 17.3或Firefox 120中，这条规则完全不生效，最终取父级继承值或用户代理默认值（常是黑色），深色背景上文字直接不可见。
- 不是“解析失败后取前一个值”，而是整个声明被CSS引擎忽略
-
@supports (color: oklch(0% 0 0))检测本身在不支持OKLCH的浏览器里也无效——它连语法都认不出，直接跳过整个@supports块 - JS无法可靠检测：
CSS.supports('color', 'oklch(0% 0 0)')在旧浏览器返回false，但你无法知道是函数不支持，还是参数格式错
正确的fallback写法：声明顺序即降级逻辑
CSS按从左到右、从上到下解析，第一个有效声明生效。OKLCH fallback必须写成同一属性的连续声明，RGB在前，OKLCH在后：
.btn-primary {
background-color: #4a6fa5; /* 安全的sRGB fallback */
background-color: oklch(60% 0.18 250);
}
- 绝对不要拆到不同class里，比如
.btn-primary { background-color: #4a6fa5; }和.btn-primary-oklch { background-color: oklch(60% 0.18 250); }——旧浏览器根本不会应用第二个class - 不要用
@supports把OKLCH包起来再放fallback在里面，fallback必须在@supports外部、同一选择器下 - 如果用了alpha通道，fallback必须用
rgba()而非hex，例如rgba(74, 111, 165, 0.9)
如何选一个靠谱的RGB fallback值
OKLCH的c（色度）在sRGB中无直接映射，自动转换工具（如postcss-oklab）会clamp超出色域的值，导致视觉失真——尤其蓝紫/高饱和绿区域明显发灰。
- 别依赖Figma导出的“近似RGB”，它常按显示器色域截断，不反映真实sRGB渲染效果
- 对品牌主色等关键色块，手动在Chrome DevTools里打开Color Picker，切换到sRGB模式，拖动滑块逼近OKLCH预览效果
- 注意明度敏感区：人眼对
L=40%–60%区间变化最敏感，这里哪怕ΔL=2%都可能察觉差异，需重点校验 - 若设计稿要求精确对比度（如WCAG AA），fallback后务必重新测
contrast-ratio，OKLCH转RGB后对比度常下降5–10%
Tailwind / UnoCSS等原子化框架怎么处理
原生不支持OKLCH fallback链。Tailwind v4虽引入OKLCH主题色，但生成的类如bg-primary只输出oklch()，没插rgb()前缀；UnoCSS preset-mini也未内置OKLCH降级逻辑。
- Tailwind项目必须配PostCSS插件：
@csstools/postcss-oklab-function，启用{ preserve: true }才保留fallback（否则全转成rgb()） - UnoCSS推荐用CSS变量中转：先定义
--color-primary: rgb(74, 111, 165);，再用@supports覆盖为--color-primary: oklch(60% 0.18 250);，最后在class里用background-color: var(--color-primary); - 自定义主题时避免写
primary: { 50: 'oklch(90% 0.1 217)' }这种单值，应显式加50Fallback: '#f0f9ff'并配合shortcuts自动注入fallback class
最易被忽略的一点：OKLCH fallback不是“加一行代码就完事”，它必须嵌入真实渲染路径——从设计稿校色、工具链转换、到最终CSS声明顺序，每个环节都可能让fallback失效。尤其是深色模式下，同一OKLCH值在prefers-color-scheme: dark里转出的RGB，和亮色模式下完全不同，得分开校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
