Filling the HTML5 Gaps with Polyfills and Shims
Upcoming SlideShare
Loading in...5
×
 

Filling the HTML5 Gaps with Polyfills and Shims

on

  • 2,130 views

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.

Statistics

Views

Total Views
2,130
Views on SlideShare
1,900
Embed Views
230

Actions

Likes
4
Downloads
30
Comments
1

4 Embeds 230

http://lanyrd.com 221
http://a0.twimg.com 6
http://localhost 2
http://stg.lanyrd.org 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Filling the HTML5 Gaps with Polyfills and Shims Presentation Transcript

  • Filling the HTML5 Gaps with Polyfills & Shims
    • A bit of thanks…
    • Microsoft Community Mgr.
    • Editor of Script Junkie
    • .net Magazine writer
    • jQuery JS Library Project Team Member
    • JavaScript & HTML5 fan boy
    Rey Bango
  • http://scriptjunkie.com
    • JavaScript, HTML & CSS
    • Cross-Browser
    • Solutions-Based
    • Awesome Authors:
      • Christian Heilmann
      • Ben Alman
      • Nicholas Zakas
      • Emily Lewis
      • Elijah Manor
      • Bruce Lawson
      • 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
      • Solutions to the Issues
    My Goal
    • Newest versions of HTML & CSS
    • Supported by all modern browsers
      • IE9
      • Firefox
      • Chrome
      • Opera
      • Safari
    • Snazzy new logo for HTML5
    HTML5 & CSS3
    • The Problem:
    • Browser Support
      • 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
    • Browser Fragmentation
  •  
    • 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
    • Solutions?
    • Feature Detection
    • 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
    • Why not check
    • for a browser?
  • 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); }
  •  
  •  
  • Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
    • Demo
    Feature Detection
  • What Happens When Feature Detection Looks Like This…
  • 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!
      • Best option in my opinion for this…
    Feature Detection
      • 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
  • Test for @font-face
  • 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; };
  • Or…. if (Modernizr. fontface ){ … }
    • Demo
    • Polyfills & Shims
      • 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
  •  
      • 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?
      • 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
      • 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
  • Polyfills & Shims: Two Examples
  • Semantic Tags
  • <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
      • nav
      • article
      • section
      • footer
      • aside
      • header
    New Tags Provide actual meaning to the markup!
  • <nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
    • Browser Support?
    • Non-modern browsers don’t recognize the new tags
    • Internal stylesheets not updated
    • You can’t style elements not recognized
    Recognition & Styling
    • Demo
    Semantic Tags
  • Video Tag
  • <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
    • <video controls width=&quot;500&quot;>
      • <source src=&quot;video.mp4“ t ype=&quot;video/mp4&quot; />
    • </video>
    HTML5 Video
  • Codec Support Credit: Encoding.com
    • 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
    • Browser Support?
    • 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
    • Demo
    Video Tag
      • 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
  • Introducing HTML5 (Bruce Lawson & Remy Sharp) HTML5 for Web Designers (Jeremy Keith) CSS3 for Web Designers (Dan Cederholm) Books
  • @reybango blog.reybango.com [email_address]
    • Rate Me!
    http://speakerrate.com/reybango