Targeting IE10 with an IE10 class appended to the html tag

Question

I'm having some issue with the Extjs elements that we implement on our site and need to perform some IE10 specific styling to fix these issues. I understand that IE10 no longer supports the old IE style comments where you could conditionally specify a different html tag with a different class appended depending on the version of IE. So, in this case I'm going to have to use jQuery to append an IE10 class the HTML tag which isn't the best solution but as our users are required to have Javascript enabled anyway it's the best option we have for the moment.

I'm current using the following segment of code to try and achieve this:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script type="text/javascript">
      if ($.browser.msie && $.browser.version == 10) {
         $("html").addClass("ie10");
    }
    </script>

However if I look in the developer mode / view the source of the page in IE10, nothing is being appended to the HTML tag. I then used Firebug (because IE developer tools are terrible) to check whether there are any issue with the script I was using and I have the following message in my console:

  TypeError: $.browser is undefined
     [Break On This Error]  

      if ($.browser.msie && $.browser.version == 10) {

As I rarely use Javascript for browser detection I admit that I borrowed this script from the web and the comments all suggested it works but as you can see it clearly doesn't.

Does anyone have any ideas as to how this can be adapted so that it does work or indeed any alternatives that I could use to target IE10 specifically with my CSS?

The reason for your problem is because browser is not a part of jQuery anymore as of version 1.9. You are better of using some kind of feauture detection like Modernizr. — Alex, Mar 28 '13 at 10:37
see here http://stackoverflow.com/questions/9645803/whats-the-replacement-for-browser for more info — olly_uk, Mar 28 '13 at 10:39
@jezzipin There is actually no direct replacement for browser detection which is recommended to use. Have a look at http://modernizr.com/, it can detect certain features to help you target IE10. — Alex, Mar 28 '13 at 10:40
@Alex I've used Modernizr on several other projects but it won't help here. I need an IE10 specific class that I can target whereas this will only provide feature detection (It's only a tiny piece of CSS I need to overwrite for IE10) — jezzipin, Mar 28 '13 at 10:46

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

You can use conditional compilation to get only IE10, this is a good way because it does not rely on jQuery or anything that could be spoofed(afaik).

Tested it on IE8, IE9, IE10, Chrome and worked as expected in all.

Usage:

if(Function('/*@cc_on return document.documentMode===10@*/')()){ $("html").addClass("ie10"); }

read on: https://stackoverflow.com/a/13971998/1711038

edited May 23 '17 at 10:32

Community

1
1

answered Mar 28 '13 at 10:52

Alex

423
8
22

1

I was just about to type this solution but you beat me to it. It seems to be the only successful method out of all of the suggestions. – jezzipin Mar 28 '13 at 10:59

score 0 · Answer 2 · answered Mar 28 '13 at 11:08

jQuery's $.browser function has been deprecated since jQuery v1.3.

More importantly for you, with version 1.9, jQuery removed a lot of old deprecated features, including this one. That's the reason it's not working for you.

If you must use the old deprecated features, the jQuery devs do provide a separate migration library that brings back all the old features. But it's only really intended for use as a short-term stop-gap measure; the recommended solution is to fix your code so it doesn't use the old features.

The reason jQuery deprecated $.browser is because browser detection is considered poor practice. In virtually every case where you'd want to do it, there is a better, more standards-compliant method of solving the problem, and the newer the browser, the more likely that is to be the case -- there are arguably good reasons to still use browser detection for IE6 and the like, but IE10 is a pretty decent browser, and I'd be surprised if you've really got an insurmountable problem with it.

There are a few ways to detect IE10 (and I note that you've already accepted one answer), but to be honest, I'd say you're better off finding the underlying cause of the styling issue you have, and fixing that, because otherwise you're going to be doing this whole exersise again when IE11 is released.

The underlying cause is a piece of CSS that applies a shadowing effect to drop-down menus in ExtJS that is specific for IE. If this is removed it affects the look and feel of the older browsers that we support. Therefore we only need to remove it for IE10 hence why in this case browser specific targeting IS required. Thanks for your response though. All stuff that I knew already but it'll be helpful to other users who haven't been developing for the web for years. — jezzipin, Mar 28 '13 at 11:13

score 0 · Answer 3 · answered Apr 08 '13 at 10:11

As you're using ExtJS why not use it to solve the problem?

ExtJS 3.4.0 doesn't recognise ie10 but there is an override available: https://market.sencha.com/extensions/ext-isie10-for-extjs-3-x

then you can use:

if (Ext.isIE10){
    Ext.fly(document.body.parentNode).addClass('ie10');
}

working code:

Ext.onReady(function () {
    // override v3.4.0 ie10 = ie6 bug
    // https://market.sencha.com/extensions/ext-isie10-for-extjs-3-x
    (function() {

        var ua = navigator.userAgent.toLowerCase();
        check = function(r) {
            return r.test(ua);
        },
            isIE10 = Ext.isIE && check(/msie 10/),
            isIE6 = Ext.isIE && !Ext.isIE7 && !Ext.isIE8 && !Ext.isIE9 && !isIE10;

        /**
         * True if the detected browser is Internet Explorer 6.x.
         * @type Boolean
         */
        Ext.isIE6 = isIE6;

        /**
         * True if the detected browser is Internet Explorer 10.x.
         * @type Boolean
         */
        Ext.isIE10 = isIE10;

    })();

    if (Ext.isIE10){
        Ext.fly(document.body.parentNode).addClass('ie10');
    }

});

Thanks for this but I tend to avoid ExtJS programming and stick to other libraries like jQuery. Also, as I don't do the ExtJS programming for our company I don't want to introduce functionality such as this that may affect other functions elsewhere. — jezzipin, Apr 08 '13 at 10:25

score 0 · Answer 4 · answered Jun 30 '13 at 09:59

0

If you are only interested in having browser detection for IE then we use the following approach which seems to work. You can change the DIV which you want to add it for by passing the correct ID.

    <!--[if IE 10]>
    <script  type="text/javascript">
        $(document).ready(function() {
            $("#ieFix").addClass("ie10");
        });
    </script>
<![endif]-->

answered Jun 30 '13 at 09:59

costasx

1

This is a bad idea. IE specific classes should be added to the HTML or the body and not specific elements like this. What if you have multiple elements that require fixes. You would have to add this individually for all of them. – jezzipin Jul 01 '13 at 14:04

score 0 · Answer 5 · answered Oct 11 '13 at 01:54

Layout Engine uses feature detection to determine the browser/browser version, and adds the appropriate css class to the html tag. It detects IE11, IE10, IE9, IE8 and IE7, along with other popular browsers including some mobile browsers. http://mattstow.com/layout-engine.html

Targeting IE10 with an IE10 class appended to the html tag

5 Answers5