color()函数目前仅safari 16.4+稳定支持display-p3，需用color(display-p3 r g b)语法（r/g/b为0–1浮点数），并配合@supports检测和真机实测验证，其他浏览器均不支持或需实验性flag。
color() 函数本身不支持 Display P3 色彩空间
直接写 color(display-p3 1 0 0) 在当前所有主流浏览器中都会被忽略或解析为无效值。CSS 的 color() 函数规范虽已纳入 display-p3，但实际实现严重滞后：Chrome 直到 117+ 才开始实验性支持（需开启 flag），Firefox 和 Safari 完全未实现。你看到的“能用”，大概率是误用了旧版草案语法，或混淆了 CSS 预处理器/PostCSS 插件的编译行为。
真正可用的 Display P3 写法只有 color(display-p3 ...)
必须使用标准语法 color(display-p3 r g b)，且 r/g/b 是 0–1 范围内的浮点数（不是 0–255）。例如红色应写成 color(display-p3 1 0 0)，而非 color(display-p3 255 0 0)。Safari 16.4+ 是目前唯一稳定支持该语法的浏览器，且仅限于 macOS Ventura/iOS 16.4 及以上系统；即使在 Safari 中，@media (color-gamut: p3) 也必须配合使用，否则会回退到 sRGB。
- 务必用
@supports (color: color(display-p3 0 0 0))做特性检测，不能只靠@media - Display P3 值不能从 sRGB 直接换算——需经 ICC 特性文件或专业工具（如 Apple ColorSync）转换，否则色偏明显
- 背景图、border-image 等非纯色场景，P3 支持更不可靠，建议优先用
background: linear-gradient(...)测试
替代方案：image-set() + PNG 资源兜底最稳妥
若目标是视觉上准确呈现 P3 色域（比如设计稿要求），与其依赖尚未落地的 CSS 语法，不如用资源级控制：background-image: image-set("red-srgb.png" 1x, "red-p3.png" 2x);。其中 red-p3.png 必须是嵌入 Display P3 ICC 配置文件的 PNG（用 Preview.app 或 Affinity Photo 导出时勾选“保留色彩配置”）。这样 Safari 会自动选用 P3 图，其他浏览器回退到 sRGB 图，效果可控。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 不要用 JPEG——它不支持嵌入 ICC 配置文件
- 确保 Web 服务器对
.png返回Content-Type: image/png，否则 Safari 可能拒绝加载 P3 图 -
image-set()的2x并非指 Retina 屏，而是告诉浏览器“此资源具备更广色域”，实际匹配逻辑由 UA 决定
Safari 开发者工具里看不到 P3 颜色预览
即使你写了正确的 color(display-p3 0.8 0.2 0.1)，Safari 的开发者工具颜色拾取器仍只显示 sRGB 近似值，且不标注是否启用 P3。验证是否生效的唯一可靠方式是：在真机（iPhone 12+ / iPad Pro 2021+）上打开页面，用系统“放大镜”辅助功能里的颜色检测器实测输出值，或对比同一色块在 Safari 和 Chrome 中的视觉差异。桌面端 macOS 的“数字颜色计”也能捕获窗口像素，但需关闭“缩放”和“透明度”等干扰项。
Display P3 不是开关式特性，它是软硬件协同链路——从 CSS 解析、GPU 渲染管线、显示器面板校准，到系统色彩管理策略，任何一环断裂都会静默降级。别信文档，以真机实测为准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
