Google Chrome picking up IE9 specific media queries

Question

I m trying to apply a certain styles to IE9 browser alone for it to work. I referred a few articles (Jeff Clayton, ryadel) and this answer, they suggested me to go with this:

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 .ie9only { /* some  styles */ }
}

This seems to work fine in IE browsers, but the styles are also picked up Chrome browser too. Not sure is that a bug or the intended way. Can someone help me in selecting IE9 alone with media query, thanks in advance.

Answer 1

As explained in the linked question media queries are media queries and not browser queries and therefore you simply should not even try this. Because what you are searching for is complicated hacks. They are hard to test and they will make your project hard to maintain.

Beside the fact that I really feel sorry for you that you still have to support IE9 I would recommend one of the following solutions:

1) Use conditionals

<!--[if lte IE 9]>
  <link rel="stylesheet" type="text/css" href="ie-only.css">
<![endif]-->

This is probably the best way. Microsoft knows IE is bad and this is why they have introduced them. An important bonus: All other browsers do not have to download shitty IE9 CSS.

2) Use a class on the HTML-body (with JavaScript)

var browser = {
        isIe: function () {
            return navigator.appVersion.indexOf("MSIE") != -1;
        },
        navigator: navigator.appVersion,
        getVersion: function() {
            var version = 999; // we assume a sane browser
            if (navigator.appVersion.indexOf("MSIE") != -1)
                // bah, IE again, lets downgrade version number
                version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            return version;
        }
    };

if (browser.isIe() && browser.getVersion() == 9) {
     document.body.className += ' ' + 'ie9';
}

In your CSS you simply do:

.ie9 #my-elem-to-style {

}

The simple rules of CSS specificity will solve your problem then.

3) Use a library if it is applicable (e.g. Modernizr)