CodeinWP CodeinWP

IE10 CSS Hacks

IE10 HacksLast 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.

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) {
   /* 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.

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) {
    /* 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.

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

71 Responses

  1. chitsaou says:

    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";
    }
    
  2. Zsolt says:

    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.

    • Zsolt says:

      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.

      • Zsolt says:

        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.

  3. Mark Senff says:

    << 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.

    • Clay Cooper says:

      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.

      • John says:

        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.

    • Nate Buck says:

      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.

    • Jessie says:

      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!

  4. Hm, you “don’t know anything about this @cc_on statement”? You read comments? Don’t disappoint me! ;-)

  5. 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.

  6. John Meyer says:

    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.

      • Steven Leadbeater says:

        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

  7. Gabe says:

    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.

  8. 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.

    • Sean says:

      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.

  9. robocat says:

    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:

    
    if(Function('/*@cc_on return document.documentMode===10@*/')()){
        document.documentElement.className+=' ie10';
    }
    

    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.

    • Looking further into this, I think this version works a little better:

      if (/*@cc_on!@*/false && document.documentMode === 10) {
        document.documentElement.className+=' ie10';
      }
      

      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.

  10. David Storey says:

    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.

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

    • Stacy Patrick says:

      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.

  12. Umut Celenli says:

    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.

  13. hassan says:

    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…

  14. Matt Stow says:

    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

  15. Anderson says:

    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.

  16. Jason says:

    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.

  17. Leela Prasad says:

    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,

  18. Lintzy says:

    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

    
    <!--[if !IE]><!--<script> 
    if (/*@cc_on!@*/false) { 
    document.documentElement.className+=' ie10'; 
    } 
    </script><!--<![endif]--> 
    

    ———————————
    It should be

    
    <!--[if !IE]><!--><script>
    if (/*@cc_on!@*/false) {
      document.documentElement.className+=' ie10';
      } 
      </script><!--<![endif]-->
    

    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! :)

  19. Guido says:

    Thanx for such useful hints! ;)

  20. swon says:

    The following should also work:

     
    #positioner {
      top: 30px;
      top: 28px/0; /* ie9 and ie10 */
    }
    
    
  21. Very helpful thanks a bunch!

  22. Caleb says:

    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;

  23. Bruno says:

    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.

  24. John Louie says:
    if(/*@cc_on!@*/false && @_win32 )
    {document.documentElement.className+=' ie10desktop';}
    

    added support for IE10 Desktop view it works for me..

  25. Dory says:

    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.

  26. Amy says:

    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.

      • Amy says:

        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

  27. FPMG Online says:

    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?

  28. Rob says:

    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!

  29. Vi says:

    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

    
    if (/*@cc_on!@*/false) { 
     var headHTML = document.getElementsByTagName('head')[0].innerHTML;
     headHTML+= '';
     document.getElementsByTagName('head')[0].innerHTML = headHTML; }
    
    • I included that in my article above, too. It’s the first one listed. :)

      • Vi says:

        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.

  30. Randall says:

    I want all ie browsers to change a font-weight for a class?

    is there any good hack to do this?

  31. Alex says:

    For me the following code works fine, all conditional comments are working in all IE versions:

    
    <!--[if lt IE 7 ]>  <![endif]-->
    <!--[if IE 7 ]>     <![endif]-->
    <!--[if IE 8 ]>     <![endif]-->
    <!--[if IE 9 ]>     <![endif]-->
    <!--[if (gt IE 11)|!(IE)]>>-->  <!--
    
    	
    		if (document.documentMode===10){
    			document.documentElement.className+=' ie10';
    		}
    		else if (document.documentMode===11){
    			document.documentElement.className+=' ie11';
    		}
    	
    

    I’m on windows 8.1, not sure if it related to ie11 update…

  32. Jessi says:

    Thanks for this post,very helpful.

  33. This solution worked for me for IE10.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).