此页面由 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);

每种方法各有优缺点。这里列出了一些缺点：

优雅降级

优点 <ph type="x-smartling-placeholder">
- 最简单的路线。
- 如果不是广色域显示，浏览器色域会映射或限制到 sRGB；因此责任由浏览器承担
缺点 <ph type="x-smartling-placeholder">
- 浏览器可能会将色域限制或色域映射到您不喜欢的颜色。
- 浏览器可能无法识别颜色请求，并完全失败。不过，可以通过指定两次颜色来减少这种情况，它能理解的前一种颜色。

渐进式增强

优点 <ph type="x-smartling-placeholder">
- 通过受管理的色彩保真度实现更多控制。
- 一种不影响当前颜色的添加策略。
缺点 <ph type="x-smartling-placeholder">
- 您需要管理两种不同的颜色语法。
- 您需要管理两种不同的色域。

检查是否支持色域和颜色空间

浏览器允许检查是否支持广色域功能和色彩 CSS 和 JavaScript 支持的语法。用户拥有的确切颜色色域不可用，提供的答案较为笼统，因此可保护用户隐私。但可以提供确切的颜色空间支持，因为与色域等用户硬件功能相关

色域支持查询

以下代码示例会检查访问用户在他们的。

通过 CSS 查看

最具体的支持咨询是 dynamic-range 媒体查询：

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

您可以咨询 color-gamut 媒体查询：

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

@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() 函数，并向其传递用于评估的媒体查询。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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 查询：

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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