Using HTML5 semantics in IE < 9
As developers and designers, we know best that it's about time to use HTML5 semantics in our Markup today. But we also know that, as we're trying to implement the new tags, there are still some poor sport products on the browser market. Yes, you probably already guessed it, I'm talking about Microsoft's glory Internet Explorer, particullary below version 9.
In this article I'd like to show you how you can magically make IE like your new HTML5 markup while at the same time keeping further IE bugfixing at minimal effort. We're going to use the simple but powerful hacks of HTML5 Shiv and HTML5 Boilerplate.
You know that situation: You just finished your new fancy HTML5 based template for your upcoming project, but that one overaged browser with the blue e-symbol-thingy doesn't really want your markup to work how you'd expect it to.
But hang in there buddy - no reason to cry out loud and rage clear your whole code. There's just the solution for you: It's the combination of two powerful tools in modern web developement. Wanna know what the good part about that is? Chances are, that you're done fixing within just 5 minutes without the need of any further IE optimization (no gurantee, but it worked for me).
Getting the Resources
What we need are the following two helpers:
HTML5 Boilerplate
Source: http://html5boilerplate.com/
If you haven't used it in the first place, I'd recommend you to do so from now on. Since it sets you up with almost everything you'll need to realize a sophisticated HTML5 web project, it's a strong foundation to built up on.
In our special case, the Boilerplate Markup and CSS provides us with a ready-to-go setup of IE hacks that would otherwise take hours of searching and fixing. Also, Modernizr is included, wich gives us the golden opportunity to detect HTML5 feature support in the browser and react on it if there is none.
HTML5 Shiv
Source: http://code.google.com/p/html5shiv/
This little JavaScript makes Internet Explorer recognize your HTML5 semantics. Usually, Modernizr already includes the Shiv script, so you don't have to hook it up seperately. But if you don't want to use Modernizr, just download the Shiv script and move it in the prefered place in your project directory.
Let the magic happen
The rest of the fix is easy play:
- Place all of your custom HTML5 markup within the <body> section of your template, like this:
- If you don't want to use Modernizr, include the Shiv script within the <head> section in your template, like this:
- Place all of your CSS styles within the "author section" of the Boilerplate CSS, like this:
- Save your files and take a look at your site in Internet Explorer 8 or lower
Boom, done. These few simple steps made the trick to make IE support your fancy new HTML5 site without or with just little style refining effort. From here on you should have little problems to get everything done without having to worry about browser support for this project ever again.
Of course you shouldn't expect IE to support fancy animation, storage or transition techniques or stuff like that. But since Modernizr should now be part of your brand new toolbox, you can work around these things easily if there is the need to do so. Learn more about it to find out how helpful it can be!