Your SlideShare is downloading. ×
0
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shims
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rey Bango - HTML5: polyfills and shims

780

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Filling the HTML5 Gaps with Polyfills & Shims
    • 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 &amp; HTML5 fan boy </li></ul>Rey Bango
    • 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 &amp; CSS3 today? </li></ul></ul></ul>My Goal
    • 4. <ul><ul><li>Solutions to the Issues </li></ul></ul>My Goal
    • 5. <ul><li>Newest versions of HTML &amp; 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 &amp; CSS3
    • 6. <ul><li>The Problem: </li></ul><ul><li>Browser Support </li></ul>
    • 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. <ul><li>Browser Fragmentation </li></ul>
    • 9. &nbsp;
    • 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
    • 11. <ul><li>Solutions? </li></ul>
    • 12. <ul><li>Feature Detection </li></ul>
    • 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
    • 14. <ul><li>Why not check </li></ul><ul><li>for a browser? </li></ul>
    • 15. Bad // If not IE then use addEventListener… if (navigator.userAgent.indexOf(&amp;quot;MSIE&amp;quot;) == -1) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
    • 16. <ul><li>Demo </li></ul>Browser Detection
    • 17. Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
    • 18. <ul><li>Demo </li></ul>Feature Detection
    • 19. What Happens When Feature Detection Looks Like This…
    • 20. Yuck! function(){ var sheet, bool, head = docHead || docElement, style = document.createElement(&amp;quot;style&amp;quot;), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = &apos;text/css&apos;; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet; var supportAtRule = impl.hasFeature(&apos;CSS2&apos;, &apos;&apos;) ? function(rule) { if (!(sheet &amp;&amp; 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 &amp;&amp; rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 &amp;&amp; (/src/i).test(sheet.cssText) &amp;&amp; sheet.cssText .replace(/r+|n+/g, &apos;&apos;) .indexOf(rule.split(&apos; &apos;)[0]) === 0; }; bool = supportAtRule(&apos;@font-face { font-family: &amp;quot;font&amp;quot;; src: url(data:,); }&apos;); head.removeChild(style); return bool; }; Even the monkey is freaked!
    • 21. <ul><ul><li>Best option in my opinion for this… </li></ul></ul>Feature Detection
    • 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>
    • 23. Test for @font-face
    • 24. You Can Do This function(){ var sheet, bool, head = docHead || docElement, style = document.createElement(&amp;quot;style&amp;quot;), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = &apos;text/css&apos;; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet; var supportAtRule = impl.hasFeature(&apos;CSS2&apos;, &apos;&apos;) ? function(rule) { if (!(sheet &amp;&amp; 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 &amp;&amp; rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 &amp;&amp; (/src/i).test(sheet.cssText) &amp;&amp; sheet.cssText .replace(/r+|n+/g, &apos;&apos;) .indexOf(rule.split(&apos; &apos;)[0]) === 0; }; bool = supportAtRule(&apos;@font-face { font-family: &amp;quot;font&amp;quot;; src: url(data:,); }&apos;); head.removeChild(style); return bool; };
    • 25. &nbsp;
    • 26. Or…. if (Modernizr. fontface ){ … }
    • 27. <ul><li>Demo </li></ul>
    • 28. <ul><li>Polyfills &amp; Shims </li></ul>
    • 29. <ul><ul><li>What are they? </li></ul></ul><ul><ul><ul><li>Typically JavaScript, HTML &amp; 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 &amp; Shims
    • 30. &nbsp;
    • 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?
    • 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 &amp; 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 &amp; userData </li></ul></ul></ul></ul><ul><ul><ul><ul><li>easyXDM – Cross-domain messaging </li></ul></ul></ul></ul>Polyfills &amp; Shims
    • 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
    • 34. Polyfills &amp; Shims
    • 35. Semantic Tags
    • 36. &lt;div id=”nav”&gt; &lt;div id=”sidebar”&gt; &lt;div id=”article”&gt; &lt;div id=”footer”&gt; &lt;div id=”header”&gt; HTML Tags
    • 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!
    • 38. &lt;nav&gt; &lt;aside&gt; &lt;section&gt; &lt;article&gt; &lt;footer&gt; &lt;header&gt; Semantic HTML Tags
    • 39. <ul><li>Browser Support? </li></ul>
    • 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 &amp; Styling
    • 41. <ul><li>Demo </li></ul>Semantic Tags
    • 42. Degrading Gracefully
    • 43. Video Tag
    • 44. &lt;object type=&amp;quot;application/x-silverlight-2&amp;quot; width=&amp;quot;640&amp;quot; height=&amp;quot;384&amp;quot;&gt; &lt;param name=&amp;quot;source&amp;quot; value=&amp;quot;http://channel9.msdn.com/App_Themes/default/VideoPlayer10_01_1 8.xap&amp;quot;&gt;&lt;/param&gt; &lt;param name=&amp;quot;initParams&amp;quot; value=&amp;quot;deferredLoad=true,duration=0,m=http://mysite.com/videos/big_buck_ bunny.mp4,autostart=true,autohide=true,showembed=true&amp;quot;&gt;&lt;/param&gt; &lt;param name=&amp;quot;background&amp;quot; value=&amp;quot;#00FFFFFF&amp;quot;&gt;&lt;/param&gt; &lt;a href=&amp;quot;http://go.microsoft.com/fwlink/?LinkID=124807&amp;quot; style=&amp;quot;text- decoration: none;&amp;quot;&gt; &lt;img src=&amp;quot;http://go.microsoft.com/fwlink/?LinkId=108181&amp;quot; alt=&amp;quot;Get Microsoft Silverlight&amp;quot; style=&amp;quot;border-style: none&amp;quot;/&gt; &lt;/a&gt; &lt;param name=&amp;quot;x-allowscriptaccess&amp;quot; value=&amp;quot;never&amp;quot;&gt;&lt;/param&gt; &lt;param name=&amp;quot;allowScriptAccess&amp;quot; value=&amp;quot;never&amp;quot; /&gt; &lt;param name=&amp;quot;wmode&amp;quot; value=&amp;quot;opaque&amp;quot; /&gt; &lt;/object&gt; Video Before
    • 45. <ul><li>&lt;video controls width=&amp;quot;500&amp;quot;&gt; </li></ul><ul><ul><li>&lt;source src=&amp;quot;video.mp4“ t ype=&amp;quot;video/mp4&amp;quot; /&gt; </li></ul></ul><ul><li>&lt;/video&gt; </li></ul>HTML5 Video
    • 46. Codec Support Credit: Encoding.com
    • 47. <ul><li>Fallbacks can be used to degrade gracefully for different codecs </li></ul><ul><li>&lt;video controls width=&amp;quot;500&amp;quot;&gt; </li></ul><ul><ul><li>&lt;source src=&amp;quot;video.mp4&amp;quot; t ype=&amp;quot;video/mp4“ /&gt; </li></ul></ul><ul><ul><li>&lt;source src=&amp;quot;video.ogg&amp;quot; t ype=&amp;quot;video/ogg“ /&gt; </li></ul></ul><ul><ul><li>&lt;source src=&amp;quot;video.webm&amp;quot; t ype=&amp;quot;video/webm“ /&gt; </li></ul></ul><ul><li>&lt;/video&gt; </li></ul>Degrading Gracefully
    • 48. <ul><li>Browser Support? </li></ul>
    • 49. <ul><li>If HTML5 video is not supported, SilverLight or Flash video will load </li></ul><ul><li>&lt;video controls width=&amp;quot;500&amp;quot;&gt; </li></ul><ul><ul><li>&lt;source src=&amp;quot;video.mp4&amp;quot; t ype=&amp;quot;video/mp4“ /&gt; </li></ul></ul><ul><ul><li>&lt;source src=&amp;quot;video.ogg&amp;quot; t ype=&amp;quot;video/ogg“ /&gt; </li></ul></ul><ul><ul><li>&lt;source src=&amp;quot;video.webm&amp;quot; t ype=&amp;quot;video/webm“ /&gt; </li></ul></ul><ul><li>&lt;object type=&amp;quot;application/x-silverlight-2&amp;quot; width=&amp;quot;640&amp;quot; height=&amp;quot;384&amp;quot;&gt; </li></ul><ul><li>&lt;param name=&amp;quot;source&amp;quot; value=&amp;quot;/resources/VideoPlayer10_01_18.xap&amp;quot;&gt;&lt;/param&gt; </li></ul><ul><li>&lt;param name=&amp;quot;initParams&amp;quot; value=&amp;quot;m=http://mysite.com/video.mp4,autostart=true,autohide=true&gt;&lt;/param&gt; </li></ul><ul><li>&lt;param name=&amp;quot;background&amp;quot; value=&amp;quot;#00FFFFFF&amp;quot;&gt;&lt;/param&gt; </li></ul><ul><li>&lt;param name=&amp;quot;x-allowscriptaccess&amp;quot; value=&amp;quot;never&amp;quot;&gt;&lt;/param&gt; </li></ul><ul><li>&lt;param name=&amp;quot;allowScriptAccess&amp;quot; value=&amp;quot;never&amp;quot; /&gt; </li></ul><ul><li>&lt;param name=&amp;quot;wmode&amp;quot; value=&amp;quot;opaque&amp;quot; /&gt; </li></ul><ul><li>&lt;/object&gt; </li></ul><ul><li>&lt;/video&gt; </li></ul>Degrading Gracefully
    • 50. <ul><li>Demo </li></ul>Video Tag
    • 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 &amp; 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
    • 52. @reybango blog.reybango.com [email_address]

    ×