Filling the HTML5 Gaps with  Polyfills & Shims
<ul><li>Microsoft Evangelist </li></ul><ul><li>.net Magazine writer </li></ul><ul><li>jQuery JS Library Project Team Membe...
<ul><ul><li>Understand the issues surrounding HTML5 use today </li></ul></ul><ul><ul><ul><li>Browser fragmentation </li></...
<ul><ul><li>Solutions to the Issues </li></ul></ul>My Goal
<ul><li>Newest versions of HTML & CSS </li></ul><ul><li>Supported by all modern browsers </li></ul><ul><ul><li>IE9 </li></...
<ul><li>The Problem: </li></ul><ul><li>Browser Support </li></ul>
<ul><ul><li>Most non-modern browsers have trouble of some sort </li></ul></ul><ul><ul><ul><li>Non-modern Browsers (ref:  c...
<ul><li>Browser Fragmentation </li></ul>
 
<ul><li>Varying Levels of Support </li></ul><ul><ul><li>Across browsers </li></ul></ul><ul><ul><li>Across browser versions...
<ul><li>Solutions? </li></ul>
<ul><li>Feature Detection </li></ul>
<ul><li>Act based on what browsers support, not their versions </li></ul><ul><li>Check for the feature you want to use </l...
<ul><li>Why not check  </li></ul><ul><li>for a browser? </li></ul>
Bad // If not IE then use addEventListener… if (navigator.userAgent.indexOf(&quot;MSIE&quot;) == -1) { window.addEventList...
<ul><li>Demo </li></ul>Browser Detection
Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) {...
<ul><li>Demo </li></ul>Feature Detection
What Happens When Feature Detection Looks Like This…
Yuck! function(){ var  sheet, bool, head = docHead || docElement, style = document.createElement(&quot;style&quot;), impl ...
<ul><ul><li>Best option in my opinion for this… </li></ul></ul>Feature Detection
<ul><ul><li>Best feature detection support </li></ul></ul><ul><ul><li>Detects: </li></ul></ul><ul><ul><ul><li>All major HT...
Test for  @font-face
You Can Do This function(){ var  sheet, bool, head = docHead || docElement, style = document.createElement(&quot;style&quo...
 
Or…. if (Modernizr. fontface ){ … }
<ul><li>Demo </li></ul>
<ul><li>Polyfills & Shims </li></ul>
<ul><ul><li>What are they? </li></ul></ul><ul><ul><ul><li>Typically JavaScript, HTML & CSS code </li></ul></ul></ul><ul><u...
 
<ul><ul><li>Polyfill: </li></ul></ul><ul><ul><ul><li>Replicates the real, standard feature API </li></ul></ul></ul><ul><ul...
<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 </...
<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...
Polyfills & Shims
Semantic Tags
<div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
<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 </...
<nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
<ul><li>Browser Support? </li></ul>
<ul><li>Non-modern browsers don’t recognize the new tags </li></ul><ul><li>Internal stylesheets not updated </li></ul><ul>...
<ul><li>Demo </li></ul>Semantic Tags
Degrading Gracefully
Video Tag
<object  type=&quot;application/x-silverlight-2&quot; width=&quot;640&quot; height=&quot;384&quot;> <param name=&quot;sour...
<ul><li><video controls width=&quot;500&quot;> </li></ul><ul><ul><li><source src=&quot;video.mp4“  t ype=&quot;video/mp4&q...
Codec Support Credit: Encoding.com
<ul><li>Fallbacks can be used to degrade gracefully for different codecs </li></ul><ul><li><video controls width=&quot;500...
<ul><li>Browser Support? </li></ul>
<ul><li>If HTML5 video is not supported, SilverLight or Flash video will load </li></ul><ul><li><video controls width=&quo...
<ul><li>Demo </li></ul>Video Tag
<ul><ul><li>Avoid browser detection </li></ul></ul><ul><ul><ul><li>Browsers change </li></ul></ul></ul><ul><ul><ul><li>Var...
@reybango blog.reybango.com [email_address]
Upcoming SlideShare
Loading in...5
×

Rey Bango - HTML5: polyfills and shims

798

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
798
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • How developers can start using HTML5 now
  • Rey Bango - HTML5: polyfills and shims

    1. 1. Filling the HTML5 Gaps with Polyfills & Shims
    2. 2. <ul><li>Microsoft Evangelist </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
    3. 3. <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
    4. 4. <ul><ul><li>Solutions to the Issues </li></ul></ul>My Goal
    5. 5. <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
    6. 6. <ul><li>The Problem: </li></ul><ul><li>Browser Support </li></ul>
    7. 7. <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
    8. 8. <ul><li>Browser Fragmentation </li></ul>
    9. 10. <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
    10. 11. <ul><li>Solutions? </li></ul>
    11. 12. <ul><li>Feature Detection </li></ul>
    12. 13. <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
    13. 14. <ul><li>Why not check </li></ul><ul><li>for a browser? </li></ul>
    14. 15. 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); }
    15. 16. <ul><li>Demo </li></ul>Browser Detection
    16. 17. Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
    17. 18. <ul><li>Demo </li></ul>Feature Detection
    18. 19. What Happens When Feature Detection Looks Like This…
    19. 20. 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!
    20. 21. <ul><ul><li>Best option in my opinion for this… </li></ul></ul>Feature Detection
    21. 22. <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>
    22. 23. Test for @font-face
    23. 24. 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; };
    24. 26. Or…. if (Modernizr. fontface ){ … }
    25. 27. <ul><li>Demo </li></ul>
    26. 28. <ul><li>Polyfills & Shims </li></ul>
    27. 29. <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
    28. 31. <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?
    29. 32. <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
    30. 33. <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
    31. 34. Polyfills & Shims
    32. 35. Semantic Tags
    33. 36. <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
    34. 37. <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!
    35. 38. <nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
    36. 39. <ul><li>Browser Support? </li></ul>
    37. 40. <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
    38. 41. <ul><li>Demo </li></ul>Semantic Tags
    39. 42. Degrading Gracefully
    40. 43. Video Tag
    41. 44. <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. 45. <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. 46. Codec Support Credit: Encoding.com
    44. 47. <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. 48. <ul><li>Browser Support? </li></ul>
    46. 49. <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. 50. <ul><li>Demo </li></ul>Video Tag
    48. 51. <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. 52. @reybango blog.reybango.com [email_address]
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×