Filling the HTML5 Gaps with Polyfills and Shims

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

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

<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
<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

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
<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

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

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

Filling the HTML5 Gaps with Polyfills and Shims

by reybango on Feb 12, 2011

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 212

Statistics

Filling the HTML5 Gaps with Polyfills and Shims Presentation Transcript