Print media queries being ignored in Chrome?

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

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

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.