旧版 safari（≤16.3）会静默忽略 color(display-p3) 声明，导致颜色失效、文字消失或背景变白/黑；必须用双声明+@supports 包裹，fallback 色前置，且需确保系统广色域开启、color-scheme meta 标签置顶、css 中声明 color-gamut: p3。
旧版 Safari 会静默忽略 color(display-p3)，不是变淡，是没颜色
直接写 color: color(display-p3 0.98 0.35 0.35); 在 Safari ≤16.3（包括 iOS 16.2 及更早）中会被整条跳过，不报错、不警告，color 值退回到继承色或透明——文字可能突然消失，背景可能变白或黑。这不是“颜色不准”，是根本没生效。
必须用双声明 + @supports 包裹，顺序不能错
@supports 不是可选装饰，而是 Safari 渲染链路的开关；fallback 必须前置，否则旧浏览器连保底色都拿不到：
-
color: #FF6B6B;→ 所有浏览器都认，必须写在第一行 -
@supports (color: color(display-p3 0 0 0)) { color: color(display-p3 0.98 0.35 0.35); }→ Safari ≥16.4 才进这个块，其他浏览器直接跳过整块 - 绝对不能反过来：把
@supports写在前面、fallback 放后面，IE11 和部分 Android WebView 会连 fallback 行也丢弃
color(display-p3) 的参数不能手算，也不能信自动转换插件
color(display-p3 1 0.42 0.42) 看似像 #FF6B6B 拆出来的，但这是错的——那是 sRGB 坐标，直接塞进 display-p3 会导致严重发灰。display-p3 接收的是线性 P3 色彩空间坐标（0–1），需专业工具从设计稿 P3 值转出，例如用 macOS 颜色面板导出「Display P3 (Linear)」格式，或用 color-convert 库指定 display-p3-linear 目标空间。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
PostCSS 插件如 postcss-color-hex-alpha 或在线转换器常做粗暴 clamp，尤其蓝紫/高饱和绿区域失真明显，实测对比建议用 Safari DevTools 的 Rendering 面板勾选 “Emulate Display P3” 验证。
移动端真机调试前，先确认三件事
即使语法全对，iPhone/iPad 上仍可能降级为 sRGB，因为 P3 渲染链路依赖系统层激活：
-
<meta name="color-scheme" content="light dark">必须放在最顶部，早于所有 CSS 引入 - CSS 中必须显式声明
html { color-gamut: p3; }，哪怕只是占位，缺了这句 Safari 就不启用 P3 pipeline - 用户系统设置里不能关掉“广色域显示”（macOS：显示器设置 → 广色域显示；iOS：辅助功能 → 色彩滤镜关闭）
漏掉其中任一环，window.matchMedia('(color-gamut: p3)').matches 返回 false，DevTools Rendering 面板显示 “Gamut: sRGB”，这时你写的 color(display-p3) 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
