唯一可靠检测方式是@supports (color: color(display-p3 0 0 0))，因@media (color-gamut: p3)仅反映硬件能力，不验证CSS引擎是否支持该语法；Safari 16.3及更早、Chrome≤116、Firefox全版本均匹配媒体查询但静默忽略color(display-p3)。
@supports (color: color(display-p3 0 0 0)) 是唯一可靠检测方式
仅靠 @media (color-gamut: p3) 或 window.matchMedia("(color-gamut: p3)") 无法确认浏览器能否真正渲染 color(display-p3)，因为它们只反映硬件能力，不验证 CSS 引擎是否支持该语法。Safari 16.3 及更早、Chrome ≤116、Firefox 全版本都会匹配媒体查询，但直接忽略 color(display-p3) 声明，静默降级为黑色或继承色。
正确检测必须用：@supports (color: color(display-p3 0 0 0))
这个表达式测试的是 CSS 解析器能否接受该函数调用——参数必须是三位小数、空格分隔、无单位，且开头必须带 color: 前缀。漏掉任意一项（比如写成 @supports (color(display-p3 0 0 0))）会导致整个块被跳过。
为什么不能嵌套在 @media (color-gamut: p3) 里
叠加使用反而增加失效概率。@supports 本身已足够精准，再套一层媒体查询不仅没收益，还会让旧版 Safari（如 16.3）因解析顺序问题跳过整条规则。
常见错误结构：
@media (color-gamut: p3) {
@supports (color: color(display-p3 0 0 0)) {
.text { color: color(display-p3 0.98 0.35 0.35); }
}
}
应改为平级、独立的 @supports 块，并确保 fallback 写在它外面：
立即学习“前端免费学习笔记（深入）”；
.text { color: #FF6B6B; }
@supports (color: color(display-p3 0 0 0)) {
.text { color: color(display-p3 0.98 0.35 0.35); }
}
JS 运行时检测要双校验
如果需动态加载资源或切换逻辑，不能只信 matchMedia 结果。必须同时满足两个条件才可安全启用 P3 颜色：
CSS.supports("color", "color(display-p3 0 0 0)") === truewindow.matchMedia("(color-gamut: p3)").matches === true
注意：iOS Safari 在 DOMContentLoaded 后首次调用 matchMedia 可能返回 false，建议延迟 10ms 再查；且该值可能随系统设置（如辅助功能开启色彩滤镜）动态变化，不宜缓存。
最容易被忽略的硬性前置条件
即使 @supports 和 matchMedia 都通过，color(display-p3) 仍可能不生效，因为底层渲染链路依赖三个不可绕过的环境项：
- 页面必须通过
HTTPS加载（file://或HTTP会直接跳过广色域管线） -
<meta name="color-scheme" content="light dark">必须存在，部分 iOS Safari 版本依赖它初始化色彩管理上下文 - 父元素不能有
opacity、filter或transform—— 这些会强制整个层叠上下文降级到 sRGB 合成空间，导致color(display-p3)被映射失真（发灰、偏橙）
真机调试时，缺一不可。桌面 Safari、Windows/Linux Chrome、Android WebView 全部不走 P3 渲染路径，即使代码完全正确也看不到效果。
