@supports (color: color(display-p3 0 0 0)) 是唯一可靠检测方式，它验证浏览器是否支持 color() 函数及 display-p3 色彩空间解析能力，而非仅判断设备是否具备 p3 屏幕。
@supports (color: color(display-p3 0 0 0)) 是唯一可靠检测方式
其他方法全都不准：UA 字符串识别 Safari 或 Chrome、window.matchMedia("(color-gamut: p3)") 返回 true、甚至检查 navigator.userAgent.includes("Mac")，都可能误判或漏判。只有 @supports (color: color(display-p3 0 0 0)) 能真实反映浏览器是否已实现 color() 函数 + display-p3 空间解析能力。
这个检测不是“设备有没有 P3 屏”，而是“当前渲染管线是否能正确解析并应用 P3 色值”。它跨浏览器一致，在 Safari 16.4+、Chrome 111+（未禁用 css-color-adjust）、Firefox（需开启 layout.css.color-functional-notation.enabled）中均有效。
常见错误写法：
-
@supports (color: display-p3(1 0 0))—— 缺少color()外层函数，语法无效 -
@supports (color(display-p3 0 0 0))—— 少了冒号和属性名，不是合法特性查询 -
@supports (color: color(p3 1 0 0))——p3不是标准空间名，被当作未知标识符丢弃
为什么不能用 matchMedia("(color-gamut: p3)") 替代
window.matchMedia("(color-gamut: p3)").matches 只表示系统报告了广色域显示能力，不代表 CSS 引擎支持 color(display-p3)。例如：
- macOS 上启用了 P3 显示，但 Chrome 110 或更早版本仍不解析
color(display-p3)，此时matchMedia返回true，但颜色照样降级为 sRGB - iOS 16.3 中
matchMedia("(color-gamut: p3)")已返回true，但 Safari 直到 16.4 才启用color(display-p3)支持，中间存在断层 - 某些 Windows 设备上报
color-gamut: p3，但 Chromium 内核根本未实现 P3 渲染管线，color(display-p3)被静默忽略
换句话说：matchMedia 告诉你“硬件可能行”，@supports 告诉你“代码现在就能用”。
检测必须配合 fallback 且顺序不能错
写了 @supports 不等于颜色就安全了。CSS 解析是线性的，错误顺序会导致 fallback 完全失效。
✅ 正确写法（fallback 在前，增强在后）：
button {
background-color: #FF6B6B; /* sRGB fallback */
}
@supports (color: color(display-p3 0 0 0)) {
button {
background-color: color(display-p3 0.98 0.35 0.35);
}
}
❌ 错误写法（增强在前，fallback 在后）：
@supports (color: color(display-p3 0 0 0)) {
button {
background-color: color(display-p3 0.98 0.35 0.35);
}
}
button {
background-color: #FF6B6B;
}
原因：部分旧版 Chromium（如 Chrome 111 之前）遇到不认识的 @supports 块时，会跳过整条规则，但不会阻止后续普通声明；而如果 fallback 写在后面，它会被正常应用。但反过来，如果把 @supports 块放在前面，某些早期引擎会因解析失败而中断后续样式读取，导致连 fallback 都不生效。
检测通过也不代表颜色一定按预期显示
@supports 只保证语法可解析，不保证最终输出就是 P3 色域。以下情况仍会降级：
- 页面未启用广色域上下文：Chrome 需要
@media (color-gamut: p3)匹配，且不能有transform: translateZ(0)等强制 sRGB 合成的属性 - 颜色值本身超出 P3 色域：比如
color(display-p3 1.2 0.1 0.1)中的1.2会被截断为1.0，但坐标已偏移，结果失真 - 设计师给的是 sRGB 十六进制值，你直接换算成小数塞进
display-p3：这不是 P3 颜色，只是拿 P3 坐标系套了个 sRGB 数，必然偏色 - HTML 根元素没设
color-scheme: light dark，iOS Safari 可能拒绝激活广色域渲染
真正起作用的颜色，必须是从设计工具（Photoshop Proof Setup → Display P3 + Preserve Color Numbers，或 Figma P3 Color Picker 插件）导出的原生 P3 三元组，范围严格为 0.0–1.0，无单位，无空格逗号混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
