color-adjust 属性的可能性

color-adjust 属性已重命名为print-color-adjust。

开放网络继续出现在我们从未预料到的地方：我们的手机、电视、手表、书籍、游戏机、快餐菜单、加油泵、电梯、汽车——甚至我们的冰箱。

通过不对网络的使用方式做出过多或过于严格的假设，它保持灵活和适应性。这些特性使其性能优于 Flash 和 Silverlight 等封闭技术。

随着网络的发展，出现了新的功能来更好地适应其新的外形规格和用例。我感到兴奋的一项功能是 color-adjust 属性，它在 CSS 颜色模块级别 4 中提出。它承认网络将继续出现在显示效果不佳的设备上。

color-adjust有两个值：economy 和 exact。值为 exact 告诉浏览器不要调整样式表中声明的颜色。

.card { 
  background-color: #98b3c7;
  border-bottom: 0.25rem solid #7c92a3;
  color: #f3f3f3;
  color-adjust: exact;
  ...
}

此示例中的 color-adjust: exact; 声明强制浏览器在任何应用了 card 类的元素上尽可能准确地呈现所有颜色。准确的意思是根据主机设备的最佳能力尽可能接近。

economy 值的描述 在规范中 读取为：“用户代理应根据其认为对输出设备必要和谨慎的方式调整页面的样式。” 它将信任置于浏览器的掌控之中，允许它根据需要调整颜色值。

最佳能力

一开始，将控制权交给浏览器可能看起来有点可怕。作为一个行业，我们非常擅长 对颜色系统进行无休止的争论。这是一件好事！颜色的使用，包括正确的对比度比率，是设计中一个非常重要的方面，并且常常可以 成就或毁掉一个产品。

但我们需要了解，我们理想化的设计可能无法在现实世界中按预期体验。并非每个人都拥有能够输出到具有豪华 DCI-P3 色域的视网膜显示屏的设备；他们也不总是拥有 完美的视力 或理想的照明条件。在这种情况下，最好是弯曲，而不是断裂。

我们现在生活在一个 移动、小屏幕、纵向、缓慢、隔行扫描、单色、粗糙、无悬停、优先 的世界。有限的颜色显示屏并不像你想象的那么罕见，并且随着时间的推移，可能会变得越来越普遍。我特别想提请注意 低收入人群 和 新兴市场 对互联网使用的增加。随之而来的是更便宜的设备和质量较低的显示屏。

浏览器支持

在本文发布时，color-adjust 从 Firefox 48（以及 Android Firefox 60）开始支持。

Chrome 和 Safari（这两个都是 WebKit 浏览器）需要 -webkit-print-color-adjust 的供应商前缀声明。奇怪的是，-webkit-print 表示他们对该属性的实现仅适用于打印。虽然 W3C 文档 提到了打印的用例，但措辞的方式并非仅限于此。

人们仍然打印网页！纸张不需要数据计划，也不会在您进入地下时断开连接。就在昨天，我看到火车上有人用一叠打印的网站来学习他们下一次考试的内容。这是您的思维闪光时刻：打印页面只是有限的颜色显示器。

如果我不提及打印样式丢失或编写不佳的情况，我可能会失职，这可能会 迫使打印机浪费墨水 以尝试执行样式表要求的操作。打印机墨水 贵得离谱——注意这一点可以为您的（或您 IT 部门的）预算提供帮助。

潜在用途

在我们继续之前，我想声明以下内容都是基于 W3C 规范中措辞的个人推测——目标是打印，但不限于打印。

我认为 color-adjust 可能是那些可以在 body 选择器中明确声明的属性之一，它可以在那里最好地利用级联。

body {
  color-adjust: economy;
  ...
}

此声明表示：“每次我在此网站中声明颜色时，都使用我指定的颜色值。如果您做不到，没关系——请根据您认为最好的方式操作。” 这比浏览器不惜一切代价尝试逐字解释样式指令要好得多，这可能会导致页面完全无法阅读。

您可以更具体地声明 color-adjust，例如嵌套在打印媒体查询内的 @supports at-rule 中，但这是不必要的额外工作。它将无法适应诸如 高对比度模式 和 即将推出的色域媒体功能 之类的东西。最好是拥抱未知并撒下一张大网。

我非常好奇地想看看 color-adjust 如何与其他浏览器功能结合使用，例如 环境光传感器 API（RIP 电池状态 API）。如果有机会试验其他专门的显示模式，那将很酷——macOS 的 夜间模式、提高对比度、灰度和降低透明度 选项都浮现在脑海中。

关于可访问性的说明

我想知道是否可以编写软件（浏览器首选项切换或扩展、书签工具等）来覆盖设备硬件报告的自身内容。就像 用户代理欺骗 一样，它可以“欺骗”浏览器使其认为它具有有限的颜色显示屏，使用 economy 来强制文本和背景颜色之间更好的对比度。这将类似于某些 浏览器的阅读模式，只是页面布局会得到更好的保留。

话虽如此，我认为 color-adjust 并不是所有与颜色相关的可访问性问题的灵丹妙药。我们无法始终知道我们的网站和 Web 应用将在什么设备和上下文中显示，包括 color-adjust 最终会呈现什么颜色。因此，仍然需要 注意您的颜色对比度比率。

弯曲，而不是断裂

color-adjust 感觉像是 Jen Simmons 的内在 Web 设计 的自然延伸：流畅且灵活的 UI、比例缩放、按需媒体查询以及执行繁重工作的简单声明。

CSS 级联的优点在于，您可以 优雅地创建意图，然后根据需要进行调整。color-adjust 的文档专门提到了一种情况，在这种情况下，它可能有助于 确保表格的斑马线在打印时得以保留 以便于阅读。这样的调整可以限定到单个选择器，而无需花费时间为每个其他组件撤消它。

body {
  color-adjust: economy;
  ...
}

tr {
  color-adjust: exact;
}

CSS 容错性的优点在于，不理解此声明的浏览器将忽略它并继续解析样式表的其余部分。支持它的浏览器可以利用它，而无需任何复杂的构建工具配置或 危险的用户代理嗅探。

务必使我们的网站和 Web 应用设计适应用户的环境和情况，而不是相反。良好的用户体验会满足用户所在的位置，而不是我们希望他们所在的位置。