Rey Bango - HTML5: polyfills and shims

Filling the HTML5 Gaps with Polyfills & Shims

Microsoft Evangelist .net Magazine writer jQuery JS Library Project Team Member JavaScript & HTML5 fan boy Rey Bango

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

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

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

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

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); }

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

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 ){ … }

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

<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

Non-modern browsers don’t recognize the new tags Internal stylesheets not updated You can’t style elements not recognized Recognition & Styling

<video controls width="500"> <source src="video.mp4“ t ype="video/mp4" /> </video> HTML5 Video

Codec Support Credit: Encoding.com

Fallbacks can be used to degrade gracefully for different codecs <video controls width="500"> <source src="video.mp4" t ype="video/mp4“ /> <source src="video.ogg" t ype="video/ogg“ /> <source src="video.webm" t ype="video/webm“ /> </video> Degrading Gracefully

If HTML5 video is not supported, SilverLight or Flash video will load <video controls width="500"> <source src="video.mp4" t ype="video/mp4“ /> <source src="video.ogg" t ype="video/ogg“ /> <source src="video.webm" t ype="video/webm“ /> <object type="application/x-silverlight-2" width="640" height="384"> <param name="source" value="/resources/VideoPlayer10_01_18.xap"></param> <param name="initParams" value="m=http://mysite.com/video.mp4,autostart=true,autohide=true></param> <param name="background" value="#00FFFFFF"></param> <param name="x-allowscriptaccess" value="never"></param> <param name="allowScriptAccess" value="never" /> <param name="wmode" value="opaque" /> </object> </video> Degrading Gracefully

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

@reybango blog.reybango.com [email_address]

Rey Bango - HTML5: polyfills and shims

More Related Content

What's hot

Viewers also liked

Similar to Rey Bango - HTML5: polyfills and shims

More from StarTech Conference

Recently uploaded

Rey Bango - HTML5: polyfills and shims

Editor's Notes