JavaScript Ie Detection, Why Not Use Simple Conditional Comments

Javascript IE detection, why not use simple conditional comments?

James Padolsey put a little snippet on GitHub that I'll quote here:

// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------

// UPDATE: Now using Live NodeList idea from @jdalton

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

Of course all credits should go to James, I'm only the messenger (but please shoot the messenger if my copy-paste action erred).

Also look at the forks that were created. Paul Irish explained the inner workings in a comment.

Conditional comments not working in ie11

IE 11 does not support conditional comments.

Conditional comments are no longer supported

Impact Applies to Internet Explorer 10 and later. Affects IE10
Standards mode and later, including interoperable quirks mode. 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 behavior in Internet
Explorer.

You'll need to try another way to target IE11 specifically.

Searching around SO brought me to this answer, which uses feature detection to determine whether or not to load Polymer's polyfills.

Why are conditional comments in HTML not recognized in Internet Explorer 11? Is it not supported now?

Microsoft dropped conditional comments in Internet Explorer as of version 10.

Detect IE 10 among conditional comments for IE 7+ detection

I improved the approach I tried at first.

First of all error page is wrapped with the following <div>:

<div id="not_ie" style="display:none">

IE form is also wrapped with <div>:

<div id="ie" style="display:none">

And the following js makes form or error visible depending on browser type:

<script type="text/javascript">
    var pattern = /MSIE\s([\d]+)/;
    var ua = navigator.userAgent;
    var matched = ua.match(pattern);
    if (matched) {
        var elem = document.getElementById("ie");
        elem.style.display = "inline";
    } else {
        var elem = document.getElementById("not_ie");
        elem.style.display = "inline";
    }
</script>

There's no need in use of conditional comments, determining of ActiveX or version-specific feature of IE.

Dynamic javascript with IE's conditional comments?

You can try Conditional Compilation:

var datetimePickerObject = {
  controlType: "select",
  timeFormat: "HH:mm",
  stepMinute: 15
};
/*@cc_on
delete datetimePickerObject.controlType;
@*/
$("#dtpStart").datetimepicker(datetimePickerObject);

Conditional comment for 'Except IE8'?

I can think of a trick. Set a variable inside the IE conditional tag and include your JS code if that variable isn't set.

<script>
    var ie8 = false;
</script>

<!--[if IE 8]>
    <script>
        ie8 = true;
    </script>
<![endif]-->

<script>
    if (ie8 == false) {
        // any code here will not be executed by IE 8
        alert("Not IE 8!");
    }
</script>

Should you still support IE conditional comments?

Given that support for conditional comments was removed from IE10, I would recommend against using them at this point in time. It's 2017; time to move on. (That's my take, anyway; YMMV.)

I would consider providing a bare bones version of the site designed for any browser other than your preferred one (which, conveniently, also helps you support experiences you didn't plan for).

ie conditional comments need explanation

You probably want to change !(IE) to (!IE)

Also, the "normal" <body> tag you're talking about is in a conditional comment. The fact that it's on a different line doesn't matter, it's still inside the conditional comment tag, so is affected as such.

Conditional comments for IE work by using normal HTML comments <!-- --> so any code inside a "false" conditional is just commented out; <!-- <body class="ie6"> --> IE then has its own syntax inside of that. As such, non-IE browsers just see a commented string, and IE treats it as a statement to execute.

Because of this, only one body tag shows, and only that one gets used.

---

More explanation of

<!--[if (gt IE 9)|!(IE)]><!-->
<body>
<!--<![endif]-->

To IE, this says:

<if greater than ie9, or not ie> (ie conditional comment)
<!--> (empty comment) (--> putting this here to stop SO ruining syntax highlighting :D)
<body>
<end if> (ie conditional comment)

If you don't understand why, read the paragraph starting "Conditional comments for IE work...".

This same block, to any other browser looks like this:

<!--[if (gt IE 9)|!(IE)]><!--> (this is just one comment, containing the text "[if (gt IE 9)|!(IE)]><!")
<body>
<!--<![endif]--> (again, just one comment, containing "<![endif]")

---

Related Topics