Internet Explorer 6 and media types

Written on 18 aug 2010 and tagged code, css, html, ie, web

When trying to reduce the number of HTTP requests on a web project I was working on, I tried to combine my screen and print stylesheets into a single file. Using the @media declaration, one should be able to specify media-specific styles. Other browsers were ok, but as usual IE6 was playing up. My @media print block was completely ignored.

The setup

First, I had only generic rules and a single print block, like so:

body { font-size: 12px }
@media print {
    body { font-size: 12pt }
}

Then, I included the stylesheet on my page with a media type:

<link rel="stylesheet" href="style.css" media="screen, projection">

As I understood the specs all generic styles (outside the @media print block) should apply to the media specified in the link, while the print-specific styles should apply only to the print media type.

The solution

It seems the media type from the link overrides the @media print block in IE6, so removing that un-ignored those styles:

<link rel="stylesheet" href="styles.css">

Then, in order to keep my generic styles (which are actually screen-only styles) from influencing my print styles, I used another @media block:

@media screen {
    body { font-size: 12px }
}
@media print {
    body { font-size: 12pt }
}

All was well and both my screen and print styles were picked up nicely. Now I could use one single stylesheet and remove one additional HTTP request, speeding up the site loading time.

You cannot leave comments on my site, but you can always tweet questions or comments at me: @avdgaag.