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: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.
If coding for IE is just the same as coding for other browsers, why do the hacks even exist? My point is, you don’t need to fix something if it’s not broken, so IE must be broken.
c’mon, if you make professional sites the first thing you learn is that you will have a mainstream CSS, minor fixes for Chrome, some fix for Safari (or Safari Mac) and a load of fixes to support IE6 (still used in China guys), IE7, then odd stuff for IE8, exceptions IE9, just to discover that on IE10 there’s other problems.
The point is that Firefox from version 3.6+ renders always the same. Chrome is also a great product in this sense.
And IE gives the impression that at every new version a completely different team of developers worked on the product.
If you make a page for yourself with a bunch of buttons and a few DIVS you will never notice what I’m saying. But if you start making sites for top competitors in some business or another you’ll see that IE is a punch in the stomach when it comes to making cross browser sites. Talking about sites using Video Playes (could be Brightcove for e.g.), special effects in CSS3, overlays for fine graphics, complex layout+functionalies, an advanced UI and stuff like that.
That’s the truth!
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!
try using box shadows then and see what happens when you switch between chrome / firefox / opera / any other browser and IE10. As a purist principal feature detection is a great idea – however CSS3 isn’t quite finalised yet and microsofts implementation is not the same as the others. They have handily dropped their vendor specific prefixes too! so… how is modernizer going to help you there? Feature is supported, uses the non vendor specific syntax and renders differently in IE10. (I miss blaming Bill for this but…) Thanks Steve Blamer
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.
I’m sorry but IE is the problem, not other browsers. I’ve coded plenty of pages that validate 100% correct and look absolutely awesome in FF and Chrome but then I go and view it in various versions of IE (yes, including IE9 and lately IE10) and there ends up being things that just are not displayed correctly. So don’t give me that “If you close your tags and use proper coding practices…” type of crap because that simply does not apply all the time when it comes to IE.
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:
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.
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:
Very helpful thanks a bunch!
Actually, there’s a way to detect IE 10 without using conditional compilation or funky media queries. As it turns out, IE has come up with its own object: documentMode. Just use it:
isIE10 = (document.documentMode != null) && document.documentMode === 10;Yes, documentMode was discussed in this comment above.
Inserts the html tag, ok.
Now, if I want this class to be put on a li?
For example
li class=”vendor-ie-10″
Help, please
Read the article carefully, you have to use the scripts/styles mentioned in order to get it to work. Which one of the hacks are you trying to use?
Try this in IE10:
http://jsbin.com/uyayey/1/edit
You have to include the JavaScript in your page (preferrably at the bottom) and then use the styles I’m using (targeting based on .ie10 as the “root” selector). You don’t add anything to the HTML element; the script will do that for you.
added support for IE10 Desktop view it works for me..
The issue here is the fact that users may unknowingly be in Compat mode in IE10, hence the lack of support for lower generation IE condition statements means that our sites may look like a complete mess in IE10. If IE10 decides to not support these condition statements for lower generation IE, why have Compat mode at all?
No, that’s not true, you have a slight misunderstanding of how the compat modes work. Try this link in IE10:
http://jsbin.com/ecusuc/1/edit
You’ll notice that the message does not display. But if you switch to IE10 in IE9 mode, it will display. So, IE10 does support conditional comments when it’s emulating IE9 or below, but not when it’s in standards mode. Hope that clears it up.
IE 10 will not recognize my “submit” button on a contact form. this button works in all other browsers except IE 10.
(works flawlessly in Chrome, Safari, Firefox, and Opera)
The code is inside a field set within a form on my contact page ,
Here is the submit button input code:
input type=”submit” name=”send” id=”go” value=”Go” tabindex=”90″
website contact form found here: http://athensframing.com/contact.htm
and here: http://kentuckyhistoryplates.com/contact.htm
Both of these forms submit buttons were working until I updated to IE 10
Is there a hack for this?
The reason those forms aren’t working properly has to do with the “action” value. You’re using “mailto” for the form’s action, which opens up the user’s default mail client with the submitted info. I tried it on Chrome, and it worked fine, but in IE10, it crashed the browser.
I’m guessing that it will sometimes work on some machines, and not on others, depending on the user’s email settings in IE. So I don’t think there is a way to fix this with just code (but I might be wrong).
To be honest, using this method to submit a form is not recommended. I would suggest you find a server-side solution for this, and not use the mailto: method, because it’s not secure and it creates an extra step for the user, which is not really recommended.
Thanks Louis,
I will try your suggestion out. I have had several other users test this out for me on different OS and it has always crashed for those using IE 10.
I will look into a server side solution.
Kind regards,
Amy
Why can’t we just target the styles for IE10 in the CSS itself? I mean, earlier versions of IE could be targeted using symbols like *. Why can’t we do it now? Anyone else knows that I am talking about?
Thank you for these, the first one worked for me. To everyone saying that “you shouldn’t need these” well IE 10 shouldn’t display things radically different than other browsers. I had a simple button positioned properly in chrome, firefox, safari, and on IE its waaaaaay across the screen for no reason. I’m working with the Volusion platform and do not have access to the code to remake the structure of the website, and am very limited by what is targetable via css. Again thanks to the Author!
Found this to be simpler to use. It’s like using the conditional comments – you get to use a separate IE.css file. Source Link – http://geekswithblogs.net/anirugu/archive/2013/03/02/how-to-write-css-only-for-internet-explorer–10.aspx
I included that in my article above, too. It’s the first one listed. :)
Oh but isn’t yours specifically for a class tag? The code I mentioned allows you to link to a separate css file instead having to use the ‘ie10’ class.
Oh your original code got stripped out, so there was no file reference in there. I’ve fixed it. Okay, makes sense now.
But I have to say:
Don’t ever load separate files for IE. You’re making IE slower that way because it adds an extra HTTP request for each version of IE (which is the slowest browser to begin with).
The only way I would agree with this is if your build process includes CSS minification and concatenation, which most developers don’t do.
Ah sorry, wasn’t sure how to add the code. Oh ok, thanks for the tip!
I want all ie browsers to change a font-weight for a class?
is there any good hack to do this?
Try this:
http://browserhacks.com/#hack-761f3e9bdd4402fd753d9bb858a95615
Which is in this format:
And then combine that with this for IE11:
http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
Or use a conditional comment to target IE6-9, then use one of the ones in my article for IE10, along with the link above for IE11. It’s not easy to do, but I’m not sure it’s necessary either. :)
For me the following code works fine, all conditional comments are working in all IE versions:
I’m on windows 8.1, not sure if it related to ie11 update…
The last CC won’t work in IE11. IE11 doesn’t recognize CCs.
Thanks for this post,very helpful.
This solution worked for me for IE10.
The @cc_on script hack successfully targeted IE10 for me, while the -ms-high-contrast media query was also effective but not ideal due to targeting IE11 as well. The @media Zero Hack didn’t meet my needs as it affected IE9 too. Thanks for the helpful insights!