本文件是高畫質 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 語法使用者俱備的確切色彩 提供一般解答,因此會提供使用者隱私 例如:不過,提供確切的色域支援 而是使用者硬體的功能
色域支援查詢
下列程式碼範例會查看訪客在網站中的色彩範圍 螢幕。
透過 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 和 十六進位 好幾年了。shift + click
位於以下區域的正方形顏色樣本上:
用於執行這項轉換的樣式窗格。新的色彩工具不只循環
完成後就會產生對話方塊,供作者查看並選擇
以及他們想要的轉換
轉換時,請務必瞭解轉換是否配合 空白鍵。開發人員工具現在會在轉換後的顏色顯示警告圖示,以此提醒 加入這個剪輯片段
![開發人員工具雜訊裁剪的螢幕截圖,顏色旁邊有警告圖示。](https://developer.chrome.google.cn/static/docs/css-ui/migrate-hd-color/image/devtools-informing.png?authuser=1&hl=zh-tw)
探索更多 開發人員工具中的 CSS 偵錯功能。
後續步驟
更振動、一致的操控和內插類型,整體上的整體表現 提供更繽紛多彩的使用者體驗
查看更多顏色資源