css变量中使用新色彩函数（如color(display-p3)、oklch()）会因浏览器不支持而静默失效，必须前置fallback值、配合@supports检测或js动态注入，且color-mix等函数要求统一色彩空间。
css变量里写color(display-p3)会直接失效
直接在:root里定义--primary: color(display-p3 1 0.42 0.42);，旧版 Chrome、Firefox 或 Android WebView 会静默忽略整条变量声明，后续用var(--primary)的地方变成透明或继承色——不是颜色不准，是压根没生效。
原因很简单：color()函数属于 CSS Color Level 4，而 CSS 自定义属性（变量）的解析发生在语法层面，不支持动态降级。浏览器遇到不认识的函数，就丢弃整个值，不会 fallback 到下一条声明。
- 必须把 fallback 写在变量定义之前：
--primary: #FF6B6B; --primary: color(srgb 1 0.4196 0.4196); - 别指望
@supports能包裹变量定义——@supports只能作用于规则块，不能嵌套进:root声明里 - 若真要区分设备色域，变量得靠 JS 动态注入：
document.documentElement.style.setProperty('--primary', window.matchMedia('(color-gamut: p3)').matches ? 'color(display-p3 1 0.42 0.42)' : '#FF6B6B');
用@media(color-gamut: p3)覆盖变量时的顺序陷阱
很多人写：@media (color-gamut: p3) { :root { --primary: color(display-p3 1 0.42 0.42); } }，结果发现 sRGB 屏上颜色反而过饱和。这不是媒体查询错了，是层叠顺序和降级逻辑断了。
color-gamut只反映设备能力，不保证渲染精度；且一旦 P3 声明生效，它就会覆盖前面所有--primary定义，包括你写的 sRGB fallback。
- 正确做法是：先定义保底值，再用媒体查询“增强”，而不是“替换”：
:root { --primary: #FF6B6B; } @media (color-gamut: p3) { :root { --primary: color(display-p3 1 0.42 0.42); } } - 但要注意：Chrome 直到 v117 才默认启用 P3 输出通道，部分用户可能开了
--force-color-profile=srgb启动参数，此时color-gamut: p3仍为 true，但color(display-p3)实际被忽略 - 更稳的方式是加双重检测：
@supports (color: color(display-p3 0 0 0)) and (color-gamut: p3)
OKLCH变量在多显示器下白点漂移问题
把oklch(60% 0.28 258.5)塞进 CSS 变量，MacBook Pro 和 Dell S2721DGF 上看起来明显不同，大概率不是显示器差异，而是 OKLCH 默认使用 D50 白点，而设计工具（Figma/Photoshop）导出的 HEX 多基于 D65。
同一段 OKLCH 值，在不同白点基准下映射到物理光谱的结果完全不同。浏览器不会自动转换白点，它只按规范字面渲染。
- 不要从 HEX 直接粘贴进在线转换器再抄进变量——先确认转换器是否支持指定白点（如 colorjs.io）
- 变量中 OKLCH 的 L 值必须带
%（60%），C 必须是无单位小数（0.28），H 不带单位（258.5），alpha 用/分隔（oklch(60% 0.28 258.5 / 0.8)） - OKLCH 变量必须配显式
@supports块，且 fallback 色必须定义在块外：:root { --primary: #2563eb; } @supports (color: oklch(0% 0 0)) { :root { --primary: oklch(60% 0.28 258.5); } }
变量里混用色彩空间会导致计算中断
写--bg: color(srgb 0.9 0.9 0.9); --accent: color(display-p3 1 0.2 0.3); --mixed: color-mix(in srgb, var(--bg), var(--accent));，结果--mixed在 Safari 里显示为灰色块——color-mix()目前仅支持同色域混合，跨空间运算直接失败。
浏览器不会报错，也不会降级，而是整个color-mix()声明被丢弃，变量保持未定义状态。
- 所有参与
color-mix()、color-contrast()或color-adjust()的变量，必须统一声明为同一色彩空间（全srgb或全display-p3） - 避免在变量中做空间转换：
--p3-to-srgb: color(srgb, color(display-p3 1 0.2 0.3));语法错误，CSS 不支持嵌套color()函数 - 复杂混合建议改用 JS 计算后注入变量，或直接用预编译值（PostCSS 插件如 postcss-color-function 可提前转义）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
