css color level 4 新语法要求 rgb/hsl 中参数用空格分隔、alpha 用斜杠，safari 17.4 会静默忽略不合规写法，必须通过 css.supports 检测并降级；oklch() 和 color-mix() 需显式指定色彩空间且存在兼容性限制。
直接用空格分隔 + 斜杠写 alpha，别碰逗号；但 Safari 17.4 会静默忽略 rgb(255 0 0)，必须检测后降级。
rgb() 和 hsl() 新语法：空格代替逗号，/ 分隔 alpha
Chrome 117+、Firefox 119+ 默认启用 CSS Color Level 4 解析器，它优先匹配 rgb(255 0 0)，而把 rgb(255, 0, 0) 当作 legacy fallback 处理——不是报错，而是“能用就用新，不行才退旧”。但问题在于：rgb(255 0 0) 要求参数间**仅一个空格、无环绕空白**，比如 rgb(255 0 0)（两个空格）或 rgb( 255 0 0 )（首尾有空格）都会解析失败。
带透明度时，必须用斜杠：rgb(255 0 0 / 0.5)，不能写成 rgb(255 0 0 0.5)；同理 hsl(0 100% 50% / 0.8) 才合法，hsl(0 100% 50% 0.8) 直接无效。
- VS Code 对
hsl(0 100% 50%)有颜色预览，但对hsl(0 100 50)没有——建议保留百分号 - 构建工具（如 esbuild、PostCSS）压缩时可能抹掉空格，导致
rgb(255 0 0)变成rgb(255 0 0)（少一空格），浏览器无法识别 - Sass 默认输出逗号版，需改用插值：
rgb(#{$r} #{$g} #{$b})，或升级 color 模块
#rrggbbaa 十六进制透明度：支持但别全靠它
#00ff0088 和 #0f08 是合法的 Level 4 写法，Chrome DevTools 已显示为可点击色块，但 Safari 17.4 对 #rgba 简写支持不完整（#0f08 可能被忽略），而 #rrggbbaa 兼容性稍好。不过要注意：CSS 中所有十六进制写法都不支持变量插值，color: #{$primary}88 在 Sass 中会编译失败，必须转为函数形式（如 rgba($primary, 0.5) 或用 color-mix()）。
-
#0f08是#00ff0088的简写，但只在支持 Level 4 的浏览器中生效 - 若项目需支持 Safari ≤ 17.3，应避免
#rgba，优先用rgb(0 255 0 / 0.5)并配合CSS.supports('color', 'rgb(0 0 0)')检测 - CI/CD 流程中加检查：
grep -r "rgb([^)]*,[^)]*)" src/可快速定位遗留逗号写法
oklch() 和 color-mix()：不是炫技，是解决亮度失控的工程手段
oklch() 的 L 值是感知均匀的——oklch(0.6 0.2 260) 的亮度感基本不随色相变化，而 hsl(260, 100%, 60%) 在蓝紫区域实际看起来明显更暗。这意味着你能真正做「亮度锚定」：深色模式下统一调高 L，浅色模式下调低 L，不用为每种颜色单独试参。
但注意：oklch(60% 0.2 260) 是错的，L 是 0–1 小数，不是百分比；灰色必须用 oklch(L 0 H) 构建，gray() 在 Safari 仍不稳定；color-mix(in srgb, red, blue) 若混入 hsl() 或 rgba()，整个表达式会被丢弃——色彩空间必须显式一致。
-
color-mix()必须指定色彩空间，color-mix(red, blue)不合法，必须写color-mix(in srgb, red, blue) - 和
color-contrast()不同，color-mix()已被 Chrome/Firefox/Edge 支持，但 Safari 17.4 需要@supports (color: oklch(0 0 0))前置检测 - oklch() 的 H（色相）范围是 0–360，和 hsl() 一致，但 L 和 C（色度）单位完全不同，不能直接套用 hsl() 经验
最易被忽略的是：新语法不是“全有或全无”，而是渐进式解析。浏览器看到 rgb(255 0 0) 就用新规则，看到 rgb(255, 0, 0) 就走老路径——但构建工具可能破坏空格结构，Safari 可能静默失败，所以检测和降级不是可选项，是必选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
