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.

Instead of detecting the browser, find the actual issues and write cross-browser code. IE10 is standard enough to comply with standards unlike IE6-7. — Fabrício Matté, Mar 24 '13 at 19:32
I'm serving IE 9 and 10 the same stylesheet as other browsers. — mikeymike, Mar 24 '13 at 19:37
keep your comments for the browser that need (and can use them), and let IE10 use the common code and styles. — kennebec, Mar 24 '13 at 20:43
It's also important to note that IE 10 does not support conditional comments (in the default "Standards Mode"). See [this MSDN article](http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx), which is basically saying what @jcreamer989 says below (to use feature detection). — natchiketa, Jul 22 '13 at 02:22

score 5 · Answer 1 · answered Jun 07 '13 at 16:53

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.

score 2 · Answer 2 · answered Nov 06 '13 at 18:57

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}

Ivaylo Slavov · Answer 3 · 2013-03-24T21:30:39.837

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.

score 0 · Answer 4 · answered May 06 '13 at 13:08

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

JavaScript browser detection in IE10

4 Answers4