HSR Technologies is a Top Rated agency on Upwork.com, Please check our Upwork profile for more details.

Conditional comments in IE11

As a web developer we all have used conditional comments in Internet Explorer at some point to fix the IE only issues. As Internet Explorer has added support for most of the modern features, now we usually do not need hacks or conditional comments to fix the issues.

Considering that conditional comments are no longer needed, and as a step towards making the web more consistent across browsers, Microsoft has officially dropped support of conditional comments in IE10

Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5. This means that Conditional Comments are now treated as regular comments, just like in other browsers. This change can impact pages written exclusively for Windows Internet Explorer or pages that use browser sniffing to alter their behaviour in Internet Explorer.

Internet Explorer Dev Center

But what if you have an old website that uses conditional comments to work properly in IE?

Microsoft offered a simple solution for this, add a meta tag in head of your HTML page to opt into Internet Explorer 9 behaviour.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Alternate solution

In a recent project i faced an issue, a custom font was not working properly in IE only. I was not able to find any solution other then using a hack. So i used following JavaScript code. This code detects if your browser is IE (any version) and add a CSS class names ie in body tag in HTML.

var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
    
if ((old_ie > -1) || (new_ie > -1)) {
    ms_ie = true;
}
    
if ( ms_ie ) {
    $('body').addClass('ie');
}

After adding this code, you can write your IE only CSS code using .ie class in CSS.

  • web

    it was usefull

  • hi partner, very very nice effort but one must point out you would require JS and Jquery in the client and server. Other than that, good.

  • Yamir Ortega

    Hi Alok, greetings from Panama, I made a little modification to make this code can run with ie8 and ie9 very closer like the standard conditional comments but into xhtml code, and sorry for my english. I hope this code could be a help for a lot of developers.

    //<![CDATA[

    var div = document.createElement("div");
    div.innerHTML = "<!–[if IE 8]><![endif]–>”;
    var isIE8 = (div.getElementsByTagName(“i”).length == 1);

    div.innerHTML = “<!–[if IE 9]><![endif]–>”;
    var isIE9 = (div.getElementsByTagName(“i”).length == 1);

    if (isIE8) {
    $(‘html’).addClass(‘ie’).addClass(‘ie8’);
    } else
    if (isIE9) {
    $(‘html’).addClass(‘ie’).addClass(‘ie9’);
    }
    //]]>

  • Elizabeth

    thank you! very helpful