This is the third of five quick posts about some browser quirks that have come up in the last few weeks.
Stylesheets set with media=”print” still block rendering in Internet Explorer.
A few weeks ago a friend at a top web company pinged me about a possible bug in Page Speed and YSlow. Both tools were complaining about stylesheets he placed at the bottom of his page, an obvious violation of my put stylesheets at the top rule from High Performance Web Sites. The reasoning behind this rule is that Internet Explorer won’t start rendering the page until all stylesheets are downloaded1, and other browsers might produce the Flash Of Unstyled Content (FOUC). It’s best to put stylesheets at the top so they get downloaded as soon as possible.
His reason for putting these stylesheets at the bottom was that they were specified with media="print". Since these stylesheets weren’t going to be used to render the current page, he wanted to load them last so that other more important resources could get downloaded sooner. Going back to the reasons for the “put stylesheets at the top” rule, he wouldn’t have to worry about FOUC (the stylesheets wouldn’t be applied to the current page). But would he have to worry about IE blocking the page from rendering? Time for a test page.
The media=print stylesheets test page contains one stylesheet at the bottom with media="print". This stylesheet is configured to take 4 seconds to download. If you view this page in Internet Explorer you’ll see that rendering is indeed blocked for 4 seconds (tested on IE 6, 7, & 8).
I’m surprised browsers haven’t gotten to the point where they skip downloading stylesheets for a different media type than the current one. I’ve asked some web devs but no one can think of a good reason for doing this. In the meantime, even if you have stylesheets with media="print" you might want to follow the advice of Page Speed and YSlow and put them in the document HEAD. Or you could try loading them dynamically. That’s the topic I’ll cover in my next blog post.
The five posts in this series are:
- 5a Missing schema double download
- 5b document.write scripts block in Firefox
- 5c media=print stylesheets
- 5d dynamic stylesheets
- 5e speculative background images
| 1 | Simple test pages may not reproduce this problem. My testing shows that you need a script (inline or external) above the stylesheet, or two or more stylesheets for rendering to be blocked. If your page has only one stylesheet and no SCRIPT tags, you might not experience this issue. |
Billy Hoffman | 12-Feb-10 at 7:30 am | Permalink
Steve,
Zoompf did some research around this area in December and reached the same conclusions. All browser download print CSS, but Safari awaits until window.onload fires.
We came up with 2 possible solutions. You can read more here:
http://zoompf.com/blog/2009/12/browser-performance-problem-with-css-print-media-type/
Russell Heimlich | 01-Mar-10 at 2:47 pm | Permalink
What if you imported a print stylesheet using @import in a style block? Would this still block IE from rendering what is already downloaded?
It just dawned on me today to try and put the print stylesheet at the bottom of the page for the same reason your friend thought. Bummer it doesn’t work.