Force Background Color Printing on Firefox
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;
}
I see a minor bug or two in my particular project, but the background colors are showing up!
Background color not showing in print preview
The Chrome CSS property -webkit-print-color-adjust: exact;
works appropriately.
However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the @media print
and @media screen
.
Often times just setting up some extra @media print
CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.
In your case, the -webkit-print-color-adjust: exact
is working. However, your background-color
and color definitions are being beaten out by other CSS with higher specificity.
While I do not endorse using !important
in nearly any circumstance, the following definitions work properly and expose the problem:
@media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
}
@media print {
.vendorListHeading th {
color: white !important;
}
}
Here is the fiddle (and embedded for ease of print previewing).
Firefox print page - white font colors overidden to darker colors
One workaround is to set the text to transparent and then set text-shadow to the desired print color.
I had success in Firefox 70.0.1 using this solution.
<style>
.oval {
position: absolute;
width: 300px;
height: 60px;
top: 45px;
right: -50px;
border-radius: 50%;
color: transparent;
text-shadow: 0 0 0px #fff;
text-align: left;
line-height: 24px;
opacity: 0.4;
padding: 15px 15px 15px 50px;
}
...
</style>
https://codepen.io/joshmatt/pen/jOOzrEv
Firefox not printing white color
Also add !important to -webkit-print-color-adjust
. This should work in all firefox, put it in @media print like this...
@media print {
h2, h3 {
color: #ffffff !important;
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
}
If still you want exact colour, you should check it in the printer, Appearance and Print Background Colors, by default it's off, look at the image, this worked for me, check it in your printer window setting as the below:
What is the alternate for -webkit-print-color-adjust in firefox and IE
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]
Related Topics
Changing Chunk Background Color in Rmarkdown
Scss Extend a Nested Selector and Override the Nested Rulesets
How to Make Twitter Bootstrap Modal Full Screen
CSS Two Div Width 50% in One Line with Line Break in File
CSS "Outline" Different Behavior Behavior on Webkit & Gecko
Div with Cut Out Edges, Border and Transparent Background
Expanding the Parent Container with 100% Height to Account for Floated Content
Svg Fill Not Being Applied in Firefox
Mask Image, Create Rectangle from Multiple Gradients
How to Hide Scrollbar in Firefox
How to Get the Nth Child of an Element Using CSS2 Selectors
Anyway to Prevent the Blue Highlighting of Elements in Chrome When Clicking Quickly
Background Images: How to Fill Whole Div If Image Is Small and Vice Versa
Are CSS Selectors Case-Sensitive
Using Primefaces with Bootstrap Causes Changes in Padding/Sizing/Borders