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

775

Published on

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

No Downloads
Views
Total Views
775
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.
      • Microsoft Evangelist
      • .net Magazine writer
      • jQuery JS Library Project Team Member
      • JavaScript & HTML5 fan boy
      Rey Bango
    • 3.
        • Understand the issues surrounding HTML5 use today
          • Browser fragmentation
          • Feature support levels
        • Answer these questions:
          • What is feature detection?
          • What’s a polyfill and shim?
          • How will they help you leverage HTML5 & CSS3 today?
      My Goal
    • 4.
        • Solutions to the Issues
      My Goal
    • 5.
      • Newest versions of HTML & CSS
      • Supported by all modern browsers
        • IE9
        • Firefox
        • Chrome
        • Opera
        • Safari
      • Snazzy new logo for HTML5
      HTML5 & CSS3
    • 6.
      • The Problem:
      • Browser Support
    • 7.
        • Most non-modern browsers have trouble of some sort
          • Non-modern Browsers (ref: caniuse.com )
            • IE 6 - 8
            • Firefox 3.6 and below
            • Safari 4.0 and below
            • Chrome 7
            • Opera 10.x and below
        • Even modern browsers have issues
        • Varying levels of feature support across all major browsers
      Non-Modern Browsers
    • 8.
      • Browser Fragmentation
    • 9.  
    • 10.
      • Varying Levels of Support
        • Across browsers
        • Across browser versions
        • New versions released constantly
      • Browser detection doesn’t work
        • Fixes based on assumptions
        • Full-time job tracking changes
      Fragmentation
    • 11.
      • Solutions?
    • 12.
      • Feature Detection
    • 13.
      • Act based on what browsers support, not their versions
      • Check for the feature you want to use
        • Check for a specific:
          • Object
          • Method
          • Property
          • Behavior
        • Dynamically load custom code to mimic missing features
        • Detect for standards-based features first
        • Browsers often support both standards and legacy
        • Standards are your most stable ground to build upon
      Feature Detection
    • 14.
      • Why not check
      • for a browser?
    • 15. Bad // If not IE then use addEventListener… if (navigator.userAgent.indexOf("MSIE") == -1) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
    • 16.
      • Demo
      Browser Detection
    • 17. Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
    • 18.
      • Demo
      Feature Detection
    • 19. What Happens When Feature Detection Looks Like This…
    • 20. Yuck! function(){ var sheet, bool, head = docHead || docElement, style = document.createElement("style"), 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: "font"; src: url(data:,); }'); head.removeChild(style); return bool; }; Even the monkey is freaked!
    • 21.
        • Best option in my opinion for this…
      Feature Detection
    • 22.
        • Best feature detection support
        • Detects:
          • All major HTML5 features
          • All major CSS3 features
        • Includes HTML5Shim for semantic tag support
        • Widespread adoption
          • Twitter, National Football League, Burger King, and many more…
        • Constantly updated
        • Shipping with ASP.NET MVC 3 Tools update
    • 23. Test for @font-face
    • 24. You Can Do This function(){ var sheet, bool, head = docHead || docElement, style = document.createElement("style"), 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: "font"; src: url(data:,); }'); head.removeChild(style); return bool; };
    • 25.  
    • 26. Or…. if (Modernizr. fontface ){ … }
    • 27.
      • Demo
    • 28.
      • Polyfills & Shims
    • 29.
        • What are they?
          • Typically JavaScript, HTML & CSS code
        • What do they do?
          • Provides the technology that you, the developer, expect the browser to provide natively
          • Provides support for missing features
        • When do you use them?
          • Use them to fallback gracefully or mimic functionality
      Polyfills & Shims
    • 30.  
    • 31.
        • Polyfill:
          • Replicates the real, standard feature API
          • You can develop for the future
        • Shims
          • Provides own API to a missing feature
          • Doesn’t adhere to a specification but fills the gap
          • Generally provides more features
      What’s the Difference?
    • 32.
        • Big List of Polyfills: http://bit.ly/b5HV1x
          • Some are good, some not so good
        • Some frequently used Polyfills & Shims
          • Polyfill:
            • HTML5Shim - Semantic tag support
            • Storage Polyfill - HTML5 localStorage
            • H5F – Simulates new HTML5 form types
          • Shims:
            • Amplify Store – persistent client-side storage using localStorage, globalStorage, sessionStorage & userData
            • easyXDM – Cross-domain messaging
      Polyfills & Shims
    • 33.
        • Considerations
          • You need to vet the code
            • Does it work as expected?
            • Cross-browser?
          • You may need to support it in the future
            • Developer abandons work
            • Do you have the skills to maintain it?
          • API Consistency
            • Will you need to rewrite your code later?
      Consider This
    • 34. Polyfills & Shims
    • 35. Semantic Tags
    • 36. <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
    • 37.
        • nav
        • article
        • section
        • footer
        • aside
        • header
      New Tags Provide actual meaning to the markup!
    • 38. <nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
    • 39.
      • Browser Support?
    • 40.
      • Non-modern browsers don’t recognize the new tags
      • Internal stylesheets not updated
      • You can’t style elements not recognized
      Recognition & Styling
    • 41.
      • Demo
      Semantic Tags
    • 42. Degrading Gracefully
    • 43. Video Tag
    • 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
    • 45.
      • <video controls width=&quot;500&quot;>
        • <source src=&quot;video.mp4“ t ype=&quot;video/mp4&quot; />
      • </video>
      HTML5 Video
    • 46. Codec Support Credit: Encoding.com
    • 47.
      • Fallbacks can be used to degrade gracefully for different codecs
      • <video controls width=&quot;500&quot;>
        • <source src=&quot;video.mp4&quot; t ype=&quot;video/mp4“ />
        • <source src=&quot;video.ogg&quot; t ype=&quot;video/ogg“ />
        • <source src=&quot;video.webm&quot; t ype=&quot;video/webm“ />
      • </video>
      Degrading Gracefully
    • 48.
      • Browser Support?
    • 49.
      • If HTML5 video is not supported, SilverLight or Flash video will load
      • <video controls width=&quot;500&quot;>
        • <source src=&quot;video.mp4&quot; t ype=&quot;video/mp4“ />
        • <source src=&quot;video.ogg&quot; t ype=&quot;video/ogg“ />
        • <source src=&quot;video.webm&quot; t ype=&quot;video/webm“ />
      • <object type=&quot;application/x-silverlight-2&quot; width=&quot;640&quot; height=&quot;384&quot;>
      • <param name=&quot;source&quot; value=&quot;/resources/VideoPlayer10_01_18.xap&quot;></param>
      • <param name=&quot;initParams&quot; value=&quot;m=http://mysite.com/video.mp4,autostart=true,autohide=true></param>
      • <param name=&quot;background&quot; value=&quot;#00FFFFFF&quot;></param>
      • <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>
      Degrading Gracefully
    • 50.
      • Demo
      Video Tag
    • 51.
        • Avoid browser detection
          • Browsers change
          • Varying levels of feature support across all major browsers
        • Use feature detection
          • Check for the feature you want to use
          • Detect for standards first
        • Use Modernizr – http://modernizr.com
          • Cleaner code & they’ve done the work for you
        • Polyfills and Shims
          • Opt for code that mimics a standard API to avoid a rewrite
      Take Away
    • 52. @reybango blog.reybango.com [email_address]

    ×