color-adjust trumps user agent setting about background printing (#tilPost)

Let’s talk about print, shall we? 😀
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.

T…

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.

A code block on stefanjudis.com that doesn't have a black background anymore

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

Section titled 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.

Print dialogs of Chrome and Firefox – Chrome asks if you want to print background graphics and Firefox even differentiates between background color and graphics.

(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

Section titled `color-adjust` trumps them all

The CSS property color-adjust (supported in Firefox and prefixed (-webkit-print-color-adjust) in Chrome, Safari, and Opera (auto-prefixer can take care of this) 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.

Chrome's print dialog showing a dark background being printed even when the option for it is disabled

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! 🙈

Edited: Šime Vidas pointed out the behavior that color-adjust overrules browser print settings are most likely browser bugs.

Reply to Stefan
Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language:




Related Posts