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 using conditional 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><!--<![endif]-->
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:
.ie10 .example {
/* IE10-only styles go here */
}
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.
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) {
/* IE10-specific styles go here */
}
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.
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) {
/* 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.
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.
It seems that IE10 supports
window.matchMedia, so this script would work:// Using media query in method 2 if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) { document.documentElement.className += "ie10"; }Can’t IE9 conditional comment support and the above @media Zero Hack be combined like:
<!--[if gt IE 9]><!--> <style> @media screen and (min-width:0) { /* IE10 rule sets go here */ } </style> <!--<![endif]-->to target only IE10? Haven’t tried, just guessing.
Sorry I meant: <–[if IE 9]><!–>
No, I don’t think that will work, because IE10 can’t read conditional comments. That’s why you have to use “if !IE” with the proper syntax, so IE10 can read it like other browsers do.
Yep, I exactly used it here that IE10 doesn’t read conditionals. Check it again, I fixed the typo in it:
<!--[if IE]><!--> <style> @media screen and (min-width:0) { /* IE10 rule sets go here */ } </style> <!--<![endif]-->IE10 will skip only those lines in which the conditionals are because they are full html comments. Other IE versions that understand conditionals (=lte IE9) will read the conditionals and compiles a <!– before the <style> making IE9 and under skip the style definition.
In other words the above conditionals are for detecting “not IE” browsers but as IE10 doesn’t read it, it behaves as if it wasn’t IE.
I tested it, it also works in IE9, because it says “if IE”. This is similar to the first one in my post, so you have to use “if !IE” to get it to work only in IE10.
<< 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. >>
AMEN! The number of times that IE is being used as an excuse for sloppy code, is unbelievable.
- “My site looks great in all browsers except of course stupid IE piece of shit browser!”
- “Well close your tags properly and try again.”
- “O hey it works now!”
I see it so often.
Right on the money. Making IE 10 hacks possible is a solution to a non-existing problem.
Or was it meant to be used to hide features currently supported only by IE 10 from other browsers? No need for that either; rely on progressive enhancement.
Not so true, theoretically, yes, but when using a lot of open source plugins, icon fonts, etc., IE, even IE10, renders things differently, even slightly is enough for me to lose my ****, so, no, I don’t agree with any of you at all. In the real world IE is still the biggest problem. For instance, Absolute and Fixed positioning is still different in IE10, wtf already.
Even if the rendering of HTML and CSS is mostly correct in IE, there are still issues where conditional statements would come in handy. I’ve noticed that the font rendering in IE10 is much bolder than it is in other browsers, leading to a completely different layout. Especially with todays layouts, where big and bold fonts are very prominent this is an annoying issue to say the least.
Hm, you “”? You read comments? Don’t disappoint me! ;-)
Haha.. touche!
I completely blanked out on that one. I didn’t understand the concept when you first introduced it, so it didn’t really stick with me. But kudos for having mentioned it a while ago… Now if I could only convince you to stop using IDs as selectors…. :))
Just try. Oh, you did. ;-)
Ad first example: I’m not quite sure, but if I use a feature hack to distinguish browsers, why just not do a user agent query?
Because feature detection sniffs the UA string, which, technically speaking, can be spoofed or can be wrong, and often is not forwards compatible.
I don’t think you can spoof the @cc_on thing, so it seems to be a safer bet overall, but this is from my little knowledge of @cc_on.
This is exactly what Modernizr is for. As web developers, we shouldn’t be trying to figure out what browser we’re in, we should be checking to see if the features we need are supported, and acting appropriately either way. That path makes code robust instead of brittle, and that is something we should all be able to agre is a good thing.
Exactly!
Shouldn’t we just move on and make use of feature detection? We have modernizr now, and @supports will eventually be part of CSS. How many things will we really need to worry about in IE10 anyway? There are a few in IE9, but not many.
Folks,
IE is not the browser where you use hacks anymore! I’m actually more satisfied with IE 9+ than with FF. Just follow basic practices and there will be no issues.
If you need to work with IE 8 / IE 7, it’s understandable.
Like the other comments, this is absolutely true. I’ll probably never use these hacks myself (see the article’s conclusion section), but I just wanted to have them all documented in one place, that’s all.
The code example you have used for @cc_on is a very poor example of browser sniffing because it will be wrong when ie11 comes out.
An improved version of the code is:
Which you can test using: http://jsbin.com/upofoq/2
Improvements:
* doesn’t need conditional comments;
* works even if comment stripping compression/processing;
* no ie10 class added in ie11;
* more likely to work as intended with ie11 running in ie10 compatibility mode;
* doesn’t need standalone script tag (can just be added to other javascript in head).
PS: This web page uses up 500MB of memory if left open overnight on Chrome – ouch!
Nice, thank you. I’ll put a note in the article pointing to your comment.
Keep in mind that I didn’t write any of these scripts, they’re all stuff I found elsewhere. I definitely didn’t know about the possibility of using
document.documentMode.One question: I tried running that code in IE8, after changing the “10″ to “8″, with no success. Does IE8 not recognize that code?
As for the memory thing… I’m not sure why the memory usage on the page would continue to grow like that. I’ll have to test and see. Thanks.
Note: Left this page open in Chrome for more than a day, and no problem with memory. Not sure why that happened to you.
You “definitely didn’t know about the possibility of using
document.documentMode”?You definitely should have.
Too many comments to read! (I probably just skimmed over it)
Looking further into this, I think this version works a little better:
Or maybe even:
if (/*@cc_on!@*/false) { document.documentElement.className+=' ie' + document.documentMode; }These both avoid the "eval" warning and the second one will just add the class based on the document mode. Of course, if you're using CC's for IE6-9, then you wouldn't really need the second one.
And the oddest part is that my native install of IE8 reads the document mode as "ie5". But when you switch document modes in IE8, and then go back to IE8 mode, it then recognizes it as "ie8", which has to be a bug.
I’d like to reiterate the warnings about using hacks such as media queries to detect IE and apply fixes for current IE10 bugs. At Opera I dealt with numerous issues caused by such practices, which had wide reaching consequences beyond Opera itself.
Back then Opera was the only browser to support Media Queries. Developers started using this as a way to target only Opera. When we fixed bugs, sites would suddenly break as we still supported media queries, but the bug didn’t exist anymore. When other browsers were considering supporting Media Queries they saw that they would suddenly get the broken old Opera code, and break in the same way as modern versions of Opera. I’m pretty sure this delayed the introduction of Media Queries support in other browsers. Fortunately we were able to clean up a lot of the mess (at least for the bigger sites) by reaching out to developers, but that is a slow manual task and doesn’t always work.
Some of these hacks wont be as serious as the general Media Query hack in Opera, as they target -ms- queries or something that is non-standard, but it will break in the same way for IE11 and up as it did for Opera if Microsoft fixes the bug you’re working around, but doesn’t remove support for the -ms- query or @cc_on or whichever method you use. Although browser sniffing is *evil* it is sometimes the better choice if you can’t perform feature detection or use something like Modernizr. I’d advise to detect the version when you browser sniff, and update that sniff when a new version comes out, if the bug wasn’t fixed. Err on the side of letting the browser work if it does the right thing, rather than assume it will be broken forever.
So my main question here is: what do you need IE10 hacks for? I haven’t been made aware of significant lack of support for popular features, or significant bugs, in IE10′s rendering model.
It seems to me that IE10 absolutely deserves the landmark implicit in their removal of conditional comments – IE10 is a solid browser, genuinely on a par with other modern browsers. (Not that I’m going to use it as my default or anything…)
Have you checked IE 9 & 10 on html5test.com? or caniuse.com for css3 support? IE10 is embarrassingly far behind every other browser in its support for modern standards. At best they achieve “acceptable” performance (finally no need to shiv for basic HTML 5 elements).
Microsoft also manages to incorrectly flag things as supported that actually are not. IE 9 & 10 both pass Modernizrs “multiplebg” test, but neither can support multiple bgs with a gradient background.
It was WAY too soon for them to stop supporting conditional comments.
Maybe in another 5 – 10 years when they can get middle america to upgrade past IE 7 & 8 and get everyone on track to auto updating browsers.
Microsoft Please stop releasing new versions of IE. Instead, keep the current version updating itself (just like chrome). You have given enough damage to internet already. JUST STAHP.
Well, I guess IE is obsolete to death, I don’t know why because Microsoft is a Corporate Organization and everything they sell is paid, even operating systems then there is no reason they should sit idle after releasing a new browser…
I love firefox, just because you will still find the development for their 4.0 versions… Lol, it seems silly but yes that’s truth…
I’ve written a small, vanilla JavaScript plugin called Layout Engine, which allows you to feature detect IE 10 (and every other browser), in a simple way that cannot be faked, unlike user agent sniffing and doesn’t use hacks.
Check it out on GitHub: https://github.com/stowball/Layout-Engine
Looks cool, thanks.
Hi, the media Zero Hack work for me, but class .ie10 dont work.. just do not understand why
Are you referring to the one described under “Feature detecting @cc_on”? What happens when you view this page in IE10:
http://jsbin.com/evimed/1/edit
Do you see a blue background? If you do, then it’s working. Remember, if you use “.ie10″ then you also have to include the code in the script tag in the head of the document first.
Argh, Microsoft. Always trouble with IE. Their problem described bij Steve Jobs is the best: Microsoft just has no style. No feeling, no emotion, no passion.
I just installed IE10. And seeing the devtools of IE10 with a layout and buttons of NT4.0, I was so disappointed. They really don’t care, but these details affect my look on whole company. They just don’t care about details. And why of why didn’t they created an auto updating system like FF en Chrome. Corporates is the reason. But maybe the corporates have to accept that things change. It’s the internet.
Great article, but your advice with having a great workflow instead of fixing IE issues is good, but unpractical.
Hi Friends,
Here is a new issues or may be a virus code, Whenever I open IE10 with a google url, the url is getting appended with some junk string and hence giving a 404 error. the string which is getting appended is “-7890*sfxd*0*sfxd*0#sfmsg_undefined@@”
Do anybody faced it, if anybody know the solution to fix it, please let me know. Now, I am very scared of doing Online financial transactions because of this.
Please help!
Thanks,
You probably have malware or something. See this thread:
http://www.justanswer.com/computer/7fhn1-google-home-page-google-toolar-when-open.html
Try this software:
http://www.malwarebytes.org/
Or something else that will fix that sort of thing.
Hi,
there is a mistake in your code. So, it can’t work.
On your test site http://jsbin.com/evimed/1/edit the code is correct.
Above you are missing a >
Instead of
<!–[if !IE]><!–<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=’ ie10′;
}
</script><!–<![endif]–>
Missing > is there:
!IE]><!–>
It should be
<!–[if !IE]><!–><script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=’ ie10′;
}
</script><!–<![endif]–>
Thank you, for this awesome hack :)
Oh, I did not format the code right. So here again (but I don’t know, why – - becomes one stroke)
Hi,
there is a mistake in your code.
On your test site http://jsbin.com/evimed/1/edit the code is correct.
In your code above is missing an ending bracket
>Instead of
———————————
It should be
Missing
>is there:!IE]><!-->Thank you, for this awesome hack :)
Hmmm, you were right. I’m not sure how that got removed. Probably happened when I converted the tags to escape characters. Thanks for pointing that out, good eye! :)
Thanx for such useful hints! ;)
The following should also work: