color(display-p3)是唯一能真正提升饱和度的写法，需用0.0–1.0小数、空格分隔、/分隔alpha；@supports (color: color(display-p3 0 0 0))才是可靠检测方式；fallback必须置于@supports外层；真机调试需macOS/iOS、Chrome 117+/Safari 16.4+及硬件加速。
color(display-p3) 是唯一能真正提升饱和度的写法
写了 @media (color-gamut: p3) 并不能让 rgb(255, 0, 0) 变艳——它只告诉浏览器“这设备支持 P3”，不改变颜色解析行为。真要更鲜艳，必须用 color(display-p3) 函数，且分量只能是 0.0–1.0 的小数，空格不可省略，alpha 必须用 / 分隔：color(display-p3 0.9 0.2 0.3 / 0.8)。任何字符错误（比如写成整数、漏空格、用逗号）都会导致整条声明被忽略，WebKit 尤其严格。
@supports 比 media query 更关键
判断浏览器是否支持广色域语法，不能靠 @media (color-gamut: p3)，因为 Firefox 不支持该查询，而 Chrome/Safari 即使命中也不会解析 color(display-p3)——除非引擎本身支持。唯一可靠方式是：@supports (color: color(display-p3 0 0 0))。这个检测直接验证 CSS 引擎能力，不是硬件能力。别把它嵌套在 media query 里，叠加反而增加失效概率。
fallback 必须写在 @supports 外层
没 fallback，旧浏览器或不支持 display-p3 的环境会直接无颜色。正确结构是：先写基础色（如 color: #cc3344 或 color: rgb(204, 51, 68)），再包裹 @supports 块覆盖。如果把 fallback 也塞进 @supports 里，等于放弃所有兼容性兜底。
真机调试时最容易断链的三个点
写了 color(display-p3) 却看不出区别，大概率卡在这三处：
• 没在 macOS 或 iOS 真机上测（Windows/Linux 不走 display-p3 渲染路径）
• 浏览器版本太低（Chrome 117+、Safari 16.4+ 才稳定支持）
• 页面未启用硬件加速（比如没设 transform: translateZ(0) 或 backface-visibility: hidden），导致 display-p3 被降级为 sRGB
立即学习“前端免费学习笔记（深入）”；
