必须三段式声明并用@supports包裹：color: #ff6b6b; color: color(srgb 1 0.4196 0.4196); color: color(display-p3 0.98 0.42 0.42);，且background-color需改用background-image渐变+transparent兜底，图片须嵌入srgb配置，meta标签须置head最顶部。
直接写 color(display-p3) 不会自动降级，浏览器不支持时整条声明被忽略，文字或背景可能变黑或透明——必须手动提供显式、语义正确的 sRGB fallback。
为什么不能只靠 color: #FF6B6B; color: color(display-p3 0.98 0.42 0.42);
这看似有 fallback，实则埋了两个坑：
- 十六进制值
#FF6B6B在 Safari 中可能被误判为“P3 上下文中的 sRGB 值”，导致渲染路径混乱； - 缺少
color(srgb)显式声明，无法堵住 Safari 对未声明色彩空间值的隐式映射行为。
正确顺序必须是三段式：
color: #FF6B6B; color: color(srgb 1 0.4196 0.4196); color: color(display-p3 0.98 0.42 0.42);
其中第二行 color(srgb) 是关键中间层：它强制锁定 sRGB 渲染路径，避免浏览器自行猜测。
必须用 @supports 包裹，且不能省略
不加 @supports (color: color(display-p3 0 0 0))，Safari 16.3 及更早版本会直接跳过整条规则，连 fallback 都不应用。
但仅靠 @supports 不够，因为：
- Chrome、Firefox 当前完全忽略
color(display-p3)，@supports检查恒为false； - 即使匹配成功，若没前置 sRGB 声明，非 P3 设备上会回退到继承色或透明；
- 移动端 WebView（如微信内置浏览器）常返回
true却静默降级，必须靠前面的color(srgb)兜底。
background-color 是最不稳定的属性，优先换用 background-image
直接对 background-color 使用 color(display-p3) 极易失效：iOS Safari 和多数 Android WebView 会绕过色彩管理，强行映射到 sRGB 输出空间，结果就是“发灰”或“偏橙”。
更可靠的写法是：
background-color: #FF6B6B;
background-color: color(srgb 1 0.4196 0.4196);
@supports (color: color(display-p3 0 0 0)) {
background-image: linear-gradient(color(display-p3 0.98 0.42 0.42), color(display-p3 0.98 0.42 0.42));
background-color: transparent;
}
注意两点：
- 单色无角度渐变（
linear-gradient(..., ...)）比纯background-color更大概率保留原始色域； - 必须设
background-color: transparent，否则background-image会被覆盖。
图像资源不同步，P3 色彩方案就全盘失效
CSS 写了 color(display-p3) 没用，如果背景图、图标还是 sRGB 导出的 PNG，视觉依然断裂。
验证方式：
- 终端运行
pngcheck -v image.png，确认输出含sRGBchunk；不含说明导出时没勾选 “Embed color profile”； - Figma 导出前务必设色彩空间为
sRGB，并勾选 “Embed color profile”；否则图片自带 P3 元数据，浏览器照单全收； - Photoshop 中取 P3 值必须用
View > Proof Setup > Custom → Device to simulate: Display P3，再吸管复制 “Display P3” 坐标，不能直接套用设计稿里的十六进制。
最易被忽略的是 meta 标签位置：<meta name="color-scheme" content="light dark"> 必须放在 最顶部，早于所有 CSS 和 JS，否则 Safari 可能跳过整个广色域渲染链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
