IE7 on XP render the media=“print” stylesheets

Question

In my web page, I'm using 2 stylesheets :

<link rel="stylesheet" href="css/screen-layout.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/print-layout.css" media="print" type="text/css" />

inside print-layout.css there is :

.ui-dialog * {display: none !important;}

When I viewed my webpage on IE7, it's supposed to ignore the media="print" one, but it didn't, it applied the display: none, causing all the elements to be hidden. And in the debugbar plugin for IE7, I can see that IE7 applied the print-layout.css file. How is that possible? or am I missing any requirements for using print on IE7?

Thanks :)

Answer 1

That syntax works even on IE7 but if you need to exclude that browser from applying your print style, just rewrite your last inclusion in this way:

<style type="text/css" rel="stylesheet">
   @import url('css/print-layout.css') print;
</style>

since IE7 hasn't implemented the media type on @import rule.

Otherwise just wrap the second inclusion in a conditional comment, like so

<!--[if (gte IE 8)]><!-->
   <link rel="stylesheet"... media="print" /> 
<!--<![endif]-->

so you include the print style for all browser except IE < 8.

---

As a side note: IE7 usage is globally < 1%:
see http://gs.statcounter.com/#browser_version-ww-monthly-201211-201304