CODEWITHSUNDEEP
javascriptinternet-explorer-10
mikeymike
mikeymike

Reputation: 11

JavaScript browser detection in IE10

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.

Upvotes: 0

Views: 5177

Answers (4)

Programmer Dan
Programmer Dan

Reputation: 289

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}

Upvotes: 2

jcreamer898
jcreamer898

Reputation: 8189

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.

Upvotes: 5

periback2
periback2

Reputation: 1469

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

Upvotes: 0

stackh34p
stackh34p

Reputation: 8999

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.

Upvotes: 0

Related Questions