本文档是高清 CSS 颜色指南的一部分。
更新 Web 项目颜色以支持的主要策略有两种 广色域显示屏:
优雅降级:使用新的颜色空间,并让浏览器和 操作系统根据显示功能确定要显示的颜色。
渐进式增强:使用
@supports
和@media
评估 用户浏览器的功能,并且如果满足条件,则提供广泛的 色域。
如果浏览器无法识别 display-p3
颜色:
color: red;
color: color(display-p3 1 0 0);
如果浏览器能够理解 display-p3
颜色:
color: red;
color: color(display-p3 1 0 0);
每种方法各有优缺点。这里列出了一些 缺点:
优雅降级
- 优点
<ph type="x-smartling-placeholder">
- </ph>
- 最简单的路线。
- 如果不是广色域显示,浏览器色域会映射或限制到 sRGB; 因此责任由浏览器承担
- 缺点
<ph type="x-smartling-placeholder">
- </ph>
- 浏览器可能会将色域限制或色域映射到您不喜欢的颜色。
- 浏览器可能无法识别颜色请求,并完全失败。不过, 可以通过指定两次颜色来减少这种情况, 它能理解的前一种颜色。
渐进式增强
- 优点
<ph type="x-smartling-placeholder">
- </ph>
- 通过受管理的色彩保真度实现更多控制。
- 一种不影响当前颜色的添加策略。
- 缺点
<ph type="x-smartling-placeholder">
- </ph>
- 您需要管理两种不同的颜色语法。
- 您需要管理两种不同的色域。
检查是否支持色域和颜色空间
浏览器允许检查是否支持广色域功能和色彩 CSS 和 JavaScript 支持的语法。用户拥有的确切颜色色域 不可用,提供的答案较为笼统,因此可保护用户隐私 。但可以提供确切的颜色空间支持,因为 与色域等用户硬件功能相关
色域支持查询
以下代码示例会检查访问用户在他们的 。
通过 CSS 查看
最具体的支持咨询是
dynamic-range
媒体查询:
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
@media (dynamic-range: high) {
/* safe to use HD colors */
}
您可以咨询
color-gamut
媒体查询:
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
@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()
函数,并向其传递用于评估的媒体查询。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
查询:
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
@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 开发者工具已更新,并且配备了可帮助开发者的新工具 创建、转换和调试高清颜色。
已更新颜色选择器
颜色选择器现在支持所有新的颜色空间。允许作者 与渠道值的互动方式与往常一样。
色域边界
还添加了色域边界线,在 srgb 和 display-p3 色域。指明所选颜色所在的色域。
这有助于作者在视觉上区分 HD 颜色和非高清颜色。
在使用 color()
函数和新的
颜色空间,因为它们能够同时生成非高清颜色和高清颜色。如果
想查看你的颜色所处的色域,请弹出颜色选择器,你就可以看到!
转换颜色
开发者工具能够在受支持的格式(例如 hsl、
hwb、RGB 和十六进制。shift + click
的方形色样上
样式窗格中执行此转换。新的配色工具不仅仅可以循环显示
它们会显示一个对话框,供作者查看和选择
。
在进行转化时,请务必了解转化数据是否经过了裁剪以符合 空间。开发者工具现在会显示一个关于转换后颜色的警告图标,用于提醒您
![开发者工具色域裁剪的屏幕截图,颜色旁边有一个警告图标。](https://developer.chrome.google.cn/static/docs/css-ui/migrate-hd-color/image/devtools-informing.png?authuser=9&hl=lt)
详细了解 DevTools 中的 CSS 调试功能。
后续步骤
更加鲜明的色调、一致的处理和插值效果, 为用户提供更加丰富多彩的体验
阅读更多颜色资源 。