TIL: `color-adjust` trumps user agent setting about background printing

Let's talk about print, shall we? :D

I rarely print things (I do not own a printer) but recently I came across a CSS property I haven't heard of before – color-adjust.

The following is what you'll find on MDN about this property.

The color-adjust CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.

I thought that this is very interesting and opened my site to see what a printed version would look like.

I found that Firefox indeed changed colors of included code blocks to black code on white background. It inverted the colors.

Browsers have config options to control the printing of background colors and images

It turns out that you can control the print behavior in the particular browser dialog. Chrome includes a hidden setting "Print background graphics" under "More settings" which can control the behavior of my dark codeblocks.

Firefox even goes a little bit further and lets you decide if you want to have graphics or background colors with separate options.

(For unknown reason Firefox prefers German on my machine...)

With these options, users can opt out of "expensive print operations" to save some ink when printing sites.

color-adjust trumps them all

The CSS property color-adjust (supported in Firefox and prefixed (-webkit-print-color-adjust) in Chrome, Safari, and Opera) lets you explicitly define that you don't want the user agent to mess with you colors – not even for printing.

It accepts the values economy (the default value) and exact. If one chooses to set exact for example the dark background of the code blocks in my articles would be printed no matter what configuration option is set or not set.

I think there are scenarios where it makes sense to keep background color and images even on print – let's see when this CSS property has value for me as person not owning a printer! 🙈