Successfully reported this slideshow.
HTML5SHIMNow Internet Explorer can join the HTML5 party too!
HTML5The super-cool new shiny thing
HTML5 BASIC ELEMENTS• nav• section• header• footer
MODERN BROWSERS• eitherhandle basic HTML5 elements and allows them to be styled with CSS, or• treatsunknown elements as a ...
INTERNET EXPLORER• doesn’trecognise basic HTML5 elements BUT doesn’t treat them like divs and consequently doesn’t apply C...
HTML5SHIM The IE solution
HTML5SHIM• blog   post by John Resig (creator or jQuery)• exploits   a workaround in IE  • bycreating a new DOM element of...
USING HTML5SHIM• must     be inserted into the head of the document (IE needs to know about the HTML5 elements before it t...
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
BEFORE
AFTER
HTML5SHIMNow your page is super cool in every browser!
Upcoming SlideShare
Loading in …5
×

HTML5shim

6,997 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

HTML5shim

  1. 1. HTML5SHIMNow Internet Explorer can join the HTML5 party too!
  2. 2. HTML5The super-cool new shiny thing
  3. 3. HTML5 BASIC ELEMENTS• nav• section• header• footer
  4. 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. 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. 6. HTML5SHIM The IE solution
  7. 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. 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. 9. <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  10. 10. BEFORE
  11. 11. AFTER
  12. 12. HTML5SHIMNow your page is super cool in every browser!

×