必须用color(srgb)显式声明+前置fallback，因color(display-p3)不支持自动降级：浏览器不支持时整条声明被忽略，不会将P3值转为sRGB，故fallback必须置于同一属性的前一行。
必须用 color(srgb) 显式声明 + 前置 fallback，不能靠浏览器自动降级。
为什么 color(display-p3) 不能直接 fallback 到 #RRGGBB
浏览器对 color(display-p3) 的处理是“全有或全无”：不支持该语法时整条声明被忽略，不会尝试把 P3 值硬转成 sRGB 十六进制。你写的 color: color(display-p3 1 0.42 0.42); color: #FF6B6B; 看似有 fallback，但实际旧版 Safari（
-
color(display-p3 1 0.42 0.42)和#FF6B6B在物理色域上不是同一颜色，强行等价会偏色（P3 红比 sRGB 红更饱和） - 没有浏览器会自动做 display-p3 → sRGB 的色彩空间转换；CSS 不提供隐式转换逻辑
- 用
rgb(255, 107, 107)作 fallback 也不行——它仍是未声明空间的 sRGB 值，Safari 可能再次把它映射进 P3，失去“回退”意义
正确写法：先给 sRGB 版本，再叠 display-p3 增强
顺序不能反。浏览器按声明顺序应用，后声明的覆盖前声明的；但只在支持时才生效。所以 sRGB 必须写在前面，作为兜底基础色。
- 写法必须是：
color: #FF6B6B; color: color(srgb 1 0.4196 0.4196); color: color(display-p3 0.98 0.42 0.42); - 其中
color(srgb ...)是关键中间层：它显式锁定 sRGB 渲染路径，堵住 Safari 把十六进制误判为 P3 的漏洞 -
color(display-p3 ...)放最后，仅在支持广色域的设备+浏览器组合下生效（如 iOS 17+ Safari、macOS 13+ Safari 16.4+） - 所有数值必须归一化（0–1），
0xFF / 255 = 1，0x6B / 255 ≈ 0.4196，不能传整数
必须套 @supports，否则无效
光写 color(display-p3) 不够。iOS 上若未触发广色域渲染链路（比如缺 color-gamut: p3 声明或 meta 不到位），它会被静默降级为 sRGB，但你无法感知——DevTools 里仍显示 color(display-p3)，实际已失效。
立即学习“前端免费学习笔记（深入）”；
- 包裹方式：
@supports (color: color(display-p3 0 0 0)) { ... }，检测的是语法支持，不是设备能力 - 里面必须提供完整 fallback：
color: #FF6B6B; color: color(srgb 1 0.4196 0.4196);——不能只写color(display-p3)一行 - 别用
matchMedia('(color-gamut: p3)')做 JS 判断：它返回 true 不代表 CSScolor(display-p3)就真被渲染成 P3 色
图像资源也得同步处理
CSS 里写了 color(display-p3) 没用，如果背景图、图标还是 P3 元数据缺失的 PNG，整体视觉依然断裂。
- 用
pngcheck -v image.png验证是否含sRGBchunk；不含就说明导出时没勾选 “Embed color profile” - Figma 导出前务必设为 sRGB 色彩空间，并勾选 “Embed color profile”；否则图片自带 P3 元数据，浏览器照单全收
- 不要用截图或复制粘贴传图——这些操作剥离色彩配置文件，等于主动放弃控制权
真正难的不是写对那一行 color()，而是让设计稿、切图、CSS、meta 标签、系统设置全部对齐到同一套 sRGB 基准上。漏掉任意一环，color(display-p3) 就只是个好看的语法糖。
