打印颜色调整 | CSS-Tricks

CSS 年鉴 → 属性 → P → print-color-adjust

Sunkanmi Fafowora 于 2022 年 7 月 14 日

print-color-adjust CSS 属性有点像在打印网页时节省成本的措施。您知道您可以将网页直接打印到纸张上吗？这就是我们正在谈论的内容。通过应用 print-color-adjust，我们向浏览器提供关于在打印时如何处理颜色的“提示”，例如忽略深色背景，这可以为用户节省昂贵的墨水成本。

.element {
  print-color-adjust: economy;
}

根据规范，print-color-adjust 替换了 color-adjust 属性，该属性已弃用。最初，color-adjust 被设计为一组“性能驱动”颜色调整属性的简写，但 print-color-adjust 是唯一支持的组成属性。请注意，Chrome 和 Safari 还支持名为 webkit-print-color-adjust 的版本

为什么这很重要

您可能正在思考类似于“等等，红色不就是红色吗？”之类的问题。而且，是的，这绝对是正确的。为什么要优化或调整一个无论在何处显示都为真的颜色？

重点是浏览器已经倾向于自行做出这些决定并调整颜色，例如如果用户代理由于某些其他因素的屏幕质量而无法呈现特定十六进制数，则输出稍微不同的红色。该属性实际上是在告诉浏览器，“嘿，我希望您使用这种颜色，但如果您无法使用它并希望为这种情况应用最佳替代方案，那也没关系。”或者，相反，它可以指示浏览器不惜一切代价完全匹配颜色。

为什么这很重要？规范描述了一个用例，其中在打印页面上保持样式表的斑马条纹可以提高可读性

例如，提供打印路线的制图网站可能会在路线说明中使用“斑马条纹”，在白色和浅灰色背景之间交替。失去这种斑马条纹并拥有纯白色背景会使路线说明在车内分心时难以快速浏览。

Comparing print-adjust-color exact and economy, side-by-side.

语法

print-color-adjust: [economy | exact];

初始值：economy
应用于：所有元素
继承：是
计算值：指定的关键字
动画类型：离散

值

/* Keyword values */
print-color-adjust: economy;
print-color-adjust: exact;

/* Global values */
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;

economy（初始值）：此值允许浏览器对元素的颜色和样式进行调整，浏览器认为需要调整的地方，无论是为了提高可读性、替换设备无法显示的颜色，还是其他因素。请注意，这是默认值，即使未应用此属性，浏览器也会按此方式运行。
exact：此值指示浏览器不惜一切代价匹配颜色，以保持声明的样式。它将用于调用对元素“重要”或“显著”的样式。

请注意，economy 的默认用法（无论是否调用此属性）都表明 print-color-adjust 旨在向浏览器提供一个信号，指示足够重要的样式需要保留。浏览器做出最终判断。