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.

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.

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.

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.

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.

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.

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…. :))

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.

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.

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.

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!

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.

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.

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.

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.

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.

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?

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.

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!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.