如何在生产环境渐进使用CSS Color Level 4新语法

必须用 CSS.supports() 实时检测 rgb(0 0 0) 等新语法支持性，因 Safari 17.4 静默忽略不合规写法；降级需按层叠顺序紧接旧语法，且 oklch()、color-mix() 等需单独检测并显式声明色彩空间。

怎么检测浏览器是否支持 rgb(0 0 0) 这类新语法

不能靠 User Agent 或版本号猜，必须用 CSS.supports('color', 'rgb(0 0 0)') 实时判断。Safari 17.4 会静默忽略不合规写法，既不报错也不 fallback，所以检测是硬性前提。

常见错误是只测一次就缓存结果——但用户可能中途切换深色模式、或从桌面切到 iPad，window.matchMedia('(prefers-color-scheme: dark)') 变化时，若涉及 oklch() 或 color-mix()，也得重新评估支持性。

1. CI/CD 流程里加检查：grep -r "rgb([^)]*,[^)]*)" src/ 快速定位逗号残留
2. JS 中动态设色时，别直接写 el.style.color = 'rgb(255 0 0)'，先检测再赋值
3. CSS.supports('color', 'oklch(0.5 0.2 260)') 和 CSS.supports('color', 'color-mix(in srgb, red, blue)') 需单独测，它们的支持节奏不同

如何安全降级 rgb(255 0 0 / 0.5) 这类写法

不是简单多写一条 rgba(255, 0, 0, 0.5) 就完事。现代浏览器（Chrome 117+、Firefox 119+）会优先解析新语法，旧声明仅作 fallback；但 Safari 17.4 对新语法支持不全，反而可能跳过整条规则。

推荐写法是：先用新语法，再在同一声明块中紧接旧语法，并确保旧语法在后（CSS 层叠顺序起作用）：

button {background-color: rgb(255 0 0 / 0.5);background-color: rgba(255, 0, 0, 0.5);}

注意：#rrggbbaa 虽简洁，但 Safari ≤ 17.3 对 #0f08 简写支持不稳定，建议只用 #rrggbbaa 形式，并同样提供 rgba() 降级。

1. 构建工具如 esbuild、PostCSS 压缩时可能抹掉空格，导致 rgb(255 0 0) → rgb(255 0 0)（少一空格），直接失效
2. Sass 中避免 rgb($r, $g, $b)，改用插值 rgb(#{$r} #{$g} #{$b} / #{$a})
3. VS Code 对 hsl(0 100% 50%) 有颜色预览，但对 hsl(0 100 50) 没有——百分号不能省

hsl(from) 和 color-mix() 在生产中怎么避免静默失效

hsl(from var(--primary) h s calc(l - 10)) 这类相对颜色语法，错一个空格、少一个 calc()、或 from 后没空格，整条声明就被浏览器静默丢弃，毫无提示。

关键点在于：from 不是函数调用，只是解构语法；真正变色靠 calc()，且 l 是 0–100 的整数，calc(l + 20%) 会直接失效。

1. 亮度越界必须兜底：hsl(from var(--primary) h s max(15%, calc(l - 20)))
2. color-mix() 要求所有参数统一语法：不能混用 rgb(255 0 0) 和 hsl(240, 100%, 50%)，否则整条声明被忽略
3. 灰阶请用 oklch(L 0 H)，别用 gray() —— Safari 中仍不可靠

oklch() 和 color-contrast() 的工程落地难点

oklch() 的 L 值是感知均匀的，但 L 是 0–1 小数，写成 oklch(60% 0.2 260) 就解析失败；color-contrast() 目前仅 Chrome Canary 和部分 Firefox Nightly 支持，生产环境必须 polyfill。

最易被忽略的是色彩空间显式声明：color-mix(in srgb, red, blue) 中的 in srgb 不可省略，否则无效；color-contrast(var(--bg), white, black) 若背景是 oklch()，候选色也应尽量同空间，否则对比度计算失真。

1. 深色模式下批量调亮主题色，别逐个调 hsl() 的 l，直接统一改 oklch(L 0.2 260) 的 L
2. color-contrast() 不保证返回列表第一个达标色，而是选对比度最高者——若你依赖顺序语义（比如“首选白，不行再黑”），就得自己用 JS 实现 fallback 逻辑
3. OLED 屏上低饱和高亮度色容易发灰，oklch() 的 C（色度）需配合 min() 限幅，不能只调 L