5+ ways to check IE version using JavaScript/jQuery

Sam Deering

OK, I thought I would bring together every method I know of checking the version of Internet Explorer using JavaScript and jQuery. We all love catering for IE’s needs so if anyone knows of any other ways of making the support of IE versions easier please share and i’ll include in the list. Hawt-sniff…

Basic check for IE using JavaScript

//check for IE7
if(navigator.appVersion.indexOf("MSIE 7.")!=-1)
 

Check for IE version Using Moderizer

Moderizer provides us with an excellent way to detect supported browser features and as you can see below it adds the version on IE.

//check for IE8 or less
if ($('html').hasClass('lt-ie8');

//example of HTML tag populated by modernizer
<html class=" lt-ie9 lt-ie8 js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb no-hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-generatedcontent no-video no-audio no-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" sizset="false" sizcache032866541369794594="704 34 0">

Check for IE using jQuery < 1.9

$.browser is now deprecated since jQuery 1.9 this method won’t work.

//check for IE8 or less
if($.browser.msie && parseFloat($.browser.version)&lt;8){//do other stuffreturn;}

CSS Conditional Injection Script

A short snippet for detecting versions of IE in JavaScript without resorting to user-agent sniffing. Cool.

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;
    
}());

Source: https://gist.github.com/padolsey/527683

Check for IE10 using JavaScript

Browser agent sniffer.

(function() {
  "use strict";
  var tmp = (document["documentMode"] || document.attachEvent) && "ev"
       , msie = tmp 
                  && (tmp = window[tmp + "al"])
                  && tmp("/*@cc_on 1;@*/")
                  && +((/msie (d+)/i.exec(navigator.userAgent) || [])[1] || 0)
  ;
  return msie || void 0;})();

Basic HTML conditionals

The usual method you may have seen your the HTML.

<!--[if IE 7 ]> <div id="system" class="ie7"> < ![endif]-->
<!--[if IE 7]> <script type="text/javascript"> $('#system').addClass('ie7'); </script> < ![endif]-->

Please share if you know any more methods, pitfalls and other observations to help us combat IE.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.facebook.com/vladimir.kharlampidi Vladimir Kharlampidi

    Thre is much easier way to detect IE10 based on feature detection. It has its unique MSPointer events, so to detect it will be enough just on line:

    var isIE10 = window.navigator.msPointerEnabled;

    That is all:)

    • http://jquery4u.com/ jQuery4u

      Cool, will have to check that one out! thanks mate

  • subseven

    i think its modernizer.. not moderizer ;)

    • http://jquery4u.com/ jQuery4u

      :)

      • http://dayaldave.com Dayal Dave

        I think you forgot the EDIT button :P

  • Pingback: Check MSIE 7, 8, 9 using JavaScript | Mark L. Reyes

  • Wallace Vianna

    You could provide full code exemple to people that needs apply the code in your projects and don`t know how insert these exemples in yours projects/codes..

  • Arya

    Great post. You can also use this :

    // CHECK IE BROWSER

    var BrowserDetect =

    {

    init: function ()

    {

    this.browser = this.searchString(this.dataBrowser) || “Other”;

    this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || “Unknown”;

    },

    searchString: function (data)

    {

    for (var i=0 ; i < data.length ; i++)

    {

    var dataString = data[i].string;

    this.versionSearchString = data[i].subString;

    if (dataString.indexOf(data[i].subString) != -1)

    {

    return data[i].identity;

    }

    }

    },

    searchVersion: function (dataString)

    {

    var index = dataString.indexOf(this.versionSearchString);

    if (index == -1) return;

    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));

    },

    dataBrowser:

    [

    { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" },

    { string: navigator.userAgent, subString: "MSIE", identity: "Explorer" },

    { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" },

    { string: navigator.userAgent, subString: "Safari", identity: "Safari" },

    { string: navigator.userAgent, subString: "Opera", identity: "Opera" }

    ]

    };

    BrowserDetect.init();

    // CHECK IE BROWSER

    if( BrowserDetect.browser == 'Explorer' && BrowserDetect.version < 9 ) {

    alert('Less than 9');

    }

  • Your Mum

    Feature detection is a terrible idea! What about cases where a feature is implemented, but it’s full of bugs so it doesn’t render like it should… I’m looking at you IE!