Read more

Printing background color of elements

Natalie Zeumann
May 17, 2018Software engineer at makandra GmbH

Browsers' printing methods usually don't print background colors. In most cases this is the desired behavior, because you don't want to spend tons of ink printing the background of a web page. But in some cases you want to print the background color of elements, e.g. bars of a chart. For those elements you need to set the following CSS styles:

-webkit-print-color-adjust: exact; /* Chrome and Safari */
color-adjust: exact; /* Firefox */
Illustration online protection

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

  • We build a solid first version of your product
  • We train your development team
  • We rescue your project in trouble
Read more Show archive.org snapshot

Another case is printing of white text. When removing background colors, chances are white text now stands on white. In order to keep legibility, browsers turn white text into gray (Chrome) or black (Firefox). However, white text on a maybe dark image should not be changed. The above properties help with that one as well.

Tip

If you're using autoprefixer Show archive.org snapshot , you don't need to add the prefixed variant yourself.

Posted by Natalie Zeumann to makandra dev (2018-05-17 13:44)