Search code examples
javascriptinternet-explorerbrowser-detectionconditional-comments

Javascript IE detection, why not use simple conditional comments?


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.


Solution

  • 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.