color()函数目前不支持印刷专色，仅display-p3广色域空间在safari 16.4+、chrome 117+等有限支持；需用@supports检测并提供srgb回退，且仅在p3屏幕生效。
color()函数在现代浏览器中是否支持Display P3
不支持——color() 函数目前（截至 2024 年中）**尚未被任何主流浏览器实现**，包括 Chrome、Firefox、Safari。它仍停留在 CSS Color Module Level 4 的草案阶段，color(display-p3 1 0 0) 这类写法会直接被忽略或触发解析错误，不会渲染出广色域红色。
你看到的某些演示或文档示例，基本都依赖于开发者工具模拟、PostCSS 插件预处理，或服务端 CSS 转译，而非原生运行时支持。
Safari 中真正可用的 Display P3 写法只有 color(display-p3 ...) 吗
不是。Safari（macOS/iOS 16.4+）是目前唯一原生支持广色域色彩空间的浏览器，但它只认一种语法：color(display-p3 r g b)，且仅限于 <color></color> 值上下文（如 background-color、border-color），不接受 color() 函数的其他语法变体（如 color(srgb ...) 或带 alpha 的四参数形式）。
注意以下关键点：
-
color(display-p3 1 0 0)是合法且有效的，渲染为 Display P3 红色（比 sRGB 更饱和） -
color(display-p3 1 0 0 / 0.8)在 Safari 17+ 支持，但必须用斜杠语法，不能写成color(display-p3 1 0 0, 0.8) - 该语法**不支持命名参数**，顺序固定为 R G B（或 R G B / A），不能写成
color(display-p3 red 0 0) - 若 Safari 检测到设备不支持 P3（如旧款 MacBook Pro），会自动 fallback 到 sRGB，无需手动降级
如何安全地为 P3 屏幕提供颜色，同时兼容旧浏览器
必须采用「渐进增强」策略：先写 sRGB 基础色，再用 @supports 覆盖 P3 色值。Safari 对 @supports color(display-p3 0 0 0) 的检测是可靠的，而其他浏览器会跳过整个块。
实操建议：
- 始终把 sRGB 版本放在前面，例如：
background-color: #ff0000; - 用
@supports (color: color(display-p3 0 0 0))包裹 P3 声明 - 避免在同一个声明里混用不同色空间（如
background: linear-gradient(color(display-p3 1 0 0), #ff0000)），渐变中 P3 色会失效 - 不要依赖 CSS 变量间接传递 P3 值，如
--p3-red: color(display-p3 1 0 0); background: var(--p3-red);—— Safari 目前不支持变量内存储color()值
button {
background-color: #ff0000;
}
@supports (color: color(display-p3 0 0 0)) {
button {
background-color: color(display-p3 1 0 0);
}
}
为什么用 color(display-p3 ...) 有时看起来和 sRGB 没区别
常见原因有三个，按优先级排查：
- 开发环境未启用 P3 输出：macOS 需在「系统设置 → 显示器 → 颜色」中选择 P3 色彩描述文件；Windows/Linux 下多数显示器默认无 P3 profile，浏览器无法启用 P3 渲染管线
- CSS 未生效：检查是否被更高优先级规则覆盖，或
@supports条件未命中（可临时改写为@supports (all)测试） - 内容被强制转码：如果页面设置了
<meta name="color-scheme" content="light dark">或启用了深色模式，部分 Safari 版本会对 P3 色做隐式 tone-mapping，导致视觉差异减弱
最可靠的验证方式是用 macOS 自带「数字颜色计数器」（Digital Color Meter）切换到「Display P3」模式，悬停取色看 RGB 数值是否超出 sRGB 范围（例如 R > 1.0 或 G/B > 1.0 是可能的，但实际显示值会被裁剪）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
