Javascript IE detection, why not use simple conditional comments? [duplicate]

Question

In order to detect IE most Javascript libaries do all sort of tricks.

• jQuery seem to add a temporary object into your pages's DOM to detect some features,
• YUI2 does regex on the user agent in its YAHOO.env.ua = function() (file yahoo.js)

After reading this answer it came in my mind that it's true, in order to detect simply IE in Javascript we could simply add to our pages:

<!--[if IE]><script type="text/javascript">window['isIE'] = true;</script><![endif]-->

<script type="text/javascript" src="all-your-other-scripts-here.js"></script>

Now the window.isIE variable is set for all our Javascript code, by simply doing:

if(window.isIE)
   ...

Beside the fact that this might result in being a pain because it has to be added in all pages, are there any issues/considerations I might be unaware of?

---

FYI: I know it's better to use object detection rather than browser detection, but there are cases where you still have to use browser detection.

Answer 1

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.

Answer 2

If you want to do it that way, I think it's much better to use Conditional Compilation instead as you can do it inside the javascript without requiring to change the html:

var isIE = /*@cc_on!@*/false;

Answer 3

Marcel Korpel's answer no longer works (in IE 10 it returns undef, so IE 10 appears as not being IE). NOTE: Now updated to work with IE 11 also.

This is a variant of that code, but which comes from Microsoft's recommendations. If you were using the previous code, you can just drop in this replacement since it is built to be called the exact same way.

Unlike conditional comments/compilation, it should also work fine with minimizers.

// ----------------------------------------------------------
// 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, IE10 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------
var ie = (function(){
    var undef,rv = -1; // Return value assumes failure.
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    var trident = ua.indexOf('Trident/');

    if (msie > 0) {
        // IE 10 or older => return version number
        rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    } else if (trident > 0) {
        // IE 11 (or newer) => return version number
        var rvNum = ua.indexOf('rv:');
        rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
    }

    return ((rv > -1) ? rv : undef);
}());

updated to work with IE11. Thanks 'acarlon' for pointing out that it wasn't working, and 'mario' for code that I based the fix on!

Answer 4

IE 11 has changed a lot and now many past methods of browser detection do not work. The below code works for IE 11 and earlier.

function isIE()
{
    var isIE11 = navigator.userAgent.indexOf(".NET CLR") > -1;      
    var isIE11orLess = isIE11 || navigator.appVersion.indexOf("MSIE") != -1;
    return isIE11orLess;
}