本文件是高畫質 CSS 顏色指南的一部分。
如要更新網路專案顏色以支援寬幅螢幕,您有兩種主要的策略:
安全降級:使用新的色彩空間,並讓瀏覽器和作業系統根據螢幕功能判斷要顯示的顏色。
漸進式強化:使用
@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
媒體查詢:
@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);
}
}
使用 Chrome 開發人員工具偵錯顏色
Chrome 開發人員工具已更新,並提供各種新工具,可協助開發人員製作、轉換及偵錯 HD 高畫質色彩。
已更新顏色挑選器
顏色挑選器現在支援所有新的顏色空間。讓作者能夠像往常一樣與頻道值互動。
環狀界線
也新增了四面邊界線,在 srgb 和 display-p3 色域之間繪製線條。清楚指出所選色彩位於哪個色域。
這可讓作者清楚辨別 HD 高畫質和非 HD 高畫質色彩。使用 color()
函式和新的色彩空間時特別實用,因為這兩者能夠產生非 HD 高畫質和 HD 高畫質的色彩。如要查看顏色目前套用的色域,請彈出顏色挑選器,看看!
轉換顏色
多年來,開發人員工具能協助在支援的格式 (例如 hsl、hwb、RGB 和十六進位) 之間轉換顏色。在「Styles」窗格中的正方形色樣按下 shift + click
,即可執行這項轉換。新的色彩工具不只循環轉換,還會顯示對話方塊,讓作者查看及挑選想要的轉換。
轉換時,請務必瞭解轉換是否貼合空間。開發人員工具現在會針對轉換後的顏色顯示警告圖示,提醒您觀看此裁剪。
進一步瞭解 開發人員工具中的 CSS 偵錯功能。
後續步驟
更鮮豔、一致的操弄和內插方式,整體上可為使用者提供更繽紛的體驗。
歡迎從指南中查看更多顏色資源。