@media print for chrome not working

[et4891]

Alright, just by the title all of you must think this is a duplicate but I have tried quite some results from stackoverflow but no luck.

@media print worked for firefox and when I tried using chrome it is a mess. Lots mentioned use@media screen and (-webkit-min-device-pixel-ratio:0) which I did and chrome doesn’t read all selector and the properties. for example I have

@media screen and (-webkit-min-device-pixel-ratio:0) {
    a[href]:after {
        content: none !important;
    }
}

this will not remove the href values in print view.

@media print {
a[href]:after {
    content: none !important;
}
}

this worked perfectly for firefox but of course since it’s @media print this doesn’t work for chrome at all.

I even tried * {transition: none !important} which lots people say worked and still didn’t work for me too.

of course I also added <link rel="stylesheet" media="print" href="{% static "css/print.css" %}">

some even said use js to detect if it’s chrome agent which I tried too but already deleted the code so not able to post it here.

Lots of the results are from years ago and I think the most recent one is from 2014. I wonder if it’s because chrome updated or something that’s why they used to work but not anymore.

these two sites are kind of the most popular ones but still no luck trying what they wrote.

Print media queries not working?

Tips And Tricks For Print Style Sheets

Can someone please give me an idea or know how I can make chrome work?

Thanks in advance. (Hopefully this wouldn’t be a duplicate because I saw so much threads and all of them pretty much link to the answers I tried above)

[Senff]

What are you trying to do exactly? Have a value after a link that only shows when you print it? The code you have above has “content: none” (please, do not use “!important”) for both screen and print, so it will never show.

If you check this simple Pen, you’ll see that print media works fine in Chrome: the content doesn’t show on regular screens but will show up when you print it: http://codepen.io/senff/full/bebOKV

[et4891]

that was just an example of getting rid of url when printing because browsers do print the href values in default isn’t it? I wanted to get rid of that href value when printing or saving as pdf. Ah, I get what you mean with !important I will get rid of it.

But anyways that was just an example because I have other css codes such as

body {
font-size: 14px;
}

but what’s being displayed is still the screen css which has font-size: 28px
also, I did set width and height for some classes but didn’t show up in chrome’s print option but in firefox it does show up though.

[Author]

Posts