此页面由 Cloud Translation API 翻译。

迁移到高清 CSS 颜色

Adam Argyle

更新 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 媒体查询：

浏览器支持

98
98
100
13.1

来源

@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);
  }
}