Print media queries being ignored in Chrome?

css, google-chrome, html, media-queries, printing

Solution

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">');
}

Problem

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)?

Original source