This post is part of my Today I learned series in which I share all my learnings regarding web development.
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 –
The following is what you'll find on MDN about this property.
color-adjustCSS 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 (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.
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.