HTML5shim

HTML5shim

• 1.
  HTML5SHIM Now Internet Explorercan join the HTML5 party too!
• 2.
  HTML5 The super-cool newshiny thing
• 3.
  HTML5 BASIC ELEMENTS •nav • section • header • footer
• 4.
  MODERN BROWSERS • eitherhandlebasic 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’trecognisebasic 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 IEsolution
• 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 IE9]> <script src="http://html5shim.googlecode.com/svn/trunk/ html5.js"></script> <![endif]-->
• 10.
  BEFORE
• 11.
  AFTER
• 12.
  HTML5SHIM Now your pageis super cool in every browser!