It’s probably well documented elsewhere, but another CSS failing in Internet Explorer came up for me today. IE5.5 (and I presume, earlier) fail to properly respect the media attribute within a style tag. For example, in the following code IE5.x will import both stylesheets for screen rendering:
<style type="text/css" media="print">
@import url("print.css");
</style>
<style type="text/css" media="screen">
@import url("screen.css");
</style>
Why would this be an issue? If you’ve created a print stylesheet that – for example – hides part of the UI for clarity, you’ll find that the browser will apply both stylesheet rules and hide the UI on the on-screen version too. Which isn’t so good.
The solution though is easy enough – using part of the CSS2 spec that IE5.x again fails to implement correctly. Within the print specific style sheet, you need to encapsulate the styles with the @media rule, like so:
@media print {
...style declarations...
}
This fixes the problems with IE5.x as it ignores the @media rule and the declarations within. Yay.