JavaScript browser detection in IE10

Question

I'm updating my website design because it doesn't work properly in IE10.

I was using a combination of conditional comments and JavaScript to handle IE version detection, but since IE10 has dropped the former and I haven't found a reason for it ignoring the latter, I'm seeking help here. I've been reading this thread:

Detect IE version (prior to v9) in JavaScript

But my knowledge of JavaScript isn't far off zilch, so I'm not sure whether I should be looking to modify my code or scrap it and adopt and change the code mentioned in that URL (and if so, how I should do that).

The code I'm currently using:

<link rel="stylesheet" type="text/css" href="barebones.css">

  <!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie.css">
  <![endif]-->

  <!--[if gt IE 8]>
    <link rel="stylesheet" type="text/css" href="default.css">
  <![endif]-->

<script type="text/javascript">
    //<![CDATA[
    var appName = window.navigator.appName;
if (appName !== "Microsoft Internet Explorer")
document.write("<link rel=\"stylesheet\" type=\"text\/css\" href=\"default.css\" \/>");//]]>
</script>

If it helps I can post my site URL but I didn't want people to think I'm trying to get more site traffic or something.

I know that the code I'm currently using can be refined a bit but I would rather get things working before having a spring clean.

IE10 on more than one machine seems to ignore the JavaScript completely and I don't know why. IE9 handles it fine.

Any assistance would be much appreciated.

Answer 1

It's best when dealing with these kind of issues to avoid "broswer detection" and go with a "feature detection"

A library like http://modernizr.com/ will help you test for specific features that browser's are compatible with rather than hacking around different versions of browsers.

That being said, IE10 tends to be a standards compliant browser. You can visit http://caniuse.com/ and find charts of the various JavaScript and CSS features and which one's are supported in all the different browsers.

You'll find that IE10 adheres to a great deal of these standards.

Answer 2

Although I like a number of the answers above, I know that sometimes having an array of possible quick fixes to given a problem can sometimes make all the difference. Thus, here's another solution I've found that works well:

<script language="javascript" type="text/javascript">
    if(Function('/*@cc_on return 10===document.documentMode@*/')()) document.documentElement.className+= ' ie10';
</script>

Then to implement the browser-specific css rules, in an appropriate css file I add (for example):

.ie10 div{new css rule}
.ie10 div{another new css rule}

Answer 3

Recently I've adopted css browser selector as a solution. It is a js that appends specific css class to the document root so you can handle style discrepancies in browsers inside your css without hacks. It is pretty old though and does not support IE10, but as others are saying, IE10 is pretty standard. It handles IE6, 7, and 8 though (and you seem to take special measures for these browsers) so I am guessing it will work for you.

In general, you should avoid browser specific hacks or checks like these, since they are hard to maintain and not guaranteed to always work.

Answer 4

Since IE10 doesn't recognize conditional comments and what you need is to detect the browser version, I've implemented a function to do this:

    function getIEVersion() {
        if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { 
        /*
         * sample user-Agent
         * "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)" 
         */
         //test for MSIE x.x;
         var ieversion = new Number(RegExp.$1); // capture x.x portion and store as a number
         return ieversion;
        }
    return -1;
    }

    alert(getIEVersion());

it returns the number of the IE version. (ex: 10, 9, 7..)