Search code examples
javascriptinternet-explorercross-browserbrowser-feature-detection

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


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


Solution

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