Loading different css to IE

Question

So I'm trying to load a different css stylesheet if IE is detected.

My code:

<head>
<!-- other scripts and stylesheets -->

<!--[if IE]>
  <link href='css/index_ie.css' rel='stylesheet' type='text/css'>
<![endif]-->
<!--[if !IE]>
  <link href='css/index.css' rel='stylesheet' type='text/css'>
<![endif]-->

<script>
(function() {
    if (typeof ActiveXObject === "undefined") {
        var s = document.createElement('link');
        s.href = "css/index.css";
        s.rel = "stylesheet";
        s.type = "type/css";
        document.documentElement.appendChild(s);
    }
    else {
        var s = document.createElement('link');
        s.href = "css/index_ie.css";
        s.rel = "stylesheet";
        s.type = "type/css";
        document.documentElement.appendChild(s);
    }
})();
</script>
</head>

This loads index.css correctly when not-IE browser. However this is not loading index_ie.css when IE is being used.

PS: testing with IE 10

for IE use this var s = document.createElement('<link href="css/index_ie.css" rel="stylesheet" tye="text/css"/>'); — mohkhan
– mohkhan, Commented Jul 23, 2013 at 10:36
Also, append it in the head element. document.getElementsByTagName("head")[0].appendChild(s). — mohkhan
– mohkhan, Commented Jul 23, 2013 at 10:38

Jonathan Lonowski · Accepted Answer · 2013-07-23 10:43:11Z

1

To include content in browsers other than IE 9 and older, use a slightly different syntax:

<![if IE]>
  <link href='css/index.css' rel='stylesheet' type='text/css'>
<![endif]>

As it explains:

The downlevel-revealed conditional comment enables you to include content in browsers that don't recognize conditional comments. Although the conditional comment itself is ignored, the HTML content inside it is not.

Though, note that conditional comments aren't fully supported after IE 9 (from the top of the same page):

Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser. For more info about standards mode, see Defining Document Compatibility.

answered Jul 23, 2013 at 10:43

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading different css to IE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related