Check for IE and link to different style sheet - css

Question

I am trying to call a different style sheet in the head section of my page depending on if the browser used is IE. It's "greyed" out but from what I understand, it's still supposed to work this way. The two style sheets are identical except for one line. But, it's not linking to mainIE.css and not replacing main.css. Am I doing something wrong?
<link href="examples/main.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="examples/mainIE.css" rel="stylesheet" type="text/css" />
<![endif]-->

Answer 1

First, the conditional comments aren't supported in IE 10 and up. That may be why you are not seeing the other stylesheet load.
Second, the conditional comment won't instruct IE to replace your first stylesheet, just to load up another one. Typically in the second stylesheet you would just put in only the differences and let the C in CSS take care of it for you.

Answer 2

Try the following:
<!--[if !IE]><!--><link href="examples/main.css" rel="stylesheet" type="text/css" /><!--<![endif]-->
<!--[if IE]><link href="examples/mainIE.css" rel="stylesheet" type="text/css" /><![endif]-->
Also I knew you can do the same thing within one CSS file, if only one line is the difference.

Answer 3

as noted, conditional comments don't work in ie10+; you need to use conditional compilation to target them...with that said, i'm not sure how to differentiate between ie10, 11 and mobile exactly, but i bet you can simply check your jscript version. here's a demo of conditional compilation
http://dev.bowdenweb.com/ua/browsers/ie/conditional-compilation.html

Answer 4

The second ('commented') stylesheet for IE will NOT replace your existing stylesheet. It's added in as a comment so all other browsers ignore it, and IE tries to find comments with this [if] statement in it to display that content. Your IE stylesheet can simply overwrite that single line that's different instead of the whole stylesheet (DRY!), saving the IE user a duplicate download.
The latest versions of IE do not support them anymore (http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/), otherwise you can find more info here: http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
[EDIT: here is a Javascript solution]
You could always do it with javascript if you went to target only IE users. You could do something like the following:
var useragent = navigator.userAgent.toLowerCase();
var internetExplorer = (
useragent.indexOf("trident") >= 0
|| useragent.indexOf("ms") >= 0
|| useragent.indexOf("ie") >= 0
) ? true : false;
if(internetExplorer){
// do whatever you want here, like...
document.getElementById("myElement").style.height = "100px";
}
[EDIT2:] Actually, you could just write the stylesheet if its IE:
if(internetExplorer){
document.write('<link href="examples/main.css" rel="stylesheet" type="text/css" />');
}