@media (color-gamut: p3)仅检测设备P3能力，不触发颜色升级；要显示更鲜艳色必须用color(display-p3)函数配合@supports检测，并提供sRGB fallback。
不能靠 @media 查询“匹配 wide-gamut”来定义更鲜艳的颜色——wide-gamut 不是标准媒体特性，浏览器不支持 @media (color-gamut: p3) 以外的 gamut 检测，且该特性本身不触发颜色渲染升级。
为什么 @media (color-gamut: p3) 不能用来“设更鲜艳色”
这个媒体查询只回答“设备是否支持 P3 色域”，它不改变 CSS 颜色解析行为，也不自动把 rgb() 升级为 display-p3。写了 @media (color-gamut: p3) { color: rgb(255, 0, 0); }，结果仍是 sRGB 红色，不会变艳。
- 它常被误当作“高清屏开关”，实际只是个环境信号，和
prefers-color-scheme类似，需配合真正支持广色域的色彩语法才能生效 - Chrome 117+、Safari 16.4+ 支持该查询，但 Firefox 目前仍不支持（截至 2026 年 4 月）
- 即使查询命中，若 CSS 中混用
#ff0000或rgb(255, 0, 0)，浏览器依然强制走 sRGB 渲染路径，display-p3 色值被忽略
color(display-p3 ...) 是唯一可行的广色域颜色写法
要让 P3 屏显示更饱和的红/绿/蓝，必须显式使用 color() 函数，并指定 display-p3 空间。这是目前唯一被 Safari、Chrome/macOS、Edge 原生支持的方案。
-
color(display-p3 1 0 0)在 P3 屏上比rgb(255, 0, 0)更亮更艳；在 sRGB 屏上则降级为等效 sRGB 值（视觉无差别） - 必须用小数表示分量（0.0–1.0），不能写整数；空格不可省略；斜杠不能用于 alpha —— 错一个字符整条声明失效（WebKit 尤其严格）
- 透明度要用
/分隔：例如color(display-p3 1 0 0 / 0.8)，不是rgba()风格
必须用 @supports 包裹，不能依赖 media query
判断浏览器是否能解析 color(display-p3)，唯一可靠方式是 @supports (color: color(display-p3 0 0 0))。media query 的 color-gamut 只管硬件，不管引擎是否支持该语法。
- 示例写法：
@supports (color: color(display-p3 0 0 0)) { .hero-text { color: color(display-p3 0.9 0.2 0.3); } } - 别嵌套在
@media (color-gamut: p3)里——两者逻辑不同，叠加反而增加失效概率 - 基础 fallback 必须存在：
color: #cc3344;或color: rgb(204, 51, 68);要写在@supports外层，否则旧浏览器直接无颜色
真机调试时最容易忽略的三件事
写了 color(display-p3) 却看不出区别，90% 是以下某个环节断了：
- 开发机不是 P3 屏（比如 Windows 笔记本或普通 MacBook Air）——必须在真 P3 设备（如 M1/M2/M3 Mac、iPhone 12+、iPad Pro）上验证
- macOS 系统未启用 P3 描述文件：设置 → 显示器 → “颜色描述文件”里选 “Display P3”（Safari 对此敏感，Chrome 需手动开启
chrome://flags/#enable-color-gamut-media-query） - CSS 里父元素用了
color-scheme: light，但系统是深色模式，导致某些 UA 样式重置了 color 解析上下文（尤其影响color()的继承行为）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
