Practical HTML5: Using It Today
Doris Chen Ph.D. Developer Evangelist Microsoft doris.chen@microsoft.com http://blogs.msdn.com/dorischen/ @doristchen

Who am I?  Developer
Evangelist at Microsoft based in Silicon Valley, CA  Blog: http://blogs.msdn.com/b/dorischen/  Twitter @doristchen  Email: doris.chen@microsoft.com  over 15 years of experience in the software industry focusing on web technologies  Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings  Doris received her Ph.D. from the University of California at Los Angeles (UCLA) PAGE 2 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Agenda Browser Fragmentation Feature Detection
Polyfills and Shims Polyfills and Shims: Examples Summary and Resources PAGE 3 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Browser Fragmentation

Non-Modern Browsers  Most non-modern
browsers have trouble  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 PAGE 5 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Browser Fragmentation

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 PAGE 7 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Feature Detection

Feature Detection  Based on
what browsers support, not their versions  Check for the feature you want to use  Object, Method, Property, Behavior  Detect for standards-based features first  Browsers often support both standards and legacy  Standards are your most stable ground to build upon  Dynamically load custom code to mimic missing features PAGE 9 twitter @doristchen Blog http://blogs.msdn.com/dorischen

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); } PAGE 10 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Why not Check for a
Browser? Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); } PAGE 11 twitter @doristchen Blog http://blogs.msdn.com/dorischen

What Happens When Feature Detection
Looks Like This… Yuck! Even the monkey is freaked! 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; }; PAGE 12 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Feature Detection  Best option
in my opinion for this…  http://www.modernizr.com/ PAGE 13 twitter @doristchen Blog http://blogs.msdn.com/dorischen

 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 PAGE 14  Shipping with ASP.NET MVC 3 Tools update

Get Custom Build

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; }; PAGE 16 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Test for @font-face Or ….
if (Modernizr.fontface){ … } PAGE 17 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Demo

Polyfills and Shims

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 PAGE 20 twitter @doristchen Blog http://blogs.msdn.com/dorischen

21

What’s the Difference?  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 PAGE 22 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Polyfills & Shims  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 PAGE 23 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Consider This  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? PAGE 24 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Polyfills & Shims: Examples Semantic
Tags Video Tags Media Queries Conditional Resource Loader

HTML5 Semantics Semantic Document Structure
 HTML5 introduces a new semantic structure  Replacing the use of DIV, SPAN HEADER and other elements with class and ID attributes  New elements include header, nav, NAV article, section, aside, and footer ARTICLE ASIDE FOOTER PAGE 26 twitter @doristchen Blog http://blogs.msdn.com/dorischen

HTML5 Semantic Tags Supported in
Internet Explorer 9 <body> <mark>Doris dancing!</mark> <header> </section> <hgroup> </article> <h1>Doris Chen Dancing</h1> ... <h2>Funky Town!</h2> </section> </hgroup> </header> <aside>Aside items (i.e. links)</aside> <nav> <ul>Navigation links</ul> <figure> </nav> <img src="..." /> <figcaption>Doris <section> dancing</figcaption> <article> </figure> <header> <h1>Can you believe it?</h1> <footer>Copyright © 2011</footer> </header> <section> </body> PAGE 27 twitter @doristchen Blog http://blogs.msdn.com/dorischen

HTML Tags <div id=”header”> <div
id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”>

New Semantic HTML Tags <header>
<nav> <section> <aside> <article> <footer>

Recognition & Styling  Non-modern
browsers don’t recognize the new tags  Internal stylesheets not updated  You can’t style elements not recognized PAGE 30 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Demo
Semantic Tags

Polyfills & Shims: Examples Semantic
Tags Video Tags Media Queries Conditional Resource Loader

HTML5 Video & Audio <audio
<video src= src= The url to the audio or video width= The width of the video element height= The height of the video element poster= The url to the thumbnail of the video preload= preload= (none, metadata, auto) Start downloading autoplay autoplay Audio or video should play immediately loop loop Audio or video should return to start and play controls controls Will show controls (play, pause, scrub bar) > > … … </audio> </video>

Compatibility Table HTML5 <video> 10.0.648.20
vCurrent 9 6 5.0.4 11.01 4 VP8 (WebM) Yes No (*) Yes Yes video support Yes H.264 video No (*) Yes Yes (*) No (*) format PAGE 34 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Elements With Fall Backs Browsers
won’t render elements they don’t understand... For example: <video src=“video.mp4”> What will it render? </video> But, they will render what’s between those elements PAGE 35 twitter @doristchen Blog http://blogs.msdn.com/dorischen

HTML5 <video> : Degrading Gracefully
 Multiple video sources to support multiple browsers <video id="myVideo" controls="controls" autoplay> <source src="videos/video.mp4" type="video/mp4" /> <source src="videos/video.webm" type="video/webm" /> <!-- Flash/Silverlight video here --> <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> PAGE 36 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Demo
Video, fall back

Polyfills & Shims: Examples Semantic
Tags Video Tags Media Queries Conditional Resource Loader

