必须用 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()，也得重新评估支持性。
- CI/CD 流程里加检查：
grep -r "rgb([^)]*,[^)]*)" src/快速定位逗号残留 - JS 中动态设色时，别直接写
el.style.color = 'rgb(255 0 0)'，先检测再赋值 -
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() 降级。
- 构建工具如 esbuild、PostCSS 压缩时可能抹掉空格，导致
rgb(255 0 0)→rgb(255 0 0)（少一空格），直接失效 - Sass 中避免
rgb($r, $g, $b)，改用插值rgb(#{$r} #{$g} #{$b} / #{$a}) - 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%) 会直接失效。
- 亮度越界必须兜底：
hsl(from var(--primary) h s max(15%, calc(l - 20))) -
color-mix()要求所有参数统一语法：不能混用rgb(255 0 0)和hsl(240, 100%, 50%)，否则整条声明被忽略 - 灰阶请用
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()，候选色也应尽量同空间，否则对比度计算失真。
- 深色模式下批量调亮主题色，别逐个调
hsl()的 l，直接统一改oklch(L 0.2 260)的 L -
color-contrast()不保证返回列表第一个达标色，而是选对比度最高者——若你依赖顺序语义（比如“首选白，不行再黑”），就得自己用 JS 实现 fallback 逻辑 - OLED 屏上低饱和高亮度色容易发灰，
oklch()的 C（色度）需配合min()限幅，不能只调 L
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
