{"id":366791,"date":"2022-07-14T05:21:00","date_gmt":"2022-07-14T12:21:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=366791"},"modified":"2022-07-14T06:37:59","modified_gmt":"2022-07-14T13:37:59","slug":"print-color-adjust","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/print-color-adjust\/","title":{"rendered":"print-color-adjust"},"content":{"rendered":"\n

The print-color-adjust<\/code> CSS property is sort of like a cost-cutting measure when it comes to printing a webpage. You know how you can literally print a webpage on a piece of paper? That\u2019s what we\u2019re talking about. By applying print-color-adjust<\/code>, we give the browser a \u201chint\u201d for how to handle colors when printing, such as ignoring dark backgrounds, that can save users the cost of expensive ink.<\/p>\n\n\n\n\n\n\n\n

.element {\n  print-color-adjust: economy;\n}<\/code><\/pre>\n\n\n\n
According to the spec<\/a>, print-color-adjust<\/code> replaces the color-adjust<\/code> property, which has been deprecated. Originally, color-adjust<\/code> was designed to be a shorthand for a collection of \u201cperformance-motivated\u201d color adjust properties, but print-color-adjust<\/code> was the only supported constituent property. Note that there is also a version named webkit-print-color-adjust<\/code> supported by Chrome and Safari<\/p>\n\n\n
Why this matters<\/h3>\n\n\n
You might be thinking something along the lines of, \u201cWait, isn\u2019t red just red?\u201d And, yes, that is absolutely true. What\u2019s the point of optimizing or adjusting a color that\u2019s true no matter where it is displayed?<\/p>\n\n\n\n
The point is that browsers already tend to make these determinations and adjust colors on their own, like outputting a slightly different red if the user agent is incapable of rendering a specific hex because of the screen quality of some other factor. The property is effectively saying to the browser, \u201cHey, I\u2019d like you to use this color, but it\u2019s cool if you can\u2019t and want apply your best alternative for the situation.\u201d Or, conversely, it can instruct the browser to exactly match the color at any and all costs.<\/p>\n\n\n\n
Why does this matter? The spec describes a use case where maintaining the zebra striping of a styled table on a printed page could help legibility:<\/p>\n\n\n\n
For example, a mapping website offering printed directions might \u201czebra-stripe\u201d the steps in the directions, alternating between white and light gray backgrounds. Losing this zebra-striping and having a pure-white background would make the directions harder to read with a quick glance when distracted in a car.<\/p><\/blockquote>\n\n\n\n
\"Comparing<\/figure>\n\n\n
Syntax<\/h3>\n\n\n
print-color-adjust: [economy | exact];<\/code><\/pre>\n\n\n\n
  • Initial: economy<\/code><\/li>
  • Applies: all elements<\/li>
  • Inherited: yes<\/li>
  • Computed value: specified keyword<\/li>
  • Animation type: discrete<\/li><\/ul>\n\n\n
    Values<\/h3>\n\n\n
    \/* Keyword values *\/\nprint-color-adjust: economy;\nprint-color-adjust: exact;\n\n\/* Global values *\/\nprint-color-adjust: inherit;\nprint-color-adjust: initial;\nprint-color-adjust: revert;\nprint-color-adjust: revert-layer;\nprint-color-adjust: unset;<\/code><\/pre>\n\n\n\n
    • economy<\/code> (initial value):<\/strong> This value allows the browser to make adjustments to the color and styling of an element where it decides it needs to, whether it\u2019s to improve legibility, replace a color a device is incapable of displaying, or some other factor. Note that this is the default value and, even if the property is not applied, this is how browsers will behave.<\/li>
    • exact<\/code>:<\/strong> This value instructs the browser to match a color at all costs for the sake of preserving the declared styling. It would be used to call out styles that are \u201cimportant\u201d or \u201csignificant\u201d to the element.<\/li><\/ul>\n\n\n\n
      Note that the default usage of economy<\/code> \u2014 whether the property is called or not \u2014 suggests that print-color-adjust<\/code> is designed to provide a signal to browsers indicating styles that are important enough to preserve. The browser makes the final judgment.<\/p>\n\n\n
      Demo<\/h3>\n\n\n