@supports (color: color(display-p3 0 0 0)) 是唯一可靠检测方式，因@media (color-gamut: p3) 仅反映硬件能力而非 css 解析支持，且旧版 safari、firefox 等不支持或忽略该语法；fallback 必须写在 @supports 外层，否则不生效。
@supports (color: color(display-p3 0 0 0)) 是唯一能可靠检测浏览器是否支持 color(display-p3) 的方式，@media (color-gamut: p3) 完全不能替代它。
为什么 @media (color-gamut: p3) 检测无效
这个媒体查询只反映设备硬件能力，不表示 CSS 引擎能解析 color(display-p3)。Firefox 不支持该查询；Chrome/Safari 即使命中 @media (color-gamut: p3)，也不会自动启用 color(display-p3) 解析——引擎不支持时，整条声明直接被丢弃，连 fallback 都不会走。
- 它返回 true 并不等于你能用
color(display-p3 1 0 0) - 旧版 Safari（如 16.3 及更早）即使在 P3 屏上也完全忽略该函数
- 把
@supports嵌套在@media里反而增加失效概率，别这么做
@supports 检测必须写成完整语法
不能简写为 @supports (color: color(display-p3)) —— 浏览器会因语法不完整直接报错并跳过整个块。必须提供合法、可解析的值：
- 正确写法：
@supports (color: color(display-p3 0 0 0)) - 也可用
@supports (color: oklch(0% 0 0))，oklch()支持更广，且是基础色函数，检测更稳 - 检测
color-mix()要更谨慎：@supports (background: color-mix(in srgb, red, blue))，只写color-mix()会被当语法错误丢弃
fallback 必须写在 @supports 外层
这是最容易被忽略的关键点：CSS 不会“降级执行”@supports 块内的声明。如果 @supports 条件不满足，整个块被跳过，里面的所有样式都不生效。
- 错误写法：
@supports (...) { color: #FF6B6B; color: color(display-p3 1 0.42 0.22); }→ 不支持时，#FF6B6B也丢了 - 正确顺序：先写
color: #FF6B6B;（基础 fallback），再用@supports块覆盖为color: color(display-p3 1 0.42 0.22); - 所有现代浏览器（Chrome 111+、Safari 16.4+、Firefox 117+）都支持
color(srgb)，但color(display-p3)仍需单独验证
真机调试时，仅靠 DevTools 模拟没用：必须在 macOS/iOS 真机 + Chrome 117+/Safari 16.4+ 环境下验证，且确保页面启用了硬件加速（比如有 transform 或 will-change）。任何空格缺失、小数点写成逗号、alpha 没用 / 分隔，都会让整条 color(display-p3) 声明静默失效 —— WebKit 尤其严格，连多一个空格都不行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
