Are There Specific CSS Selectors Targeting IE10?

Question

Since IE is getting rid of conditional comments in version 10, I'm in dire need to find a "CSS hack" targeting IE10 specifically. Note that it has to be the selector that's getting "hacked" and not the CSS-properties.

In Mozilla, you can use:

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

While in Webkit, you usually do:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  h1 {
    color: blue;
  }
}

How would I do something similar in IE10?

Solution 1

The following example shows how to do this

/* 
 #ie10 will only be red in MSIE 10, 
 both in high contrast (display setting) and default mode 
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #ie10 { color: red; }
}

Warning: will probably work in IE11+, too.

Solution 2

Using the css browser selector from http://rafael.adm.br/css_browser_selector/ you can add a simple + to the code and call out IE10 from your CSS.

Look for /msie\s(\d)/ and change it to /msie\s(\d+)/.

Now in your CSS just add .ie10 before your selector like so:

.ie10 .class-name { width: 100px; }
.class-name { width: 90px; }

You should now see IE10 rendering the 100px width and all other browsers rendering the 90px width.

Solution 3

As far as I know, no such CSS selector exists. If you want to target IE10 specifically, why not just write a bit of javascript to set a class on the body element called ie10, then create a specific styles for IE10?

Solution 4

I'm not sure if this fits your selector vs property requirements but I came up with the following method while trying to fake text-shadow in IE7-9 and then turn off the hack in IE10. The key is to use the new -ms-animation stuff in IE10.

.header {
    /* For browsers that support it to add a little more punch to a @font-face */
    text-shadow: rgba(100, 100, 100, 0.5) 0 0 2px;

    /* Make IE7-9 do faux bold instead and then turn down the opacity to match */
    *font-weight: bold;
    font-weight: bold\9;
    *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: 0.75\9;

    /* Uh oh! We've also caught IE10 in our above hack */

    /* But IE10 supports CSS3 animations. Will a high duration keep CPU usage down? */
    -ms-animation: text-shadow 60s infinite;
}

/* Define the animation */
@-ms-keyframes text-shadow {
    0%, 100% {
        font-weight: normal;
        opacity: 1;
    }
}

View more solutions

Comments

[kunambi]

Thank you for your input, I accepted this as an answer. Wether it will target IE11 or not is something I don't think any of us should worry about, for some time :-)

[David Storey]

That is dangerous thinking. Even if it is a long time before IE11 comes out, that means the code will be less fresh in your mind and perhaps harder to fix. Also, no one really knows when the next version of IE will come out, or the bug you are working around will be fixed. I'd only use a hack like this for something that won't break if the bug is fixed in a later version.

[agassi0430]

Just tried using this method. Only works in the dev environment, not production.