本頁面由 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 的廣域功能支援，以及色彩語法支援。未提供使用者的確切顏色差異，我們會提供一般化的答案，藉此維護使用者隱私。不過，由於不支援確切的色彩空間，而非使用者硬體 (例如 Gamut) 的功能。

色域支援查詢

下列程式碼範例會檢查造訪使用者螢幕的顏色範圍。

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