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?

I'd just use IE conditional commenting. Besides, none of my friends or family even know about IE 10. — Tyler Crompton, Sep 06 '11 at 14:08
IE10 will probably be standards compliant enough to not need any hacks. And Tyler, the question said it doesn't support conditional comments. — BoltClock, Sep 06 '11 at 14:11
@BoltClock Unfortunatelly there are some weird variations even among the standard compliant web browsers (Webkit/Firefox/Opera) thus a selector such as @-moz-document really helps out, when attempting to create a pixel perfect experience across all browsers. Even though I'm a big fan of allowing browsers show a slightly different experience for their users - my client doesn't. — kunambi, Sep 06 '11 at 17:57

score 33 · Accepted Answer · edited Nov 06 '12 at 15:58

33

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.

edited Nov 06 '12 at 15:58

MaVRoSCy

17,747
15
82
125

answered Nov 06 '12 at 15:39

Alex Kloss

346
3
2

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 :-) – kunambi Nov 08 '12 at 16:06
5

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. – David Storey Dec 14 '12 at 16:23
1

Just tried using this method. Only works in the dev environment, not production. – agassi0430 Apr 30 '13 at 02:51

score 5 · Answer 2 · edited Dec 13 '12 at 23:15

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.

score 3 · Answer 3 · answered Sep 06 '11 at 14:04

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?

answered Sep 06 '11 at 14:04

NT3RP

15,262
9
61
97

score 2 · Answer 4 · edited Sep 28 '12 at 21:34

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;
    }
}

Are There Specific CSS Selectors Targeting IE10?

4 Answers4

Linked

Related