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.

Answer 1

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
}

Answer 2

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 

Answer 3

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]);