Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been usingconditional comments, conditional classes, and other IE-specific hacks.
But without conditional comments in IE10, the only options we’re left with to target CSS problems are hacks or browser sniffing — and we certainly don’t want to resort to the latter.
Interestingly, there have been a few posts and code snippets floating around that apparently do target IE10 specifically using a hack. Below is a summary of these three techniques, for reference.
Feature Detecting @cc_on
This interesting bit of code is discussed on this Reddit thread, and comes from someone named Rob W., who posted this code snippet on a StackOverflow thread.
The script is inside of an IE-excluding conditional comment to ensure that IE6-9 don’t recognize it, and then it feature detects something called @cc_on. Here it is:
- <!--[if !IE]><!--<script>
- if (/*@cc_on!@*/false) {
- document.documentElement.className+=' ie10';
- }
- </script>
This appends a class of “ie10” to the <html> element, similar to what conditional classes do. Then in your CSS, just use the “ie10” class:
I don’t know anything about this @cc_on statement, but it seems to work on my IE10 PP. Also, I would assume this would also work in IE11, so this hack might cause problems in the future.
And unlike the other two solutions in this post, this one’s actually reliant on JavaScript, so that’s another point against it.
JS Bin demo
Update (Dec. 6/2012) Someone named “robocat” in the comments has posted
an improved version of this feature detection, which apparently will exclude IE11 and doesn’t require conditional comments. It does, however, trigger an “eval is evil” warning message in JS Bin.
Here’s robocat’s demo
And here’s an alternate version I created that doesn’t have the eval warning:
http://jsbin.com/okuzut/2/edit
You can also try this version, which just prints the current IE version, without testing it:
http://jsbin.com/okuzut/1/edit
But this seems to bug out in IE8, reading it as “ie5″ until you refresh the page. Weird.
@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.
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-
- }
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.
JS Bin demo
@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.
I don’t know who came up with this one, but it’s documented on Keith Clark’s blog.
- @media screen and (min-width:0\0) {
-
- }
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.
JS Bin demo
Concluding Warnings
Truth is, you shouldn’t have to use a CSS hack for a browser like IE10, or even IE9. Use a good CSS workflow and apply good principles when writing your code.
And in most cases when things differ, you should either be able to feature detect to fill in the gaps, or else use graceful degradation to allow acceptable experiences in IE10.
So take this post with a grain of salt and only use these hacks if you’re desperate and you’re on a tight deadline.
If anyone has any other info on these, or knows of any other ways to target IE10, comment and I’ll update accordingly.
Photo credit: Hacksaw on white from Bigstock
댓글