检测显示器是否支持广色域不能靠 color-gamut 媒体查询，而应使用 @supports (color: color(display-p3 0 0 0)) 直接验证 css 引擎对 display-p3 的解析能力；语法须严格符合规范，fallback 必须置于 @supports 外层，且需在 macos/ios 真机及新版浏览器中测试。
检测显示器是否支持广色域不能靠 color-gamut 媒体查询
写了 @media (color-gamut: p3) 并不能证明 color(display-p3) 会被解析——它只告诉浏览器“设备可能支持 P3”，但 Firefox 完全不支持该查询，Chrome/Safari 即使命中也不会启用 display-p3 渲染。真要安全启用广色域颜色，必须用 @supports (color: color(display-p3 0 0 0))，这个检测直接验证 CSS 引擎能力，不是硬件能力。
color(display-p3) 的写法容错率极低，错一个字符就整条失效
WebKit（Safari、新版 Chrome）对语法极其严格：
- 分量必须是
0.0–1.0范围内的小数，不能写255或100% - 三个分量之间必须用空格分隔，不能用逗号或制表符
- alpha 必须用
/分隔，写成color(display-p3 0.9 0.2 0.3 / 0.8)，不是color(display-p3 0.9, 0.2, 0.3, 0.8) - 任意错误（比如漏空格、多斜杠、整数）都会导致整条声明被忽略，且无警告
fallback 必须写在 @supports 外层，否则旧环境直接没颜色
很多人把基础色也塞进 @supports 块里，结果是：不支持的浏览器既不认 display-p3，也不执行 fallback —— 文字/背景变成透明或继承默认色。正确结构是：
button {
background-color: #cc3344; /* 兜底，所有浏览器都认 */
}
@supports (color: color(display-p3 0 0 0)) {
button {
background-color: color(display-p3 0.8 0.2 0.3 / 0.9);
}
}
注意：@supports 块不能嵌套在 @media 里，叠加会增加解析失败概率。
真机调试时看不到效果？大概率卡在这三个环节
写了 color(display-p3) 却和 rgb() 看不出区别，常见断链点：
- 没在 macOS 或 iOS 真机上测（Windows/Linux 浏览器根本不用 display-p3 渲染路径）
- 浏览器版本不够：Chrome 需
117+，Safari 需16.4+，旧版直接降级为 sRGB - 页面没启用硬件加速：缺少
transform: translateZ(0)或backface-visibility: hidden，display-p3 会被强制转成 sRGB 输出
色深本身无法被 CSS 直接读取，所谓“检测显示器色深”实际是检测渲染引擎是否支持广色域语法 + 硬件是否参与渲染，这两者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