Use Respond.js for Media Queries
 Respond.js  Enable responsive web designs in browsers  A fast polyfill for CSS3 Media Queries  Lightweight: 3kb minified / 1kb gzipped  for Internet Explorer 6-8 and more  https://github.com/scottjehl/Respond <head> <meta charset="utf-8" /> <link href="test.css" rel="stylesheet"/> <script src="../respond.min.js"></script> </head> PAGE 39 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Use Respond for Media Queries
Realife: http://bostonglobe.com/ Demo

Polyfills & Shims: Examples Semantic
Tags Video Tags Media Queries Conditional Resource Loader

 Asynchronous conditional resource loader
for JavaScript and CSS  Integrated into Modernizr , only 1.6kb  Load only the scripts that your users need  Fully decouples preloading from execution  full control of when your resource is executed  change that order on the fly  http://yepnopejs.com/ PAGE 42 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Yepnope and Modernizr <script type="text/javascript"
src="yepnope.1.0.2-min.js"></script> <script type="text/javascript"> yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); </script> PAGE 43 twitter @doristchen Blog http://blogs.msdn.com/dorischen

 Asynchronous conditional resource loader
for JavaScript and CSS  Integrated into Modernizr , only 1.6kb  Load only the scripts that your users need  Fully decouples preloading from execution  full control of when your resource is executed  change that order on the fly  http://yepnopejs.com/ PAGE 44 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Yepnope and Modernizr <script type="text/javascript"
src="yepnope.1.0.2-min.js"></script> <script type="text/javascript"> yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); </script> PAGE 45 twitter @doristchen Blog http://blogs.msdn.com/dorischen

MSNBC site: Building Cross Browser
Plugin- free Experiences

Building Cross Browser Plugin-free Experiences
 “Plug-in” refers broadly to browser extensions that run native client code using low-level browser interfaces  Adobe Flash  ActiveX controls and Browser Helper Objects  Some of Webkit’s Approach  More browsers start to adopt plug-in-free approach  Lots of Web browsing simply don’t support plug-ins  IE 10 Metro  Browsers that do support plugins offer many ways to run plugin free  YouTube http://www.youtube.com/html5  MSNBC plugin-free experience for rich media  Styles and Scripts PAGE 47 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Need Plugin on Old MSNBC
Site PAGE 48

Step 1: Declare Standards Mode
and Valid Markup for Modern Browsers  Ensure that you are operating in standards mode  Use valid markup  include the HTML5 doctype at the top of your document  <!DOCTYPE html> PAGE 49 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Step 2: Update CSS3 vendor
prefixes  The CSS3 language is constantly in a state of change  New features suggested, updated, and standardized  For learning, browser vendors offer experimental implementations via prefixed  Ensure that prefixes from each vendor are included in your site PAGE 50 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Ensure all CSS3 prefixes included
background: -webkit-gradient( linear, left top, left bottom, color-stop(1, rgba(192,192,192,.6)), color-stop(0.5, rgba(0,0,0,.6)) ); background: -webkit-linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% ); background: -moz-linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% ); background: -ms-linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% ); background: -o-linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% ); background: linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% ); PAGE 51 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Step 3: Get rid of
browser Sniffing methods  Methods to determine what the user’s browser and device are capable of if ( navigator.userAgent.indexOf("iPad") > -1 ) { // Load HTML5 Experience } else { // Load Flash Experience } if ( tests.IE ) { j = /msie.(d.d+)/i; k = navigator.userAgent.match(j)[1]; }  The user agent string is not immutable  easily changed by plugins, or even the user.  Most modern browsers include the ability to easily change this value from their development tools PAGE 52 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Sniffing Methods
PAGE 53

Feature Detection  Remove the
browser sniffing code, and replace it with feature detection code if ( Modernizr.video ) { // Load HTML5 Video } Or if ( !!document.createElement(“video”).canPlayType ) { // Load HTML5 Video } else { // Load Flash Video } PAGE 54 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Use Fiddler (no direct access):
http://fiddler2.com  Modify remote files as though they were on my local machine  A great way for testing changes without the risk of breaking your live site if (!(navigator.userAgent.toLowerCase().indexOf("ipad")>-1)){ // Flash Experience } Replace with: if ( !document.createElement("video").canPlayType ) { // Flash Experience } PAGE 55 twitter @doristchen Blog http://blogs.msdn.com/dorischen

Fiddle: Setup AutoResponder
PAGE 56

Demo MSNBC : Cross Browser
Plugin-free

Take Away  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  mimics a standard API to avoid a rewrite  Use Yepnope  For conditional resource loader, work with Modernizr PAGE 58 twitter @doristchen Blog http://blogs.msdn.com/dorischen

RESOURCES • HTML5 Cheat Sheets
http://bit.ly/html5cheatsheets • Free HTML5 Video Training http://bit.ly/HTML5WebCampVideoTraining • Feature-specific demos • http://ie.microsoft.com/testdrive/ • Real-world demos • http://www.beautyoftheweb.com/ PAGE 59 twitter @doristchen Blog http://blogs.msdn.com/dorischen