Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Filling the HTML5 Gaps with Polyfills and Shims

Presentation deck I used to describe how you can leverage HTML5 & CSS3 features today while ensuring your sites still work great in older browsers.

  • Login to see the comments

Filling the HTML5 Gaps with Polyfills and Shims

  1. 1. Filling the HTML5 Gaps with Polyfills & Shims
  2. 2. <ul><li>A bit of thanks… </li></ul>
  3. 3. <ul><li>Microsoft Community Mgr. </li></ul><ul><li>Editor of Script Junkie </li></ul><ul><li>.net Magazine writer </li></ul><ul><li>jQuery JS Library Project Team Member </li></ul><ul><li>JavaScript & HTML5 fan boy </li></ul>Rey Bango
  4. 4. http://scriptjunkie.com <ul><li>JavaScript, HTML & CSS </li></ul><ul><li>Cross-Browser </li></ul><ul><li>Solutions-Based </li></ul><ul><li>Awesome Authors: </li></ul><ul><ul><li>Christian Heilmann </li></ul></ul><ul><ul><li>Ben Alman </li></ul></ul><ul><ul><li>Nicholas Zakas </li></ul></ul><ul><ul><li>Emily Lewis </li></ul></ul><ul><ul><li>Elijah Manor </li></ul></ul><ul><ul><li>Bruce Lawson </li></ul></ul>
  5. 5. <ul><ul><li>Understand the issues surrounding HTML5 use today </li></ul></ul><ul><ul><ul><li>Browser fragmentation </li></ul></ul></ul><ul><ul><ul><li>Feature support levels </li></ul></ul></ul><ul><ul><li>Answer these questions: </li></ul></ul><ul><ul><ul><li>What is feature detection? </li></ul></ul></ul><ul><ul><ul><li>What’s a polyfill and shim? </li></ul></ul></ul><ul><ul><ul><li>How will they help you leverage HTML5 & CSS3 today? </li></ul></ul></ul>My Goal
  6. 6. <ul><ul><li>Solutions to the Issues </li></ul></ul>My Goal
  7. 7. <ul><li>Newest versions of HTML & CSS </li></ul><ul><li>Supported by all modern browsers </li></ul><ul><ul><li>IE9 </li></ul></ul><ul><ul><li>Firefox </li></ul></ul><ul><ul><li>Chrome </li></ul></ul><ul><ul><li>Opera </li></ul></ul><ul><ul><li>Safari </li></ul></ul><ul><li>Snazzy new logo for HTML5 </li></ul>HTML5 & CSS3
  8. 8. <ul><li>The Problem: </li></ul><ul><li>Browser Support </li></ul>
  9. 9. <ul><ul><li>Most non-modern browsers have trouble of some sort </li></ul></ul><ul><ul><ul><li>Non-modern Browsers (ref: caniuse.com ) </li></ul></ul></ul><ul><ul><ul><ul><li>IE 6 - 8 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Firefox 3.6 and below </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Safari 4.0 and below </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Chrome 7 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Opera 10.x and below </li></ul></ul></ul></ul><ul><ul><li>Even modern browsers have issues </li></ul></ul><ul><ul><li>Varying levels of feature support across all major browsers </li></ul></ul>Non-Modern Browsers
  10. 10. <ul><li>Browser Fragmentation </li></ul>
  11. 12. <ul><li>Varying Levels of Support </li></ul><ul><ul><li>Across browsers </li></ul></ul><ul><ul><li>Across browser versions </li></ul></ul><ul><ul><li>New versions released constantly </li></ul></ul><ul><li>Browser detection doesn’t work </li></ul><ul><ul><li>Fixes based on assumptions </li></ul></ul><ul><ul><li>Full-time job tracking changes </li></ul></ul>Fragmentation
  12. 13. <ul><li>Solutions? </li></ul>
  13. 14. <ul><li>Feature Detection </li></ul>
  14. 15. <ul><li>Act based on what browsers support, not their versions </li></ul><ul><li>Check for the feature you want to use </li></ul><ul><ul><li>Check for a specific: </li></ul></ul><ul><ul><ul><li>Object </li></ul></ul></ul><ul><ul><ul><li>Method </li></ul></ul></ul><ul><ul><ul><li>Property </li></ul></ul></ul><ul><ul><ul><li>Behavior </li></ul></ul></ul><ul><ul><li>Dynamically load custom code to mimic missing features </li></ul></ul><ul><ul><li>Detect for standards-based features first </li></ul></ul><ul><ul><li>Browsers often support both standards and legacy </li></ul></ul><ul><ul><li>Standards are your most stable ground to build upon </li></ul></ul>Feature Detection
  15. 16. <ul><li>Why not check </li></ul><ul><li>for a browser? </li></ul>
  16. 17. Bad // If not IE then use addEventListener… if (navigator.userAgent.indexOf(&quot;MSIE&quot;) == -1) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
  17. 20. Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
  18. 21. <ul><li>Demo </li></ul>Feature Detection
  19. 22. What Happens When Feature Detection Looks Like This…
  20. 23. Yuck! function(){ var sheet, bool, head = docHead || docElement, style = document.createElement(&quot;style&quot;), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet; var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/r+|n+/g, '') .indexOf(rule.split(' ')[0]) === 0; }; bool = supportAtRule('@font-face { font-family: &quot;font&quot;; src: url(data:,); }'); head.removeChild(style); return bool; }; Even the monkey is freaked!
  21. 24. <ul><ul><li>Best option in my opinion for this… </li></ul></ul>Feature Detection
  22. 25. <ul><ul><li>Best feature detection support </li></ul></ul><ul><ul><li>Detects: </li></ul></ul><ul><ul><ul><li>All major HTML5 features </li></ul></ul></ul><ul><ul><ul><li>All major CSS3 features </li></ul></ul></ul><ul><ul><li>Includes HTML5Shim for semantic tag support </li></ul></ul><ul><ul><li>Widespread adoption </li></ul></ul><ul><ul><ul><li>Twitter, National Football League, Burger King, and many more… </li></ul></ul></ul><ul><ul><li>Constantly updated </li></ul></ul><ul><ul><li>Shipping with ASP.NET MVC 3 Tools update </li></ul></ul>
  23. 26. Test for @font-face
  24. 27. You Can Do This function(){ var sheet, bool, head = docHead || docElement, style = document.createElement(&quot;style&quot;), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet; var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/r+|n+/g, '') .indexOf(rule.split(' ')[0]) === 0; }; bool = supportAtRule('@font-face { font-family: &quot;font&quot;; src: url(data:,); }'); head.removeChild(style); return bool; };
  25. 28. Or…. if (Modernizr. fontface ){ … }
  26. 29. <ul><li>Demo </li></ul>
  27. 30. <ul><li>Polyfills & Shims </li></ul>
  28. 31. <ul><ul><li>What are they? </li></ul></ul><ul><ul><ul><li>Typically JavaScript, HTML & CSS code </li></ul></ul></ul><ul><ul><li>What do they do? </li></ul></ul><ul><ul><ul><li>Provides the technology that you, the developer, expect the browser to provide natively </li></ul></ul></ul><ul><ul><ul><li>Provides support for missing features </li></ul></ul></ul><ul><ul><li>When do you use them? </li></ul></ul><ul><ul><ul><li>Use them to fallback gracefully or mimic functionality </li></ul></ul></ul>Polyfills & Shims
  29. 33. <ul><ul><li>Polyfill: </li></ul></ul><ul><ul><ul><li>Replicates the real, standard feature API </li></ul></ul></ul><ul><ul><ul><li>You can develop for the future </li></ul></ul></ul><ul><ul><li>Shims </li></ul></ul><ul><ul><ul><li>Provides own API to a missing feature </li></ul></ul></ul><ul><ul><ul><li>Doesn’t adhere to a specification but fills the gap </li></ul></ul></ul><ul><ul><ul><li>Generally provides more features </li></ul></ul></ul>What’s the Difference?
  30. 34. <ul><ul><li>Big List of Polyfills: http://bit.ly/b5HV1x </li></ul></ul><ul><ul><ul><li>Some are good, some not so good </li></ul></ul></ul><ul><ul><li>Some frequently used Polyfills & Shims </li></ul></ul><ul><ul><ul><li>Polyfill: </li></ul></ul></ul><ul><ul><ul><ul><li>HTML5Shim - Semantic tag support </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Storage Polyfill - HTML5 localStorage </li></ul></ul></ul></ul><ul><ul><ul><ul><li>H5F – Simulates new HTML5 form types </li></ul></ul></ul></ul><ul><ul><ul><li>Shims: </li></ul></ul></ul><ul><ul><ul><ul><li>Amplify Store – persistent client-side storage using localStorage, globalStorage, sessionStorage & userData </li></ul></ul></ul></ul><ul><ul><ul><ul><li>easyXDM – Cross-domain messaging </li></ul></ul></ul></ul>Polyfills & Shims
  31. 35. <ul><ul><li>Considerations </li></ul></ul><ul><ul><ul><li>You need to vet the code </li></ul></ul></ul><ul><ul><ul><ul><li>Does it work as expected? </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Cross-browser? </li></ul></ul></ul></ul><ul><ul><ul><li>You may need to support it in the future </li></ul></ul></ul><ul><ul><ul><ul><li>Developer abandons work </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Do you have the skills to maintain it? </li></ul></ul></ul></ul><ul><ul><ul><li>API Consistency </li></ul></ul></ul><ul><ul><ul><ul><li>Will you need to rewrite your code later? </li></ul></ul></ul></ul>Consider This
  32. 36. Polyfills & Shims: Two Examples
  33. 37. Semantic Tags
  34. 38. <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
  35. 39. <ul><ul><li>nav </li></ul></ul><ul><ul><li>article </li></ul></ul><ul><ul><li>section </li></ul></ul><ul><ul><li>footer </li></ul></ul><ul><ul><li>aside </li></ul></ul><ul><ul><li>header </li></ul></ul>New Tags Provide actual meaning to the markup!
  36. 40. <nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
  37. 41. <ul><li>Browser Support? </li></ul>
  38. 42. <ul><li>Non-modern browsers don’t recognize the new tags </li></ul><ul><li>Internal stylesheets not updated </li></ul><ul><li>You can’t style elements not recognized </li></ul>Recognition & Styling
  39. 43. <ul><li>Demo </li></ul>Semantic Tags
  40. 44. Video Tag
  41. 45. <object type=&quot;application/x-silverlight-2&quot; width=&quot;640&quot; height=&quot;384&quot;> <param name=&quot;source&quot; value=&quot;http://channel9.msdn.com/App_Themes/default/VideoPlayer10_01_1 8.xap&quot;></param> <param name=&quot;initParams&quot; value=&quot;deferredLoad=true,duration=0,m=http://mysite.com/videos/big_buck_ bunny.mp4,autostart=true,autohide=true,showembed=true&quot;></param> <param name=&quot;background&quot; value=&quot;#00FFFFFF&quot;></param> <a href=&quot;http://go.microsoft.com/fwlink/?LinkID=124807&quot; style=&quot;text- decoration: none;&quot;> <img src=&quot;http://go.microsoft.com/fwlink/?LinkId=108181&quot; alt=&quot;Get Microsoft Silverlight&quot; style=&quot;border-style: none&quot;/> </a> <param name=&quot;x-allowscriptaccess&quot; value=&quot;never&quot;></param> <param name=&quot;allowScriptAccess&quot; value=&quot;never&quot; /> <param name=&quot;wmode&quot; value=&quot;opaque&quot; /> </object> Video Before
  42. 46. <ul><li><video controls width=&quot;500&quot;> </li></ul><ul><ul><li><source src=&quot;video.mp4“ t ype=&quot;video/mp4&quot; /> </li></ul></ul><ul><li></video> </li></ul>HTML5 Video
  43. 47. Codec Support Credit: Encoding.com
  44. 48. <ul><li>Fallbacks can be used to degrade gracefully for different codecs </li></ul><ul><li><video controls width=&quot;500&quot;> </li></ul><ul><ul><li><source src=&quot;video.mp4&quot; t ype=&quot;video/mp4“ /> </li></ul></ul><ul><ul><li><source src=&quot;video.ogg&quot; t ype=&quot;video/ogg“ /> </li></ul></ul><ul><ul><li><source src=&quot;video.webm&quot; t ype=&quot;video/webm“ /> </li></ul></ul><ul><li></video> </li></ul>Degrading Gracefully
  45. 49. <ul><li>Browser Support? </li></ul>
  46. 50. <ul><li>Create a solid cross-browser base to start from & use HTML5 to enhance sites </li></ul><ul><li>If HTML5 video is not supported, SilverLight or Flash video will load </li></ul><ul><li><video controls width=&quot;500&quot;> </li></ul><ul><ul><li><source src=&quot;video.mp4&quot; t ype=&quot;video/mp4“ /> </li></ul></ul><ul><ul><li><source src=&quot;video.ogg&quot; t ype=&quot;video/ogg“ /> </li></ul></ul><ul><ul><li><source src=&quot;video.webm&quot; t ype=&quot;video/webm“ /> </li></ul></ul><ul><li><object type=&quot;application/x-silverlight-2&quot; width=&quot;640&quot; height=&quot;384&quot;> </li></ul><ul><li><param name=&quot;source&quot; value=&quot;/resources/VideoPlayer10_01_18.xap&quot;></param> </li></ul><ul><li><param name=&quot;initParams&quot; value=&quot;m=http://mysite.com/video.mp4,autostart=true,autohide=true></param> </li></ul><ul><li><param name=&quot;background&quot; value=&quot;#00FFFFFF&quot;></param> </li></ul><ul><li><param name=&quot;x-allowscriptaccess&quot; value=&quot;never&quot;></param> </li></ul><ul><li><param name=&quot;allowScriptAccess&quot; value=&quot;never&quot; /> </li></ul><ul><li><param name=&quot;wmode&quot; value=&quot;opaque&quot; /> </li></ul><ul><li></object> </li></ul><ul><li></video> </li></ul>Degrading Gracefully
  47. 51. <ul><li>Demo </li></ul>Video Tag
  48. 52. <ul><ul><li>Avoid browser detection </li></ul></ul><ul><ul><ul><li>Browsers change </li></ul></ul></ul><ul><ul><ul><li>Varying levels of feature support across all major browsers </li></ul></ul></ul><ul><ul><li>Use feature detection </li></ul></ul><ul><ul><ul><li>Check for the feature you want to use </li></ul></ul></ul><ul><ul><ul><li>Detect for standards first </li></ul></ul></ul><ul><ul><li>Use Modernizr – http://modernizr.com </li></ul></ul><ul><ul><ul><li>Cleaner code & they’ve done the work for you </li></ul></ul></ul><ul><ul><li>Polyfills and Shims </li></ul></ul><ul><ul><ul><li>Opt for code that mimics a standard API to avoid a rewrite </li></ul></ul></ul>Take Away
  49. 53. Introducing HTML5 (Bruce Lawson & Remy Sharp) HTML5 for Web Designers (Jeremy Keith) CSS3 for Web Designers (Dan Cederholm) Books
  50. 54. @reybango blog.reybango.com [email_address]
  51. 55. <ul><li>Rate Me! </li></ul>http://speakerrate.com/reybango

×