[每周一译]color-adjust的应用前景

Open Web持续出现在我们原本无法想象的地方：我们的手机，电视，手表，书籍，视频游戏机，快餐菜单，燃气泵，电梯，汽车，甚至我们的冰箱。

不用对怎么使用web进行太对严格的假设，它自身就很灵活而且很具适应性。这些特性使其能够超越Flash和Silverlight等封闭技术。

随着网络的发展，新功能可以更好地适应新的外形和用例。其中使我兴奋的一个特性是，在css颜色模块等级4(CSS Color Module Level 4)提出的，color-adjust属性。这是对网络将继续出现在具有不太出色的显示器的设备上的认可。

color-adjust具有两个值可以设置：economy和exact。

设置exact值就是告诉浏览器不要调整样式表中声明的颜色值。

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

color-adjust: exact;示例中的这句代码要求浏览器去尽可能地渲染.card中的所有准确颜色。准确意味着基于设备最佳能力的尽可能接近的颜色。

economy在文档中的描述是：用户代理应该在输出设备必需的情况下，谨慎地对页面样式进行调整。economy把信任放在浏览器手中，允许它根据需要调整颜色值。

将控制权交给浏览器起初看起来可能有点可怕，但是作为一个行业，我们真的非常擅长处理色彩问题。颜色的使用，包括适当的对比度，是设计中非常重要的一个方面，并且经常会成就或者毁坏一个作品。

但我们需要明白的是，我们的柏拉图式理想设计可能无法在现实世界中预期实现。不是每个人都拥有一个具有豪华DCI-P3色彩空间的Retina显示器的设备，他们也不总是拥有完美的视野或理想的光线，在这种情况下，最好是做出调整，而不是一拍两散。

我们现在生活在移动，小型，纵向，慢速，交错，单色，粗糙，非悬停的第一世界。能力有限的彩色显示器并不像您想象的那么罕见，随着时间的推移可能会变得越来越普遍。我特别想吸引低收入人群和新兴市场对互联网使用的使用兴趣。

截止至本文发表，浏览器支持性如下：（资料来源MDN）

这里写图片描述

在我们深入讨论之前，我想说明的一点是下面仅仅是基于W3C规范中的个人观点。

我认为color-adjust属性是可以在body选择器中使用的属性之一，因为它可以充分利用级联选择器（即子类可以集成这个属性）

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

该这个代码说明：“每次我在本网站声明颜色时，请使用我指定的值。如果你做不到，就做你认为最好的事情。“这比浏览器试图不惜一切代价解释样式指令要好得多，可能会使页面变得难以辨认。

您可以以更具体的方式声明颜色调整，例如嵌套@supports中，但这没什么必要。它无法适应高对比度模式和即将推出的色域媒体功能等内容。让我们更好地拥抱未知并投入广泛的网络吧。

我也非常想知道color-adjust如何与其他浏览器功能结合使用，比如：Ambient Light Sensor API。如果有机会尝试其他专门的显示模式：macOS夜视模式，增加对比度，灰度和减少透明度，这将是多么牛×的事情啊。

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

话虽如此，我认为color-adjust并不是所有与颜色相关的可访问性问题的灵丹妙药。我们无法始终了解我们的网站和网络应用程序将显示的设备和上下文，包括color-adjust最终呈现的颜色。因此，要注意颜色对比度仍然很重要。

color-adjust感觉就像Jen Simmons的内在网页设计的自然延伸：流畅和柔软的UI，按比例调整尺寸，根据需要进行媒体查询，以及执行繁重任务的简单声明。

CSS 级联的美妙之处在于您可以优雅地创造，然后根据需要进行调整。color-adjust的文档特别提到了这样一种情况，即确保在打印时保留表格的斑马条纹以使其更易于阅读。这样的调整可以限定为单个选择器，而不必花时间为每个其他组件撤消它。

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

tr {
  color-adjust: exact;
}

CSS’容错的美妙之处在于意味着不理解这个声明的浏览器会忽略它并继续解析样式表的其余部分。支持它的浏览器可以利用它，无需任何复杂的构建工具配置或危险的用户代理嗅探。

让我们的网站和网络应用程序设计适应用户的环境和情况非常重要，而不是相反。良好的用户体验可以满足用户的需求，而不是我们希望的用户体验。