Practical HTML5: Using It Today

Practical HTML5:Using It TodayDoris Chen Ph.D.Developer EvangelistMicrosoftdoris.chen@microsoft.comhttp://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 Has over 15 years of experience in the software industry focusing on web technologies Spoke and published widely at JavaOne, OReilly, 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)

Agenda Browser Fragmentation Feature Detection Polyfills and Shims Polyfills and Shims: Examples Summary and ResourcesPAGE 3

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

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

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

Why not Check for aBrowser? 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); }

Why not Check for aBrowser?Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }

DemoFeature Detection

What Happens When Feature DetectionLooks 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; };

Feature Detection Best option in my opinion for this… http://www.modernizr.com/

 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

Get Custom Build

Test for @font-faceYou 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; };

Test for @font-faceOr …. if (Modernizr.fontface){ … }

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

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

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

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?

Polyfills & Shims: Examples Semantic Tags Video Tags Media Queries

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

HTML5 Semantic TagsSupported 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>

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

DemoSemantic Tags

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 Audio 10.0.648.20vCurrent 9 6 5.0.4 11.01 4MP3 audio Yes No Yes Yes No (*)supportWAV PCMaudio No Yes Yes Yes YessupportAAC audio Yes No Yes Yes No (*)format

Compatibility TableHTML5 <video> 10.0.648.20vCurrent 9 6 5.0.4 11.01 4VP8(WebM) Yes No (*) Yes Yesvideosupport YesH.264 video No (*) Yes Yes (*) No (*)format

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

HTML5 <video> : Degrading Gracefully Multiple video sources to support multiple browsers <video src="video.mp4" poster="movie.jpg" height="480" width="640" autoplay autobuffer controls loop> <source src="video.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="video.mp4" />  <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, fall back

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>

DemoUse Respond for Media QueriesRealife: http://bostonglobe.com/

Yepnopejs 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/

Yepnope Syntax yepnope([{ test : /* boolean - Something truthy that you want to test */, yep : /* array (of strings) | string - The things to load if test is true */, nope : /* array (of strings) | string - The things to load if test is false */, both : /* array (of strings) | string - Load everytime */, load : /* array (of strings) | string - Load everytime */, callback : /* function ( testResult, key ) | object { key : fn } */, complete : /* function */ }, ... ]);PAGE 44

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

DemoYepnope, Modernizr

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

Books Introducing HTML5 (Bruce Lawson & Remy Sharp) HTML5 for Web Designers (Jeremy Keith) CSS3 for Web Designers (Dan Cederholm)

Practical HTML5: Using It Today

by Doris Chen

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 1,585

Statistics