Downsides of using the navigator object / user-agent sniffing for detecting IE versions

Question

With the release of jQuery 2.0, there has been a lot of talk about how to identify if the user is using an IE version which is supporting it or not (jQuery 2.0 only supports IE9 and later).

My question is why a solution like this:

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;

}());

is preferred over looking at the navigator object:

function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

Source

Answer 1

Feature detection (in this case, detecting support for conditional comments) is reliable as you know that a given version of a given browser has implemented a given feature in a certain way. Even if a later version removes this feature (in this case, conditional comments being dropped in IE10), it does not change how previous versions have implemented it. Likewise for a feature that wasn't implemented before and is later introduced in a newer version.

When working with standards, feature detection is also often vendor-independent. You're looking at whether a feature is supported by the browser, regardless of what sort of browser it is. This helps facilitate interoperability between browsers, while avoiding unnecessary discrimination.

On the other hand, when working with user agent strings, you're depending on the value of an arbitrary string that can be manipulated in all sorts of ways, not just by third parties or author code, but even by the user agent itself. This string is complex and difficult to parse, and often code that tries to parse it will fail in spectacular ways. That's what makes UA sniffing so unreliable.

modern.IE explains the downsides better:

Always prefer feature detection over browser (navigator.userAgent) detection.
The userAgent string is a poor indicator of whether a particular feature (or bug) is present. To compound the problem, much of the code that interprets userAgent does so incorrectly. For example, one browser-sniffing library expected the major version to be only a single digit, so it reported Firefox 15 as Firefox 1 and IE 10 as IE 1! It is more reliable to detect the feature or problem directly, and use that as the decision criteria for code branches. We recommend Modernizr as the easiest way to implement feature detection.

Answer 2

If you need to support old IE versions, you could just stick with jQuery 1.9. jQuery are continuing support for v1.x specifically for people who need to support older IE versions. Only move to jQuery v2 if you are happy that your site will no longer work in old IE versions.

Alternatively, if you really do want to use jQuery 2.0 for newer browsers but still support old IE versions, you can simply use conditional comments to switch between jQuery 1.9 and 2.0 depending on the IE version.

The following is all that is required:

<!--[if lt IE 9]><script src="jquery-1.9.1.js"></script><![endif]-->
<!--[if gte IE 9]><!--><script src="jquery-2.0.0b2.js"></script><!--<![endif]-->

This was taken directly from notes on the jQuery site, and will provide jQuery v1.9 for old IEs and 2.0 for all other browsers.

Beyond that, both jQuery version 1.9 and 2.0 have the same API and should work identically. None of the IE version detection code in your question is necessary. So the direct answer to your question of "which is better?" is "neither".

Answer 3

As Spudley mentioned, sticking with one version of jQuery is probably the best option for now. If you need to support IE8 and below, use v1.9.x. If you're happy to support IE9 and above only, v2.x is fine.

Conditionally loading either library could cause issues. Testing is more difficult and, if you discover an inconsistency in jQuery's API (e.g. something works in 2.0 but not 1.9), it'll be awkward to fix.

In general, browser sniffing should always be avoided. Personally, I try to avoid Conditional Comments too.

Answer 4

I believe Spudley's solution is best if you want to support both versions of jQuery. However, if you don't want to program for both versions of jQuery and just want to redirect the user an old site that supports an IE version less than 9, you could use:

// This will always tell you if you are running IE, whether the user is faking
// a user agent or not, even in IE 10.
var isMSIE = /*@cc_on!@*/false;
if(isMSIE && parseInt(navigator.userAgent.toLowerCase().split("msie")[1],10) < 9) {
    // Your code to redirect the user to the old site.
    location.href = "old site url";
}

or

<!--[if lt IE 9]><script>location.href = "old site url"</script><![endif]-->

IE 10 will ignore it since it no longer supports conditional comments and IE versions less than 9 will redirect to your old site.

As Spudley said you could just use jQuery 1.9.1.