color(display-p3) 不会自动回退到 sRGB，必须手动前置声明 sRGB 值；@supports 需正确包裹且位置准确；background-color 易失效，推荐用 background-image 线性渐变；display-p3 色值须经专业工具转换，不可线性换算；父元素含 transform/opacity/filter 可能强制 sRGB 合成。
直接结论：color(display-p3) 不会自动“回退”到 sRGB，它要么生效，要么被整条忽略或静默降级——能否 fallback 完全取决于你是否主动写好 sRGB 备用声明，且包裹方式、位置、语法都必须正确。
为什么 @supports 包裹失效或根本没触发
常见错误是把 @supports (color: color(display-p3 0 0 0)) 放在规则末尾、嵌套在其他媒体查询里，或者漏掉括号闭合。Safari 16.3 及更早版本遇到不识别的 color(display-p3) 声明时，会跳过整条 CSS 规则（不是只跳过该属性），所以 fallback 必须写在同一条规则内、color(display-p3) 之前。
- ✅ 正确顺序：
color: #FF6B6B; color: color(display-p3 0.98 0.42 0.42); - ❌ 错误写法：
color: color(display-p3 0.98 0.42 0.42); color: #FF6B6B;（sRGB 值被覆盖，旧浏览器直接无视整行） - ⚠️ 注意：
@supports不能包裹变量定义（如:root { --p3-red: color(display-p3 1 0 0); }），CSS 自定义属性不支持条件解析
background-color 是最不可靠的 P3 使用场景
background-color: color(display-p3 1 0 0) 在 iOS Safari 和多数 Android WebView 中极易失效，底层绘制常绕过色彩管理，直接映射到 sRGB 输出空间。这不是 bug，是渲染管线限制。
- ✅ 更稳方案：
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0)); - ✅ 同时加透明底色防 fallback 失效：
background-color: transparent;（避免简写background:覆盖掉上面的background-image） - ❌ 别混用：
rgba()和color(display-p3)不共存，整条声明可能被跳过
sRGB fallback 值必须是真实等效色，不是简单换算
把设计稿里的 #FF6B6B 直接拆成 rgb(255, 107, 107) 再除以 255 得到 color(display-p3 1 0.42 0.42)，结果一定偏色——因为 sRGB 和 Display P3 是两个不重叠的色域三角形，数值不能线性映射。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确路径：在 Photoshop 中启用
View > Proof Setup > Custom→ Device to simulate 选 “Display P3” → 勾选 “Preserve Color Numbers” → 吸管取色后右键复制 “Display P3” 值（小数三元组） - ✅ Figma 用户必须用插件（如 P3 Color Picker）或导出时明确勾选 “Export as Display P3”
- ⚠️ 所有参数必须是 0.0–1.0 范围内的小数；
color(display-p3 100% 42% 42%)、color(display-p3 255 107 107)全部无效，浏览器静默忽略
最容易被忽略的一点：即使写了正确的 color(display-p3) 和 fallback，只要父元素用了 transform、opacity 或 filter，就可能触发 sRGB 强制合成，整层叠上下文回退——这种失效无法通过 CSS 检测，只能靠实机验证。
