I have a bunch of CSS written that makes my site target Mobile first, then I use CSS Media Queries to load another stylesheet for desktop browsers. I do this since there are so many mobile browsers that don’t understand CSS Media Queries, and it’s more likely that desktop users have modern browsers that support this.
I have the following CSS that works in all modern browsers (IE9, Chrome, Firefox 3.6+, Safari 4+5):
I then realized that IE7 and IE8 don’t support CSS Media Queries so the above wouldn’t work. So I added a conditional statement to load it:
<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/>
<!-- [if lt IE 9]>
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" />
<! [endif] -->
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="only screen and (min-width: 640px)" />
However, using IE Tester and Browsershots, I’ve confirmed that the desktop.css is not loading in IE 7 and 8. It seems to be ignoring that stylesheet completely.
I then tried changing the conditional statement to <!-- [if IE 8]> but that didn’t have any effect.
Lastly, I removed the condition statement altogether, resulting in this code:
<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/>
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" />
This last attempt results in my desktop.css being loaded in IE7 and IE8. So this proves the CSS is OK. Just looks like my conditional statement isn’t being triggered.
Any ideas what I’m doing wrong?
Remove the spaces. This breaks the conditional syntax. Otherwise, IE is treating it like a normal comment.