This article was written in 2010. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Another HTML5 fallback strategy for IE

Versions of Internet Explorer prior to number 9 can not style unknown elements without the help of JavaScript: by adding the unknown elements to the DOM you can style them like any other element. So if you want to use the new HTML5 elements you will need JavaScript to style your site. Most people will have no problem seeing your site but for those unlucky visitors with IE and JavaScript disabled (for whatever reason, there are lots of them), the experience can be horrible. Here’s a simple solution:

Serve your default stylesheet to all browsers except IE8 and lower. To those “browsers” you serve Andy Clarke’s universal ie6 css in a conditional comment. Then with the help of a simple javascript you immediately replace this css file with your default css file. Now those unlucky visitors will at least see a nicely styled easy to read minimal site. (View source on this page to see how it works)

I couldn’t think of a way to replace the fallback css before it gets loaded so the only negative side effect of this technique is that it uses an extra http request. I think it’s worth it: for me this JavaScript dependency was the only thing that kept me from using HTML5 elements.

Comments

  1. Nice one Mathias (and Vasilis).
    Another trick to improve the user experience. Too bad for the extra HTTP request, but in this case, I agree it’s worth it.

  2. You can save some (2) bytes by replacing <!--[if lte IE 8]> with <!--[if lt IE 9]> and by omitting the trailing semicolon in the <script> ;)

    • Vasilis
    • #

    Sure Mathias, I could have saved even more bytes by using [if (IE 7)|(IE 8)] instead of [if (gt IE 6) & (lte IE 8)] but I didn’t do any micro optimization on that site (-:

  3. Hmm, [if (IE 7)|(IE 8)] is still more readable. Use it! :P

    • Vasilis
    • #

    Done. Plus some extra micro optimization.