color-adjust trumps user agent setting about background printing
- Published at
- Updated at
- Reading time
- 2min
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.
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.
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.
Join 5.5k readers and learn something new every week with Web Weekly.