How to use all that HTML5 goodness and still have it look okay in IE

1. HTML5SHIM
Now Internet Explorer can join the HTML5 party too!

2. HTML5
The super-cool new shiny thing

3. HTML5 BASIC ELEMENTS
• nav
• section
• header
• footer

4. MODERN BROWSERS
• eitherhandle basic HTML5 elements and allows them to be
styled with CSS, or
• treatsunknown elements as a div and still allows them to be
styled with CSS

5. INTERNET EXPLORER
• doesn’trecognise basic HTML5 elements BUT doesn’t treat
them like divs and consequently doesn’t apply CSS styling!
• this is a major problem for developing with HTML5 elements

6. HTML5SHIM
The IE solution

7. HTML5SHIM
• blog post by John Resig (creator or jQuery)
• exploits a workaround in IE
• bycreating a new DOM element of the same name as the
unknown HTML5 element IE suddenly applies styling to all
such elements
• html5shim.js
created by Remy Sharp allows modern browsers
to handle HTML5 whilst providing a graceful fallback for IE

8. USING HTML5SHIM
• must
be inserted into the head of the document (IE needs to
know about the HTML5 elements before it tries to render
them)
• the
js is only applied to IE but you can wrap the js call in
conditional comments to only call it when using IE

9. <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->

10. BEFORE

11. AFTER

12. HTML5SHIM
Now your page is super cool in every browser!