Change CSS class if user is using Internet Explorer 10 or higher

Question

I am trying to change the css of 2 ASP controls using jQuery when the user uses Internet Explorer 10 or 11. I need to do this because after IE10 they stopped using conditional comments. Now, I what I try to do is this:

<script>
    $(document).ready(function () {         
        if ($.browser.msie && $.browser.version === 10 || $.browser.msie && $.browser.version === 11) {

            alert('testIf');

            $("#txtUsername").removeAttr('loginInput');
            $("#txtPassword").removeAttr('loginInput');

            $("#txtUsername").css({
                "width": "284px",
                "border": "0px",
                "border-top": "1px solid #646464",
                "border-bottom": "0px #646464 solid",
                "border-left": "solid #646464 4px",
                "height": "33px",
                "background-image": "url(./Images/login-icon.png)",
                "background-repeat": "no-repeat",
                "padding-left": "16px",
                "float": "left",
                "display": "block",
            });

            $("#txtPassword").css({
                "width": "284px",
                "border": "0px",
                "border-top": "1px solid #646464",
                "border-bottom": "0px #646464 solid",
                "border-left": "solid #646464 4px",
                "height": "33px",
                "background-image": "url(./Images/login-icon.png)",
                "background-repeat": "no-repeat",
                "padding-left": "16px",
                "float": "left",
                "display": "block",
            });
        } else {
            alert('testElse');
        }
    });
</script>

I have 2 textboxes like this:

        <asp:TextBox CssClass="loginInput loginUsername" TabIndex="1" ID="txtUsername" autocomplete="off" AutoCompleteType="Disabled" runat="server"></asp:TextBox>

        <asp:TextBox CssClass="loginInput loginPassword" TabIndex="2" ID="txtPassword" textmode="Password" runat="server"></asp:TextBox>

This is my CSS (the only change with the css above is the width):

.loginInput {
    width: 285px;
    border: 0px;
    border-top: 1px solid #646464;
    border-bottom: 0px #646464 solid;
    border-left: solid #646464 4px;
    height: 33px;
    background-image: url(./Images/login-icon.png);
    background-repeat: no-repeat;
    padding-left: 16px;
    float:left;
    display:block;
}

.loginUsername {
    margin-top: 15px;
    background-position: 271px 9px;
}

.loginPassword {
    background-position: 271px -75px;
}

In Internet Explore I only need to change the width so that my css looks right, I tried to put the JS out the document ready function but that also does not work. Can anyone help me out here, tell me what I do wrong and what I should do next.

possible duplicate of [How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?](http://stackoverflow.com/questions/9900311/how-do-i-target-only-internet-explorer-10-for-certain-situations-like-internet-e) — G.Mendes, Jan 17 '14 at 11:14
You should decide the class in ASP.Net code behind, rather than send "incorrect" code to the browser and fix it there. See this for reference - http://msdn.microsoft.com/en-us/library/system.web.httpbrowsercapabilities(v=vs.80).aspx — Reinstate Monica Cellio, Jan 17 '14 at 11:17

score 0 · Answer 1 · edited May 23 '17 at 10:31

The real way to detect this, without conditional comments and without User Agent sniffing is with conditional compilation:

<script type="text/javascript">
    var isIE10 = false;
    /*@cc_on
        if (/^10/.test(@_jscript_version)) {
            isIE10 = true;
        }
    @*/
    console.log(isIE10);
</script>

After running this code, you can use following anytime after:

if (isIE10) {
    // Using Internet Explorer 10
}

Reference: How can I detect IE10 from JS when browser mode is IE9?

Update:

function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

Example:

if (isIE () == 8) {
 // IE8 code
} else {
 // Other versions IE or not IE
}

or

if (isIE () < 9) {
 // is IE version less than 9
} else {
 // is IE 9 and later or not IE
}

or

if (isIE()) {
 // is IE
} else {
 // Other browser
}

When I change all 10's to 11's in your code, is that the way to do the same thing for IE11? If so, then isIE10 (isIE11 in my case), returns false — Niek Jonkman, Jan 17 '14 at 11:22
@NiekJonkman:it should give you whether browser is IE or if IE then which version.Please check updated answer — Milind Anantwar, Jan 17 '14 at 11:35

score 0 · Accepted Answer · answered Jan 17 '14 at 11:24

Your problem is in detecting the browser. run the code in js fiddle, and notice that you allways reach the else block, even in ie 11 .

As Archer pointed out, you might as well detect this server side and send different css to client.

Aside from that, why are you doing this:

 $.browser.msie && $.browser.version === 10 || $.browser.msie && $.browser.version === 11

Instead of this:

$.browser.msie && $.browser.version > 9

score 0 · Answer 3 · answered Jan 17 '14 at 11:27

Check out Conditionizr which was built for this purpose, you can add environment detects and it returns an Object for you to manage your tests with, here's IE10 detect. Note we're also UA sniffing to ignore the Mobile version of IE10, which we'll suitably want to ignore as we would target Mobile IE differently as the two aren't the same. IE11 detect.

conditionizr.add('ie10', [], function () {
  var version = false;
  /*@cc_on
    if (/^10/.test(@_jscript_version) && /MSIE 10\.0(?!.*IEMobile)/i.test(navigator.userAgent))
    version = true
  @*/
  return version;
});

You'll then be able to use it like so to add a class (note ['class']):

conditionizr.add('ie10', ['class'], function () {
  var version = false;
  /*@cc_on
    if (/^10/.test(@_jscript_version) && /MSIE 10\.0(?!.*IEMobile)/i.test(navigator.userAgent))
    version = true
  @*/
  return version;
});

Which gives you full Object access too for inline JavaScript development:

if (conditionizr.ie10) {
  // IE10...
}

You can also run callbacks:

conditionizr.on('ie10'[, callback]);

Change CSS class if user is using Internet Explorer 10 or higher

3 Answers3