Geek Answers Handbook

Print requests in browser are ignored?

I create some print-specific styles using the following:

@media print { /* Styles */ }

Since we use SASS, all styles are compiled into a single styles.css at runtime, which is declared in the <head> document as follows:

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

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

It is impossible for life to understand what is happening. If I emulate print media in Chrome, then it loads the styles in the order when I actually try to print that it does not work. I tried a lot of things, adding media= attributes, double quotes, changing the order of href , etc. All to no avail !!

Note that we no longer use type , as I thought you no longer needed to use this. I tried adding this anyway, but it still doesn't work!

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

UPDATE: So, I noticed that when I pressed Ctrl + P to print the page, the preview I see seems to use some styles from the print stylesheet, but it seems to display everything using a mobile multimedia request? I think there may be some conflict with a breakpoint, will be updated when I get a chance.

UPDATE2: I see that the print stylesheet is loading from below, so theoretically should I write all the other media queries (at least the ones I'm trying to rewrite)?

+8
html css google-chrome printing media-queries
source share
4 answers

I tried to add

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

for one of my sites style.css: does not work.

Then i added

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

after other style sheets in my head and inserted the same rules as above (without @media print {}) in print.css. Now Chrome interprets the rule and does not display anything in the print preview. A.

I assume the problem is using @media print. But I don’t know why chrome behaves like this.

EDIT: Another solution via JavaScript:

 if(/chrome/i.test(navigator.userAgent) { document.write('<link rel="stylesheet" href="printChrome.css" media="print">'); }
+12
source share

You can try to set the rest of the style media attributes as

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

This will prevent the browser from applying rules from styles marked as “screen”. Worked for me

+5
source share

Another way to do this: CSS errors before print styles. Since we all seem to have an impetus for print styles, they are more vulnerable to this. When CSS has an error, it doesn't complain ... it just discards the rest of the stylesheet.

Providing print styles with their own stylesheet - even just a separate built-in tag - can solve this problem, as well as a media-spec'd tag error in the style.

0
source share

The problem was that rel='stylesheet' not set in the print css link. There was a problem adding this hotfix.

0
source share

More articles:


All Articles