旧版浏览器（包括所有ie、safari）已严重滞后于现代web标准，ie11已于2023年8月终止支持，其兼容性问题阻碍css grid等新特性应用；safari旧版本对css级联层、容器查询等支持延迟，需依赖渐进增强或polyfill（如html5 shiv）实现有限兼容。
旧版浏览器（包括所有 IE、Safari color(display-p3)，会静默跳过整条声明——不是“颜色变淡”，是“颜色消失”，文字或背景可能变成透明或继承默认色。
必须用双声明 + HTML meta 协同生效
只写 color: color(display-p3 0.98 0.35 0.35); 或只加 <meta name="color-scheme" content="light dark"> 都无效。P3 渲染链路从 HTML 根层就需显式开启：
-
<meta>必须放在最顶部，早于所有 CSS 引入 - CSS 中必须先声明
color-gamut: p3（哪怕只是html { color-gamut: p3; }），再使用color(display-p3) - fallback 值必须前置且独立：先写
color: #FF6B6B;，再写color: color(display-p3 0.98 0.35 0.35);；顺序颠倒则旧浏览器无颜色
display-p3 参数不能手算，必须专业转换
color(display-p3) 接收的是线性 P3 色彩空间坐标（0–1），不是 sRGB 十六进制或百分比值。把 #FF6B6B 直接拆成 1, 0.42, 0.42 是错的——那是 sRGB 值，未经色域映射，结果严重发灰。
- 必须用 ColorSync Utility、Adobe Photoshop（启用 P3 工作空间）或可信在线工具（如
https://bottosson.github.io/misc/colorpicker/）转出真实 display-p3 坐标 - 不要信自动 postcss 插件的“一键转换”——它们常在蓝紫/高饱和绿区域做 clamp，视觉失真明显
- 移动端调试时，在 Safari DevTools 的 “Rendering” 面板勾选 “Emulate Display P3” 可验证是否真正生效
哪些地方根本不能用 display-p3？
Safari 对 color(display-p3) 的支持非常有限，仅限基础属性，其他一律回退到 sRGB：
- ✅ 支持：
color、background-color、border-color、outline-color - ❌ 不支持：
box-shadow、gradient（linear-gradient(color(display-p3 ...), ...)会被整段忽略）、text-shadow - ⚠️ Canvas 绘图必须额外声明上下文：
getContext('2d', { colorSpace: 'display-p3' })；否则即使填了color(display-p3)，也强制走 sRGB
P3 兼容的核心陷阱不在语法本身，而在渲染上下文是否被真正激活——color-gamut: p3 和 <meta> 缺一不可，且 fallback 必须是纯 sRGB 值、位置靠前、不能依赖任何现代函数或变量。一旦漏掉其中一环，用户看到的就不是“稍暗一点的红色”，而是彻底没颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
