Best way to detect <= IE10

Question

What's an up-to-date way for detecting IE?

conditional comments don't do ~~IE9~~, IE10
modernizr feature detection doesn't help here, because the reason is external (IE bug in a mapbox map I want to embed)
jQuery + migrate plugin: if this helps, what are the basic steps?

Yeah, I'm rather new to this. Cheers!

I would look at existing questions such as: http://stackoverflow.com/questions/9900311/how-do-i-target-only-internet-explorer-10-for-certain-situations-like-internet-e — Justin Helgerson, Jun 12 '13 at 21:52
To correct your first point, IE9 *does* do conditional comments. It's only in IE10 that it stopped supporting them. — Spudley, Jun 12 '13 at 21:54
Usually in practice you don't actually want to detect IE, instead you want to detect IEs lack of a certain feature. It is usually a cleaner route to check for that feature instead of the browser, as it will also fire for other browsers which lack that feature. The core issue then is why are you checking for IE? — Nucleon, Jun 12 '13 at 22:06
@Nucleon I don't know why mapbox pins are not shown in IE. They say they're aware of the bug. — David Diem, Jun 12 '13 at 22:10

Joe · Accepted Answer · 2013-06-13T09:44:44.180

19

Use conditional comments for IE6-9 and a little custom function for IE10. For example: HTML:

<!--[if lt IE 7 ]> <html class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ie"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9 ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

JS:

if ($('html').hasClass('ie') || (Function('/*@cc_on return document.documentMode===10@*/')())){
    isIE = true;
}else{
    isIE = false;
}

or you can just use:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie';
}
// Then..
if($('html').hasClass('ie')){...} // to check for IE10 and below.

Other answers focus on specifically detecting IE10 but I thought it would be helpful to show complete detection code in one place.

edited Jun 13 '13 at 09:44

answered Jun 12 '13 at 21:53

Joe

14,083
8
46
56

Doesn't that just test for a class on the html element? – Chad Jun 12 '13 at 22:00
@Torr3nt - yes, the code directly above it adds the `ie` class to the `html` element if IE10 is detected. You could just as easily define a variable like I did in my first example. – Joe Jun 12 '13 at 22:02
On that note, can't you just use a conditional to target IE? ``, or does IE10 not support the general IE conditional either? – Chad Jun 12 '13 at 22:08
@Torr3nt - no, IE10 doesn't support conditional comments so you have to use an alternative. – Joe Jun 12 '13 at 22:10
The JS-if/else does not output anything, do you know what's wrong here? (html comments are replaced by actual code, no worry) – David Diem Jun 12 '13 at 22:40
I got it now. Thanks for the answers! – David Diem Jun 12 '13 at 23:39
If I wanted to say IE 10 or less could I just change `document.documentMode===10` to `document.documentMode<=10`? I understand I could use the conditionals for under 10 but in my case, the script (polyfill) I'm using needs to fire for anything 10 and under so I might as well just do it like that if I can. – SpatialAnomaly Mar 23 '17 at 15:25

score 3 · Answer 2 · answered Jun 14 '13 at 20:28

    <!-- IE10 -->
    <script>
    if(navigator.userAgent.match(/MSIE 10/)){

        var headID = document.getElementsByTagName("head")[0];   
        var newLink = document.createElement('link');

        newLink.rel = 'stylesheet';
        newLink.type = 'text/css';
        newLink.href = 'css/ie10.css';

        headID.appendChild(newLink);
    } else {
       /* do something for other versions */
    }
    </script>

Best way to detect <= IE10

2 Answers2