What is the alternate for -webkit-print-color-adjust in firefox and IE

Question

I had some issues with the printing the background colors.

print-color-adjust made the background color issue solved in chrome.

body{
-webkit-print-color-adjust: exact;
}

What are the alternate CSS in firefox and IE for this.

Morganne

There are none...it's a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine. – Kitty

is there any way to enforce some class to show background color in media print\ – Morganne

Answer 1

Feb 2023 Update: As of mid-2022 onwards, we can simply use print-color-adjust: economy|exact on the element, without the need to place inside a print media query.

color-adjust on it's own will become depreciated. (Thank you to misterManSam for the depreciation warning.)

Previous answer (originally from 2016):

As mentioned -webkit-print-color-adjust: exact is specific to WebKit browsers, including Google's Chrome and Apple's Safari; therefore the code should work adequately in those aforementioned browsers with perhaps slightly varied results (depending on your site/app styling).

There have been proposals to standardize this snippet to work universally for not just browsers but for different devices too. The code is simplified to: color-adjust. Similarly to the webkit-print-color-adjust property, the possible values are the same for the proposed property economy | exact.

If you want to use the property for printing purposes, simply use within a selector inside a @media print query.

For example:

@media print {
  body { color-adjust: exact; }
}

I cannot guarantee the widespread adoption on browsers for the drafted property, however it is currently working on the latest version of FireFox (at the time of writing, version 50.0).

[Source]

Muzz

According to caniuse it should also work on Safari browsers too. If only Microsoft would fix Edge we'd be happy... – Oilskin

Note that the current draft recommendation has this value as print-color-adjust and color-adjust is deprecated. – Del

Why is color-adjust used in the latest Bootstrap release (5.3.0) cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css - line 2405? – Minuscule

Answer 2

There is the alternate CSS to print background colors for Chrome And Firefox.

td { 
 -webkit-print-color-adjust: exact;//:For Chrome
  color-adjust: exact;//:For Firefox
}

Prorogue

This is the correct answer. After trying to solve this one, color-adjust: exact; works for firefox while the webkit does not. – Borchert

Answer 3

This is beginning to work in Firefox (at least version 48.0.2) with the "color-adjust" property.

td { 
  background: #000 !important;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

Whitfield

Answer 4

See https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust#browser_compatibility

1. Firefox accepts print-color-adjust and color-adjust;
2. Safari accepts print-color-adjust and -webkit-print-color-adjust (edit: https://caniuse.com/?search=print-color-adjust says it only supports -webkit- version; if anyone actually using Safari can settle this, I'll edit);
3. Chrome and Edge accept -webkit-print-color-adjust.

Nierman

For Safari, as is true with most others except Firefox: Implemented with the vendor prefix: -webkit-. How do you know Safari accepts print-color-adjust? – Heaps

@SᴀᴍOnᴇᴌᴀ The sentence you quote applies to Safari 6; 15.4 has "Full support" and no -X- meaning "Requires a vendor prefix or different name for use". Similarly for Firefox, 48 has "Alternate name: color-adjust" and 97 has "Full support". – Nierman

@SᴀᴍOnᴇᴌᴀ Though I see the first chart in caniuse.com/?search=print-color-adjust disagrees, so I edited the answer. – Nierman