12

I'm creating some print specific styles using the following:

@media print {
/* Styles */
}

As we are using SASS all the styles get compiled into one stylesheet, styles.css at runtime, which is declared in the <head> of the document as follows:

<link rel='stylesheet' href='/assets/css/styles.css'>

Now when I print from chrome (Ctrl+P), it completely ignores my print styles but Firefox (30.0) is fine. IE(11) is terrible but this is because we have a lot of show/hide panels which IE doesn't seem to like/

Can't for the life of me figure out what's happening. If I emulate print media in Chrome then it loads the styles fine, it's when I actually try and print that it doesn't work. I've tried loads of things, adding, media= attributes, double quotes, changing the order of href etc all to no avail!!

Note, we're not using type anymore as I thought you didn't need to use this anymore. I've tried adding this anyway but it still doesn't work!

I've even tried this: http://lawrencenaman.com/optimisation/print-media-queries-not-working/ but it still doesn't work. It's driving me crazy, any ideas?

UPDATE: So I noticed that when I hit Ctrl + P to print the page, the preview that I see seems to use some of the styles from the print stylesheet but seems to render everything using a mobile media query? I think there may be some conflict with a breakpoint, will update when I get a chance.

UPDATE2: I can see that the print stylesheet is loading at the bottom so this should in theory over write all the other media queries (at least the ones that I'm trying to over write)?

zik
  • 3,035
  • 10
  • 41
  • 62

5 Answers5

14

I tried to add

@media print {
    * {
        display:none;
    }
}

to one of my sites' style.css: Doesn't work.

Then I added

<link rel="stylesheet" href="/css/print.css" media="print">

after the other stylesheets into the head and inserted the same rule as above (without @media print {}) to the print.css. Chrome now interprets the rule and does not display anything within the print preview.

I'd assume the problem is using @media print. But I have no idea why chrome behaves like that.

EDIT: Other Solution via JavaScript:

if(/chrome/i.test(navigator.userAgent) {
    document.write('<link rel="stylesheet" href="printChrome.css" media="print">');
}
SVSchmidt
  • 6,269
  • 2
  • 26
  • 37
  • Thanks for your response dude. I'm gonna add this and see if it works. I was trying to avoid this because I don't want to add another HTTP request (no matter how small). – zik Jul 09 '14 at 14:32
  • 1
    Have you tried to add media="all" to your link? Another solution could be loading a print.css for chrome only (I've added the solution to my post). – SVSchmidt Jul 09 '14 at 14:57
  • Still not working for me!! Yeah we've already got `media="all"`within one of our SASS mixins.... – zik Jul 09 '14 at 14:59
  • Can you provide the compiled styles.css to me? – SVSchmidt Jul 09 '14 at 15:03
  • Unfortunately not. However I noticed that the print styles are the very bottom of the stylesheet, which I believe is where they're supposed to be. Our other media queries are using "all", which may perhaps be the issue? – zik Jul 10 '14 at 07:39
  • Since "all" also includes "print" media, this may cause the problem. I'm not really into SASS. Have you tried wrapping the stuff into different media queries? Like @media screen... – SVSchmidt Jul 10 '14 at 12:30
  • Yeah I've tried this but it still doesn't work. It seems like Chrome is using some media queries for mobile and a combination of the print ones. Crazy stuff! Still working on this! – zik Jul 14 '14 at 09:03
  • Did you ever come up with a fix? – RobW Oct 28 '14 at 18:59
  • 1
    @RobW unfortunately not. It was never in our original project requirements and are looking into this separately as an enhancement. – zik Oct 29 '14 at 10:15
  • Our issue ended up being that Rails was adding a media type of 'screen' by default when using the stylesheet helper, making our '@media print' rules useless. Fixed by passing 'media: nil' to unset the property. – RobW Oct 30 '14 at 21:06
  • I have a similar issue, however, Chrome is printing most of my styles, but not all of them, specifically the H1 size and color. I've tried pulling the print stylesheet out and linking to it separately, but with the same result, H1 is still getting screen styling. – icicleking Oct 01 '15 at 15:15
10

You can try setting rest of the stylesheets media attribute as

media="screen" and print stylesheet to media="print".

This will prevent browser from applying rules from stylesheets marked as "screen". Worked for me

HaveNoDisplayName
  • 8,291
  • 106
  • 37
  • 47
Bilal Akhtar
  • 101
  • 1
  • 4
3

I ran into this problem as well and found that it was because of my rendering settings in Chrome. When testing the print preview I had set my emulation media type to be "print". When I went to actually test printing, I set my media emulation to be "screen". I should have set it to be "no emulation". When it was on "screen" the print preview ignored all the print media queries and still treated the page like it was a screen. When I finally set it back to "no emulation" it started behaving as you would expect.

Ben Reeves
  • 31
  • 3
1

A problem I had was that rel='stylesheet' wasn't set in the print css link. Adding it fixed the problem.

Ryan Knutson
  • 108
  • 2
  • 14
0

Another way to make this happen: CSS errors ahead of the print styles. Since we all seem to have the impulse to put print styles last they're more vulnerable to this. When CSS has an error it doesn't complain... it just throws away the rest of the stylesheet.

Giving the print styles their own stylesheet--even merely a separate inline tag--can solve this as well as the media-spec'd-in-style-tag error.

Roger Krueger
  • 283
  • 3
  • 8