color(display-p3) 仅在 iOS/macOS Safari 真机、HTTPS、P3 屏且系统广色域开启时生效，其余环境静默忽略并回退为黑色或继承色；失效主因是底层条件全链路断开，需用 @supports 检测并配合保底色。
移动端高动态范围屏幕上，color(display-p3) 仅在 iOS/macOS Safari 真机 + HTTPS + P3 屏 + 系统广色域开启时可能生效；其他所有环境（包括 Chrome on iOS、Android WebView、桌面 Safari）都会静默忽略该声明，回退为黑色或继承色——这不是写法问题，是渲染管线未启用。
为什么写了 color(display-p3) 却没变化？
常见失效不是因为语法错，而是底层条件全链路断开：
-
window.matchMedia("(color-gamut: p3)").matches返回false：设备不支持（iPhone 11 及更早机型、多数安卓旗舰）、系统禁用广色域（iOS 辅助功能 → 色彩滤镜开启，或 macOS 显示器设置中关闭“广色域显示”） - 页面通过
file://或 HTTP 加载：必须 HTTPS，否则 Safari 直接跳过广色域渲染 - 缺少
：部分 iOS Safari 版本依赖该标签触发色彩管理初始化 - 父元素有
transform、opacity或filter：强制整个层叠上下文降级到 sRGB 合成空间，background-color: color(display-p3 ...)就会发灰甚至偏橙
@supports (color: color(display-p3 0 0 0)) 是唯一可靠检测方式
别信 @media (color-gamut: p3) —— Firefox 不支持该查询，Chrome 即使命中也不会解析 color(display-p3)，它只反映硬件能力，不验证 CSS 引擎是否支持该函数。
正确结构必须是：
/* 先给所有浏览器保底色 */
.text { color: #FF6B6B; }
<p>/<em> 再用 @supports 精准包裹增强声明 </em>/
@supports (color: color(display-p3 0 0 0)) {
.text { color: color(display-p3 0.98 0.35 0.35); }
}</p>
注意：@supports 必须在外层，不能嵌套进 @media 块里；也不能把 fallback 也塞进去，否则旧浏览器直接无颜色。
移动端最稳的 color(display-p3) 使用姿势
在 iOS Safari 上真正想让 P3 生效，得绕开几个默认陷阱：
-
background-color最不稳定：改用background-image: linear-gradient(color(display-p3 0.98 0.35 0.35), color(display-p3 0.98 0.35 0.35))，单色无角度渐变更大概率保留原始色域 - 参数必须是
0.0–1.0小数，三位足够（如0.98 0.35 0.35），整数、十六进制、百分比、逗号分隔全部无效，浏览器静默丢弃 - 别自己换算：设计稿里的
#FF6B6B不能简单除以 255 得到 P3 值；必须用 Photoshop（Proof Setup → Display P3 + Preserve Color Numbers）或 Figma 插件导出真实 P3 坐标 - 避免简写覆盖：用
background-color: transparent配合background-image，而不是background:一次写死，否则会清掉前面定义的渐变
fallback 不是可选项，是必填项
很多人以为加个 @supports 就够了，结果在 Android 或旧 iOS 上文字直接消失——因为 color(display-p3) 失效时不会自动 fallback 到上一条声明，而是整条规则被跳过，最终用继承色或初始值（常为黑色或透明）。
真正可用的最小闭环是：
:root {
--primary: #FF6B6B;
}
@supports (color: color(display-p3 0 0 0)) {
:root {
--primary: color(display-p3 0.98 0.35 0.35);
}
}
.element { color: var(--primary); }
这里的关键是：变量定义本身不支持降级，所以 fallback 必须先写，再用 @supports 覆盖。任何试图靠 JS 注入或 @media 替换的方案，在首次渲染时都可能闪白或失色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
