已加载全部内容

网页中使用 Display-P3

链接
分类
文章开发设计2022-10-29 10:00:00
简介

网页 Display-P3 色域显示曾为 Safari 独占功能，Chrome 108 将通过开启相关 flag 支持，可以提前了解一下相关技术。

相似条目

笔记

Beta
CSS

Display P3 是文章重点介绍的更高色域空间，可实现比 hotpink 更鲜艳的粉色，例如 color(display-p3 1 0 0.87)。Safari 已支持，Chrome 正在推进；文中展示了如何在支持的设备上使用该色彩并提供回退。

CSS

文章详细演示了用自定义属性存储 Display P3 色彩，如 --hotterpink: color(display-p3 1 0 0.87)。由于 var() 回退机制无法直接判断色彩有效性，需结合其他策略实现跨浏览器兼容。

CSS

作为替代方案，文章介绍用 @property 注册 --hotpink 为 类型并设置初始值 hotpink，再在支持环境下覆盖为 Display P3 色彩。未支持 Display P3 的浏览器将保留初始值，实现优雅降级，但目前仅 Chromium 浏览器支持。

CSS

读者 Jane Ori 提供第三种方案：结合 @supports 与 CSS Space Toggle，在同一规则集中同时定义偏好色彩与回退值。无 Display P3 支持时，变量变为无效值从而触发 hotpink 回退，兼顾了前两种方法的优点。

CSS

本文指出 @media (color-gamut: p3) 仅检测设备硬件是否支持 P3 色域，而非浏览器本身是否理解 display-p3 颜色函数。在 MacBook Pro 等支持 P3 的设备上，即使浏览器不支持 display-p3，该查询仍可能返回 true，导致回退逻辑失效。

Coding CSS

文中介绍使用 postcss-color-function 插件可自动把 display-p3 等高色域颜色转换为 sRGB 兼容的 rgb() 值。开启 preserve 选项后，插件会同时输出两种声明，并用 @supports 包裹高色域版本，实现自动渐进增强。

Coding CSS

文章提到 Josh Vickerson 编写的 Sass mixin「prefer」可按偏好顺序接收多个属性值。该 mixin 会反向输出声明，使更丰富的颜色值排在后面，从而让支持的浏览器优先使用 display-p3 颜色，不支持的浏览器则回退到 sRGB 值。

CSS

文中展示使用 @supports(background: color(display-p3 1 1 1)) 进行特性检测，仅在浏览器支持时声明 Display P3 色彩变量。该方法可让 --hotpink 在支持环境下继承 Display P3 值，否则回退至 hotpink。

CSS

文章指出网页颜色目前受限于 sRGB 色域，难以呈现更丰富的色彩，需逐步升级以支持更高色域。作者将其比作「sRGB 监狱」，强调即将通过新色彩函数和空间打破这一限制。

该分类暂无内容
该分类暂无内容
CSS

文章指出网页颜色目前受限于 sRGB 色域，难以呈现更丰富的色彩，需逐步升级以支持更高色域。作者将其比作「sRGB 监狱」，强调即将通过新色彩函数和空间打破这一限制。

CSS

文中记录 Brandon McConnell 在 CSS Working Group 提交 issue，请求原生 prefer() 函数以实现类似 Sass mixin 的多值偏好语法。该提案与 Tab Atkins 两年前提出的类似 issue 相关，目前已进入讨论但尚未推进。