Your SlideShare is downloading. ×
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with 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

Filling the HTML5 Gaps with Polyfills and Shims

1,909

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.

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,909
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
1
Likes
4
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
  • How developers can start using HTML5 now
  • Transcript

    • 1. Filling the HTML5 Gaps with Polyfills & Shims
    • 2.
      • A bit of thanks…
    • 3.
      • Microsoft Community Mgr.
      • Editor of Script Junkie
      • .net Magazine writer
      • jQuery JS Library Project Team Member
      • JavaScript & HTML5 fan boy
      Rey Bango
    • 4. http://scriptjunkie.com
      • JavaScript, HTML & CSS
      • Cross-Browser
      • Solutions-Based
      • Awesome Authors:
        • Christian Heilmann
        • Ben Alman
        • Nicholas Zakas
        • Emily Lewis
        • Elijah Manor
        • Bruce Lawson
    • 5.
        • 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
    • 6.
        • Solutions to the Issues
      My Goal
    • 7.
      • Newest versions of HTML & CSS
      • Supported by all modern browsers
        • IE9
        • Firefox
        • Chrome
        • Opera
        • Safari
      • Snazzy new logo for HTML5
      HTML5 & CSS3
    • 8.
      • The Problem:
      • Browser Support
    • 9.
        • 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
    • 10.
      • Browser Fragmentation
    • 11.  
    • 12.
      • 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
    • 13.
      • Solutions?
    • 14.
      • Feature Detection
    • 15.
      • 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
    • 16.
      • Why not check
      • for a browser?
    • 17. 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); }
    • 18.  
    • 19.  
    • 20. Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
    • 21.
      • Demo
      Feature Detection
    • 22. What Happens When Feature Detection Looks Like This…
    • 23. 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!
    • 24.
        • Best option in my opinion for this…
      Feature Detection
    • 25.
        • 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
    • 26. Test for @font-face
    • 27. 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; };
    • 28. Or…. if (Modernizr. fontface ){ … }
    • 29.
      • Demo
    • 30.
      • Polyfills & Shims
    • 31.
        • 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
    • 32.  
    • 33.
        • 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?
    • 34.
        • 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
    • 35.
        • 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
    • 36. Polyfills & Shims: Two Examples
    • 37. Semantic Tags
    • 38. <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
    • 39.
        • nav
        • article
        • section
        • footer
        • aside
        • header
      New Tags Provide actual meaning to the markup!
    • 40. <nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
    • 41.
      • Browser Support?
    • 42.
      • Non-modern browsers don’t recognize the new tags
      • Internal stylesheets not updated
      • You can’t style elements not recognized
      Recognition & Styling
    • 43.
      • Demo
      Semantic Tags
    • 44. Video Tag
    • 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
    • 46.
      • <video controls width=&quot;500&quot;>
        • <source src=&quot;video.mp4“ t ype=&quot;video/mp4&quot; />
      • </video>
      HTML5 Video
    • 47. Codec Support Credit: Encoding.com
    • 48.
      • 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
    • 49.
      • Browser Support?
    • 50.
      • Create a solid cross-browser base to start from & use HTML5 to enhance sites
      • 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
    • 51.
      • Demo
      Video Tag
    • 52.
        • 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
    • 53. Introducing HTML5 (Bruce Lawson & Remy Sharp) HTML5 for Web Designers (Jeremy Keith) CSS3 for Web Designers (Dan Cederholm) Books
    • 54. @reybango blog.reybango.com [email_address]
    • 55.
      • Rate Me!
      http://speakerrate.com/reybango

    ×