Home » Wordpress » IE10 CSS Hacks

IE10 CSS Hacks

@media -ms-high-contrast Hack

This one comes from a gist by German developer Alex Kloss. It takes advantage of two things: 1) The fact that IE10 supports media queries; and 2) The fact that IE10 supports -ms-high-contrast as a media query option, which IE9 doesn’t support.

  1. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  2.    /* IE10-specific styles go here */
  3. }

According to Alex, this targets IE10 in both high contrast and default mode, which will evidently cover all stable versions of IE10.

This hack doesn’t work in older Platform Preview releases, because it seems that -ms-high-contrast wasn’t supported in those. I can confirm that it doesn’t work in IE10PP2.

Also, as Alex points out in the comments on the gist, this will also target IE11, so again this may not be a great choice.

@media Zero Hack

Finally, this one will target both IE9 and IE10, but nothing else. Not exactly ideal, but it’s an option if you need it.

  1. @media screen and (min-width:0) {
  2.     /* IE9 and IE10 rule sets go here */

This one might eventually be the best choice, but maybe not at the moment. Eventually, IE9 users are supposed to get notified via Windows Update to upgrade to IE10. This is supposed to include Windows 7 users. If this happens (and I’m not holding my breath), eventually IE9′s market share will be taken over by IE10, the same way this happens with other browsers that auto-update.

And in addition to that, if this parsing bug is fixed in IE11, then that means it will also be future proof. But we won’t know until IE11 is released.

About these ads