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 UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
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)