Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best way to detect <= IE10

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!

like image 457
David Diem Avatar asked Jun 12 '13 21:06

David Diem


2 Answers

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.

like image 119
Joe Avatar answered Nov 09 '22 19:11

Joe


    <!-- 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>
like image 44
gs-rp Avatar answered Nov 09 '22 20:11

gs-rp