本文档是高清 CSS 颜色指南的一部分。
更新 Web 项目颜色以支持广色域显示屏的方法主要有两种:
优雅降级:使用新的颜色空间,让浏览器和操作系统根据显示功能确定要显示的颜色。
渐进式增强:使用
@supports
和@media
评估用户浏览器的功能,如果满足条件,则提供广色域色彩。
如果浏览器无法识别 display-p3
颜色:
color: red;
color: color(display-p3 1 0 0);
如果浏览器理解 display-p3
颜色:
color: red;
color: color(display-p3 1 0 0);
每种方式各有优缺点。下面简要列出了其优缺点:
优雅降级
- 优点
- 最简单的路线。
- 如果不是广色域显示屏,浏览器色域会映射或限制到 sRGB,因此应由浏览器负责。
- 缺点
- 浏览器可能会针对您不喜欢的颜色实施色域限制或色域映射。
- 浏览器可能无法识别颜色请求,并完全失败。但是,可以通过指定两次颜色来缓解这种情况,让级联回退到它可以识别的上一个颜色。
渐进式增强功能
- 优点
- 通过受管理的色彩保真度实现更多控制。
- 不影响当前颜色的附加策略。
- 缺点
- 您需要管理两种不同的颜色语法。
- 您需要管理两种不同的色域。
检查是否支持色域和颜色空间
该浏览器允许检查是否支持 CSS 和 JavaScript 的广色域功能和颜色语法。无法获得用户的确切色域,而是提供了一个通用的答案,以便维护用户隐私。不过,可以提供确切的颜色空间支持,因为它并非特定于用户硬件的功能,例如色域。
色域支持查询
以下代码示例检查访问用户在其显示屏中显示的颜色范围。
通过 CSS 检查
最具体的支持查询是 dynamic-range
媒体查询:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
可以使用 color-gamut
媒体查询咨询大致支持或更多支持:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
此外,还有两个媒体查询可用于检查支持情况:
从 JavaScript 检查
对于 JavaScript,可以调用 window.matchMedia()
函数并向其传递媒体查询以进行评估。
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
您可为其余媒体查询复制上述模式。
颜色空间支持查询
以下代码示例检查了访问用户的浏览器以及它选择使用的颜色空间。
通过 CSS 检查
可以使用 @supports
查询来查询各个颜色空间支持情况:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
从 JavaScript 检查
对于 JavaScript,可以调用 CSS.supports()
函数并传递属性和值对,以查看浏览器是否可以理解。
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
整合硬件检查和解析检查
在等待每个浏览器实现这些新的颜色功能时,最好同时检查硬件功能和颜色解析功能。我经常用以下来将颜色逐渐增强为高清:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
使用 Chrome 开发者工具调试颜色
Chrome 开发者工具已更新,并配备了新工具,以帮助开发者创建、转换和调试高清颜色。
已更新颜色选择器
颜色选择器现在支持所有新的颜色空间。允许作者像与往常一样与频道值互动。
色域边界
此外,还添加了色域边界线,在 srgb 和 display-p3 色域之间绘制一条线。明确表示所选颜色属于哪种色域。
这有助于作者直观地区分高清和非高清颜色。与 color()
函数和新的颜色空间一起使用时,这种颜色尤为有用,因为它们能够生成非高清和高清颜色。如果您想查看所选颜色的色域,请弹出颜色选择器,直接查看!
转换颜色
多年来,开发者工具一直在支持的格式(例如 hsl、hwb、rgb 和十六进制)之间转换颜色。在“Styles”窗格中对方形色样添加 shift + click
,以执行此转换。新的颜色工具不仅会循环切换转化,还会形成一个对话框,供作者查看并选择所需的转化。
在转换时,请务必了解是否为了适应空间而截断转换。现在,开发者工具有一个警告图标,表示转换后的颜色会提醒您注意这一裁剪。
详细了解开发者工具中的 CSS 调试功能。
后续步骤
更加生动、一致的操作和插值,从整体上为用户提供更加丰富多彩的体验。
请阅读该指南,了解更多颜色资源。