Parent pages:
  1. Home
  2. Articles
  3. Internet Explorer (IE) version detection in JavaScript

Internet Explorer (IE) version detection in JavaScript

Author:
Marat Tanalin
Published:
Updated:
Summary
Minification-safe detection of Internet Explorer (IE) browser version with JavaScript.

IE version detection in JavaScript can be performed by checking existence of global objects added in specific IE versions.

Following table shows such objects for all current IE versions.

IE version Supported indication object
9 document.getElementsByClassName
8 document.querySelector
7 window.XMLHttpRequest
6 document.compatMode

By checking existence of this objects, and combining such checks when needed, it is possible to reliably filter specific IE version or a range of IE versions.

Distinguishing IE from other browsers can be done by checking existence of non-standard document.all object that exists only in IE.

The method reliably works including a cases when minification is used.

Examples

Code in following condition runs only in IE7 or lower:

if (document.all && !document.querySelector) {
    alert('IE7 or lower');
}

Next one runs in IE8, but not in IE7 or IE9:

if (document.all && document.querySelector && !document.getElementsByClassName) {
    alert('IE8');
}

Using inside behaviors (*.htc)

HTML Components (*.htc) are HTML documents of special type that contains JavaScript scripts. Such documents are binded to HTML elements by using non-standard CSS property named behavior and supported only in IE. To use IE version detection with global object checking, htc-file should contain DOCTYPE declaration as any other valid HTML document should:

<!DOCTYPE html>

Otherwise, all indication objects listed above (except for window.XMLHttpRequest) will not exist regardless of an IE version.

In addition, due to behavior feature is supported only in IE, checking for document.all is unneeded in this case.

Other ways to detect IE version

Conditional compilation

Sometimes conditional compilation is used for IE version detection. Conditional compilation involves non-standard conditions based on JavaScript comments and supported only in IE:

var ieVersion = /*@cc_on function(){ switch(@_jscript_version){ case 1.0:return 3; case 3.0:return 4; case 5.0:return 5; case 5.1:return 5; case 5.5:return 5.5; case 5.6:return 6; case 5.7:return 7; }}()||@*/0;

Unfortunately, this is unsafe when using in combination with JavaScript code minification (e.g. with Google Closure Compiler). This is because comments are usually removed during minification.

Conditional comments

Conditional comments are non-standard feature available only in IE and based on HTML comments.

To detect IE version in JavaScript, conditional HTML comments can be used different ways.

  • Initializing JavaScript variables in static HTML code:

    in HTML:
    <script>
        var ie = false;
    </script>
    <!--[if lte IE 7]><script>
        ie = 7;
    </script><![endif]-->
    in external JavaScript file:
    if (7 === ie) {
        alert('IE7 or lower');
    }

    Drawbacks of the method are limited flexibility, HTML code pollution, and scattering logic to several files, that makes working with such code as well as its maintenance harder.

  • Dynamic generation of temporary HTML element that contain a node inside conditional comment, and following checking of child nodes’ existence in the element:

    var test = document.createElement('div');
    test.innerHTML = '<!--[if lte IE 7]>1<![endif]-->';

    if (document.all && test.childNodes.length) {
        alert('IE7 or lower');
    }

    Compared with checking for global objects, this method is less graceful and works slower.

Browser version detection and good practices

Generally speaking, feature availability should be detected directly. For example, to determine if JavaScript querySelector() method is available, existence of exactly querySelector object should be checked. Otherwise, script may consider a feature unavailable, though it actually is available.

However, IE is behind all other browsers so considerably that many features are knowingly unavailable only in IE. Because of that, it is impractical to do formally full-featured, but slow checks in other browsers in such cases.

For example, to check support for display: table CSS property, we formally should do it following way:

  1. create temporary element;
  2. set table as value of its style.display DOM property;
  3. compare actual style.display value with table string.

But considering that display: table is for a long time supported by all browsers other than IE, and that IE supports it as of version 8, it is enough to just check IE version indirectly:

if (document.all && !document.querySelector) { // IE7 or lower
    alert('{display: table} is not supported');
}

This is much faster while quite future-proof.