rey bango - html5: polyfills and shims

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

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

}

DemoBrowser

Detection

Good

if (window.addEventListener) {

window.addEventListener( “load”, popMessage, false );

} else if (window.attachEvent) {

window.attachEvent( “onload”, popMessage);

}

DemoFeature 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 Thisfunction(){

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

http://bit.ly/b5HV1x

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

Semantic Tags

<div id=”nav”><div id=”nav”>

<div <div id=”sidebar”>id=”sidebar”> <div id=”article”><div id=”article”>

<div id=”footer”><div id=”footer”>

<div id=”header”><div id=”header”>

HTML Tags

nav

article

section

footer

aside

header

New Tags

Provide actual meaning to the

markup!

<nav><nav>

<aside><aside> <section><section> <article><article>

<footer><footer>

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

DemoSemantic Tags

Degrading Gracefully

Video Tag

<video controls width="500"> <source src="video.mp4“ type="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" type="video/mp4“ /><source src="video.ogg" type="video/ogg“ /><source src="video.webm" type="video/webm“ />

</video>


Browser Support?

If HTML5 video is not supported, SilverLight or Flash video will load

<video controls width="500"><source src="video.mp4" type="video/mp4“ /><source src="video.ogg" type="video/ogg“ /><source src="video.webm" type="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>


DemoVideo 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

@reybango

blog.reybango.com

[email protected]

rey bango - html5: polyfills and shims

Technology