本頁面由 Cloud Translation API 翻譯而成。

遷移至 HD CSS 顏色

Adam Argyle

更新網頁專案顏色以支援廣色域螢幕，主要有兩種策略：

優雅降級：使用新的色彩空間，讓瀏覽器和作業系統根據顯示功能判斷要顯示哪些顏色。
漸進式改善：使用 @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 是否支援廣角功能和顏色語法支援。我們不會提供使用者的確切色域，而是提供一般答案，以維護使用者隱私。不過，Google 可提供確切的色彩空間支援，因為它並不是使用者硬體的功能 (例如 gamut) 並不專用。

色域支援查詢

以下程式碼範例會檢查造訪使用者在螢幕上看到的顏色範圍。

透過 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);
  }
}