本頁面由 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 語法使用者俱備的確切色彩提供一般解答，因此會提供使用者隱私例如：不過，提供確切的色域支援而是使用者硬體的功能

色域支援查詢

下列程式碼範例會查看訪客在網站中的色彩範圍螢幕。

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