Filling the HTML5 Gaps with  Polyfills & Shims
<ul><li>A bit of thanks… </li></ul>
<ul><li>Microsoft Community Mgr. </li></ul><ul><li>Editor of Script Junkie </li></ul><ul><li>.net Magazine writer </li></u...
http://scriptjunkie.com <ul><li>JavaScript, HTML & CSS </li></ul><ul><li>Cross-Browser </li></ul><ul><li>Solutions-Based <...
<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...
 
 
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...
Upcoming SlideShare
Loading in...5
×

Filling the HTML5 Gaps with Polyfills and Shims

1,957

Published on

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

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • Replaced old deck w/ an updated one to correct a type and change a title. If you downloaded it before 2/14/2011 10am EST, please pull down the update.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,957
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
1
Likes
4
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
  • How developers can start using HTML5 now
  • 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
    1. A particular slide catching your eye?

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

    ×