TIL: `color-adjust` trumps user agent setting about background printing
Tags: css, webdev
Published: 2019-01-16 16:01:58

---
title: TIL: `color-adjust` trumps user agent setting about background printing
published: true
tags: css, webdev
canonical_url: https://www.stefanjudis.com/today-i-learned/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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust) 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](//images.ctfassets.net/f20lfrunubsq/2h5UPKmV2mEuFWTIO494Dh/a82947db1ee3a48dbdd8f741328ed4f7/sj-printed.jpg)

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.

![Print dialogs of Chrome and Firefox – Chrome asks if you want to print background graphics and Firefox even differentiates between background color and graphics.](//images.ctfassets.net/f20lfrunubsq/1qEPHWTMKu9WQ7gabUlWlR/dea9cd57f0c3641299d6bcc9a49c6b0e/print-dialogs.jpg)

(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.

![Chrome's print dialog showing a dark background being printed even when the option for it is disabled](//images.ctfassets.net/f20lfrunubsq/5ExmFTTrNADk7vHTZGcaF4/8d3a2a125defd0a71535aecfa53ae649/print-dialog.jpg)

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