wide gamut 已成事实标准但 css 颜色管理滞后，color(display-p3) 是唯一引擎级支持的广色域写法，需配合 @supports 检测且避免 srgb 合成降级。
不是“正在转向”，而是wide gamut 已经是事实标准，但 CSS 的颜色管理长期没跟上硬件演进。iPhone 12、MacBook Pro M1+、iPad Pro、Pixel 8/9、Samsung S23/S24 等主流设备出厂即支持 Display P3，sRGB 只是向下兼容的保底路径——你写的 rgb(255, 0, 0) 在这些屏幕上默认被解释为 sRGB 红，而非设备能显示的更饱和的 P3 红，本质是能力闲置。
color(display-p3) 是唯一被引擎级支持的 wide gamut 写法
浏览器不靠媒体查询升级颜色，只靠显式色彩空间声明。只有 color(display-p3) 能触发渲染管线切换到广色域输出路径；rgb()、#RRGGBB、hsl() 全部锁定在 sRGB 空间，无论设备多先进，它们都不会变艳。
-
color(display-p3 1 0 0)在 P3 屏上是真正的纯红（CIE xy 坐标 ≈ 0.68, 0.32），而rgb(255, 0, 0)是 sRGB 红（≈ 0.64, 0.33） - 参数必须是 0–1 的线性值，不是 gamma 压缩后的 sRGB 值——直接把
#FF6347拆成255/255, 99/255, 71/255是对的，但别用 Photoshop 里“复制 RGB”那种未经校准的数值 - WebKit（Safari）对语法极其敏感：空格不可省略、不能写整数、alpha 必须用
/分隔，比如color(display-p3 1 0 0 / 0.8)，写成color(display-p3 1,0,0,0.8)就整条失效
@supports 比 @media (color-gamut: p3) 更关键
@media (color-gamut: p3) 只告诉你“这台设备硬件支持 P3”，但不保证浏览器能解析 color(display-p3)。iOS Safari 16.4+、Chrome 117+、Edge 117+ 支持该函数，Firefox 至今未实现（2026 年 4 月数据）。所以 fallback 必须靠 @supports，而不是媒体查询。
- 正确写法：
@supports (color: color(display-p3 0 0 0)) { color: color(display-p3 0.98 0.35 0.35); } - 错误写法：
@media (color-gamut: p3) { color: color(display-p3 0.98 0.35 0.35); }—— Safari 会忽略整条规则，因为没包裹在@supports里 - 不要混用：
@supports里再套@media没意义，color(display-p3)的生效与否只取决于引擎支持，和当前是否在 P3 设备上无关
background-color 是 P3 支持最脆弱的属性
即使 @supports 和语法都对，background-color: color(display-p3 ...) 在 iOS Safari 和部分 Android WebView 中仍大概率发灰——底层合成管线绕过了色彩管理，直接映射到 sRGB 输出空间。
- 实操解法：改用
background-image: linear-gradient(color(display-p3 ...), color(display-p3 ...))，单色无角度渐变在 Safari 和 Chrome 中保留色域的概率更高 - 避免父级有
transform、opacity或filter，这类属性会强制整个层叠上下文降级为 sRGB 合成 - 如果需要透明背景，别用
rgba()fallback，而是设background-color: transparent+ 单色渐变叠加
真正卡住 wide gamut 落地的，从来不是设计师调不出 P3 色值，而是开发者没意识到：CSS 颜色不是“写出来就能用”，它依赖三重对齐——语法正确、引擎支持、合成路径不被破坏。少一个环节，P3 就只是个纸面参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
