chrome 117+ 默认启用 css color level 4，旧版（≤116）仅支持逗号分隔的 rgb(255, 0, 0)，空格分隔写法会被整条忽略；必须用 css.supports('color', 'rgb(0 0 0)') 检测并前置 fallback，构建时禁用颜色格式化插件，js 动态设色需兼容处理。
Chrome 117+ 默认启用 CSS Color Level 4，但旧版 Chrome（≤116）根本不认 rgb(255 0 0)
旧版 Chrome（比如 112–116）仍使用 legacy CSS 颜色解析器，遇到 rgb(255 0 0) 这种空格分隔写法会直接忽略整条声明——不是降级为黑/白，而是“消失”，最终取继承色或初始值。它只认逗号分隔的 rgb(255, 0, 0) 或十六进制。
你不能靠构建工具统一替换逗号为空格：PostCSS 压缩时若把 rgb(255, 0, 0) 变成 rgb(255 0 0)，旧 Chrome 就挂了；但若保留逗号，新 Chrome 117+ 又会把它当 fallback 处理（虽能显示，但失去 Level 4 的色彩空间控制能力）。
- 必须按浏览器能力做运行时分支：用
CSS.supports('color', 'rgb(0 0 0)')检测，返回true再注入 Level 4 样式 - 构建时禁止 PostCSS 自动格式化颜色函数——关掉
postcss-colormin和cssnano中涉及颜色重写的规则 - 所有
rgb()、hsl()调用需显式加空格且**无环绕空白**：rgb(255 0 0)✅，rgb(255 0 0)❌，rgb( 255 0 0 )❌
color-mix() 在 Chrome 110 里静默失效，fallback 必须前置同一属性
color-mix() 在 Chrome 110–116 中不报错、不警告，只是整条声明被跳过。比如 color: color-mix(in srgb, red, blue); 在这些版本里等于没写，文字直接继承父级颜色，极易在深色背景下变不可读。
fallback 不是写个默认值就行，必须和 Level 4 声明在同一 CSS 属性内、且顺序在前：
- ✅ 正确：
color: #8b4513; color: color-mix(in srgb, red, blue); - ❌ 错误：
color: color-mix(in srgb, red, blue);（旧 Chrome 全丢） - ❌ 错误：
@media (prefers-color-scheme: dark) { color: #8b4513; }（媒体查询隔离 fallback，旧 Chrome 不执行）
注意：color-mix() 输入不支持 var(--c) 或 calc()，PostCSS 插件如 postcss-color-mix 只能处理字面量，动态值必须 JS runtime 处理或放弃。
Safari 17.4 对 rgb(255 0 0) 支持不全，JS 赋值直接被忽略
即使 Safari 17.4 声称支持 CSS Color Level 4，el.style.color = 'rgb(255 0 0)' 在 JS 中仍会被静默忽略——元素颜色不变，也不报错。这不是 bug，是 WebKit 解析器对 inline style 的限制更严。
- JS 动态设色必须走兼容路径：
el.style.color = 'rgb(255, 0, 0)'（逗号版），或先检测：if (CSS.supports('color', 'rgb(0 0 0)')) { el.style.color = 'rgb(255 0 0)'; } - 避免在
:hover或@keyframes中用color-mix()：Safari 17.4 对伪类/动画中该函数的支持有延迟或跳变，目前仍属实验性 -
oklch()在 Safari 16.4+ 才默认启用，Firefox 需手动开layout.css.color-mix.enabled标志，别假设它“已就绪”
构建流程必须校验 Level 4 语法是否被破坏
很多 CI/CD 环境或静态站点生成器（如 Hugo、Jekyll）默认禁用实验性 CSS 特性，PostCSS 插件若未显式配置，会把 hwb()、oklch() 当非法字符串原样输出，低版本浏览器看到未知函数就跳过整条规则。
- 构建后务必打开产出 CSS，全局搜索
rgb(、hsl(、oklch(，确认空格数、括号前后无空白、无逗号残留 - 用
getComputedStyle(el).color在目标浏览器中验证：返回rgb(255, 0, 0)表示已被转义，原始rgb(255 0 0)已失效 - Sass/Less 若未接入
postcss-color-hwb等插件，hwb($h, $w, $b)会被编译成无效字符串，必须改用插值：color: hwb(#{$h} #{$w} #{$b});
真正难处理的不是语法本身，而是构建链路中任意一环（压缩、转译、注入）都可能悄悄抹掉那个关键空格——它不像报错那样醒目，只让颜色在某个旧 Chrome 版本里突然“变黑”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
