唯一可靠检测不支持P3色域的方式是@supports not (color-gamut: p3)，因color-gamut媒体特性仅在支持设备上匹配p3值，且Safari 16.4+才稳定支持，Chrome/Firefox暂不支持该特性。
如何检测P3色域支持
浏览器不提供直接检测“是否支持P3色域”的CSS媒体特性，@supports 无法写成 @supports (color-gamut: p3)——这个语法根本不存在。真正可用的是 color-gamut 这个媒体特性，但它只接受三个固定值：srgb、rec2020 和 p3，且仅在支持该色域的设备上才会匹配成功。
所以，要为不支持P3的屏幕做降级，得反过来：用 @supports (color-gamut: p3) 匹配支持者，再用 not 否定它。
-
@supports not (color-gamut: p3)是唯一可靠方式，覆盖绝大多数非P3设备（包括大部分Windows笔记本、旧Mac、Android中低端屏） - 注意：Safari 16.4+ 才开始稳定支持
color-gamut: p3；Chrome 和 Firefox 目前仍不支持该特性（截至2024年中），所以此查询在这些浏览器里恒为false，not后即恒为true——这反而有利于降级逻辑，但需意识到它不是“精确检测”，而是“安全保守 fallback” - 不要混用
(display-p3)或color(display-p3 ...)在@supports中——这些是颜色函数，不是媒体特性，会直接报无效语法
为什么不能用 @media (color-gamut: srgb)
@media (color-gamut: srgb) 看似合理，但问题很大：几乎所有设备都报告 srgb，哪怕它物理上支持P3。这是因操作系统或浏览器常默认以sRGB为渲染上下文上报，导致该查询几乎永远为真，完全无法区分P3能力。
- 实测：M1 MacBook Pro 在 Safari 中既匹配
(color-gamut: srgb)，也匹配(color-gamut: p3)；但 Windows 笔记本只匹配前者 - 这意味着
@media (color-gamut: srgb)不能作为“不支持P3”的依据——它只是底线，不是边界 - 同理，
@media (color-gamut: rec2020)更不可靠，目前几乎没有消费级设备真实上报它
实际 fallback 写法示例
典型场景是用 color(display-p3 ...) 写主色调，同时给老设备回退到 rgb() 或 hsl()。关键在于把P3色值放在 @supports 块内，而降级色值放在外层或 not 块里：
立即学习“前端免费学习笔记（深入）”；
.card {
background-color: rgb(255, 100, 100); /* 默认：sRGB fallback */
}
<p>@supports not (color-gamut: p3) {
.card {
background-color: rgb(255, 100, 100); /<em> 显式重复，确保旧环境不被覆盖 </em>/
}
}</p><p>@supports (color-gamut: p3) {
.card {
background-color: color(display-p3 1.0 0.39 0.39); /<em> 仅P3设备生效 </em>/
}
}- 必须把 fallback 放在
@supports not外面（或里面），否则 Chrome/Firefox 因不识别color-gamut会跳过整个块，导致无样式 - 避免写成
@supports (color-gamut: p3) { ... } @else { ... }——CSS 没有@else - 如果使用 PostCSS 或构建工具，注意它们可能错误地移除“不支持的”媒体查询；建议关闭相关 purge 功能
容易被忽略的兼容性陷阱
最隐蔽的问题不是语法错，而是渲染链路断裂：即使 CSS 正确加载了 color(display-p3 ...)，若图像资源本身是 sRGB 编码（如 PNG/JPEG 默认），或 <canvas></canvas> 绘制未启用 P3 上下文，整体视觉仍无法体现广色域优势。
-
color(display-p3 ...)只影响 CSS 颜色计算，不自动转换图片或 SVG 渲染——需单独导出 P3 标注的 PNG，并用image-rendering: -webkit-optimize-contrast等辅助（效果有限） - iOS Safari 对
color(display-p3)的 alpha 支持不稳定；建议避免color(display-p3 1 0 0 / 0.5)，改用rgba()fallback - macOS Safari 16.4 之前版本虽支持 display-p3 函数，但
color-gamut: p3媒体查询返回undefined，导致@supports不触发——此时降级逻辑依然有效，但主动启用P3色值的代码不会运行
P3 色域适配本质是渐进增强，@supports not (color-gamut: p3) 是目前最务实的守门员，但它拦不住所有旧环境，也管不了图片和字体渲染——得配合资源交付策略一起看。
