rey bango - html5: polyfills and shims
DESCRIPTION
TRANSCRIPT
![Page 1: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/1.jpg)
Filling theHTML5Gaps with Polyfills & Shims
![Page 2: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/2.jpg)
• Microsoft Evangelist• .net Magazine writer• jQuery JS Library Project Team
Member• JavaScript & HTML5 fan boy
Rey Bango
![Page 3: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/3.jpg)
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
![Page 4: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/4.jpg)
Solutions to the Issues
My Goal
![Page 5: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/5.jpg)
Newest versions of HTML & CSS Supported by all modern browsers
IE9 Firefox Chrome Opera Safari
Snazzy new logo for HTML5
HTML5 & CSS3
![Page 6: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/6.jpg)
The Problem:Browser Support
![Page 7: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/7.jpg)
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
![Page 8: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/8.jpg)
Browser Fragmentation
![Page 9: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/9.jpg)
![Page 10: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/10.jpg)
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
![Page 11: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/11.jpg)
Solutions?
![Page 12: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/12.jpg)
Feature Detection
![Page 13: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/13.jpg)
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
![Page 14: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/14.jpg)
Why not check for a browser?
![Page 15: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/15.jpg)
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);
}
![Page 16: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/16.jpg)
DemoBrowser
Detection
![Page 17: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/17.jpg)
Good
if (window.addEventListener) {
window.addEventListener( “load”, popMessage, false );
} else if (window.attachEvent) {
window.attachEvent( “onload”, popMessage);
}
![Page 18: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/18.jpg)
DemoFeature Detection
![Page 19: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/19.jpg)
What Happens When Feature
Detection Looks Like This…
![Page 20: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/20.jpg)
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!
![Page 21: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/21.jpg)
Best option in my opinion for this…
Feature Detection
![Page 22: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/22.jpg)
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
![Page 23: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/23.jpg)
Test for @font-face
![Page 24: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/24.jpg)
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; };
![Page 25: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/25.jpg)
![Page 26: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/26.jpg)
Or….
if (Modernizr.fontface){…}
![Page 27: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/27.jpg)
Demo
![Page 28: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/28.jpg)
Polyfills & Shims
![Page 29: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/29.jpg)
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
![Page 30: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/30.jpg)
![Page 31: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/31.jpg)
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?
![Page 32: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/32.jpg)
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
![Page 33: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/33.jpg)
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
![Page 34: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/34.jpg)
Polyfills & Shims
![Page 35: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/35.jpg)
Semantic Tags
![Page 36: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/36.jpg)
<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
![Page 37: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/37.jpg)
nav
article
section
footer
aside
header
New Tags
Provide actual meaning to the
markup!
![Page 38: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/38.jpg)
<nav><nav>
<aside><aside> <section><section> <article><article>
<footer><footer>
<header><header>
Semantic HTML Tags
![Page 39: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/39.jpg)
Browser Support?
![Page 40: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/40.jpg)
Non-modern browsers don’t recognize the new tags
Internal stylesheets not updated
You can’t style elements not recognized
Recognition & Styling
![Page 41: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/41.jpg)
DemoSemantic Tags
![Page 42: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/42.jpg)
Degrading Gracefully
![Page 43: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/43.jpg)
Video Tag
![Page 44: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/44.jpg)
<object type="application/x-silverlight-2" width="640" height="384"> <param name="source" value="http://channel9.msdn.com/App_Themes/default/VideoPlayer10_01_1 8.xap"></param>
<param name="initParams" value="deferredLoad=true,duration=0,m=http://mysite.com/videos/big_buck_bunny.mp4,autostart=true,autohide=true,showembed=true"></param>
<param name="background" value="#00FFFFFF"></param><a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text- decoration: none;"><img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight" style="border-style: none"/>
</a> <param name="x-allowscriptaccess" value="never"></param> <param name="allowScriptAccess" value="never" /> <param name="wmode" value="opaque" /></object>
Video Before
![Page 45: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/45.jpg)
<video controls width="500"> <source src="video.mp4“ type="video/mp4" /></video>
HTML5 Video
![Page 46: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/46.jpg)
Codec Support
Credit: Encoding.com
![Page 47: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/47.jpg)
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>
Degrading Gracefully
![Page 48: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/48.jpg)
Browser Support?
![Page 49: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/49.jpg)
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>
Degrading Gracefully
![Page 50: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/50.jpg)
DemoVideo Tag
![Page 51: Rey Bango - HTML5: polyfills and shims](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54749ac2b4af9fae0a8b576a/html5/thumbnails/51.jpg)
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