@supports (color: color(display-p3 0 0 0))是唯一可靠检测方式，必须带color:前缀、参数为0.0–1.0三位小数三元组；@media (color-gamut: p3)仅检测硬件能力，无法验证浏览器是否支持该语法解析。
@supports (color: color(display-p3 0 0 0)) 是唯一可靠检测方式
直接用 @media (color-gamut: p3) 检测会误判——它只看设备是否上报 P3 能力，不验证浏览器能否解析 color(display-p3) 语法。Safari 16.3、Chrome ≤116、Firefox 全版本都会匹配该媒体查询，却静默忽略 color(display-p3) 声明，元素可能变透明或继承默认色。
正确做法是用 @supports 测试 CSS 引擎本身：
- 必须带 color: 前缀，写成 @supports (color: color(display-p3 0 0 0))
- 参数必须是三位小数三元组，@supports (color: color(display-p3 #FF0000)) 或 @supports (color: color(display-p3 255 0 0)) 均非法，整条规则被跳过
- Safari 16.4+、Chrome 117+（macOS）、Edge 116+（macOS）返回 true；其余基本为 false
别把 @supports 套在 @media 里
叠加使用反而增加失效概率。实测中，@media (color-gamut: p3) { @supports (color: color(display-p3 0 0 0)) { ... } } 在部分 iOS Safari 版本下会导致整个块被跳过。
应该分开写，优先保证 @supports 的独立性：
- 先用 @supports 包裹 P3 颜色声明
- 再用 @media (color-gamut: p3) 单独加载 P3 优化的图片或渐变资源（如高饱和度背景图）
- 两者逻辑解耦，失败时互不影响
JS 运行时检测要双重确认
仅靠 window.matchMedia("(color-gamut: p3)").matches 不够——它在 iOS Safari 页面首次加载后可能返回 false，需延迟 10ms 再查。
安全的 JS 判断逻辑是：
- 先调 CSS.supports("color", "color(display-p3 0 0 0)")，确认语法支持
- 再调 window.matchMedia("(color-gamut: p3)").matches，确认设备能力
- 两者同时为 true，才可注入 P3 颜色或切换资源
- 注意：Safari 在 DOMContentLoaded 后立即调用 matchMedia 可能不准，建议加 setTimeout(..., 10)
HTML 和渲染上下文常被忽略
即使 @supports 和 matchMedia 都通过，仍可能渲染失败，因为 P3 渲染需要完整上下文链：
-
<meta name="color-scheme" content="light dark">必须存在且放在最顶部，否则某些 iOS Safari 版本拒绝启用 P3 渲染管线 - 父元素若含
opacity、filter或transform，会强制整层叠上下文回退到 sRGB，P3 颜色立刻发灰或偏橙 - 真机调试必须在 macOS 或 iOS 上进行——Windows/Linux 不走 display-p3 渲染路径，本地开发服务器看不到效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
