Tiago Tiago - 2 years ago 103
CSS Question

CSS color property not working correctly on @media print

I'm building a web app which basically consists of a large form which can then be printed after submission.

However, the text on my print document seems to never be affected by both

color
and
font-weight
CSS properties.

Here is a small section of the document as it looks like on screen:

enter image description here

However, when printing, it ends up looking like this:

enter image description here

The font is the same but for some reason no styles are applied to it. I have NO overriding CSS settings for
@media print
, so shouldn't it just look exactly the same?

Why aren't my normal styles being applied to the print document (by print document I mean the document that appears when you click your browser's Print button)?

EDIT: Posting some example code to illustrate my problem, as requested:

@media print {

html {
margin: 0;
padding: 0;
width: 100%;
font-size: 0.9em;
color: yellow !important;
}
}


In the above snippet, every attribute will work correctly except color, even when using the
!important
tag. I am at a loss as to why this is happening.

Answer Source

I found the source of the problem: Bootstrap.

I used Chrome's inspector tools to poke around print styles in the Emulation tab, as you can see on the following picture:

enter image description here

I then selected the element whose color was not being applied correctly, which led me to this little gem:

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; // Black prints faster: h5bp.com/s
        box-shadow: none !important;
        text-shadow: none !important;
    }

    // Other code...
}

Bootstrap was overriding all my styles with a nasty * !important combo, which will even override an html {color: yellow !important} because of CSS's specificity rules.

To solve my problem I can either delete the above snippet from Bootstrap or make all my own colors !important.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download