Practical HTML5:Using It TodayDoris Chen Ph.D.Developer EvangelistMicrosoftdoris.chen@microsoft.comhttp://blogs.msdn.com/d...
Who am I? Developer Evangelist at Microsoft based in Silicon  Valley, CA    Blog: http://blogs.msdn.com/b/dorischen/   ...
Agenda         Browser Fragmentation         Feature Detection         Polyfills and Shims         Polyfills and Shims: Ex...
Browser Fragmentation
Non-Modern Browsers   Most non-modern browsers have trouble      Non-modern Browsers (ref: caniuse.com)         IE 6 - ...
Browser Fragmentation
Fragmentation Varying Levels of Support   Across browsers   Across browser versions   New versions released    constan...
Feature Detection
Feature Detection Based on what browsers support, not their versions Check for the feature you want to use   Object, Me...
Why not Check for aBrowser? Bad // If not IE then use addEventListener… if (navigator.userAgent.indexOf("MSIE") == -1) {  ...
Why not Check for aBrowser?Good if (window.addEventListener) {      window.addEventListener( “load”, popMessage, false ); ...
DemoFeature Detection
What Happens When Feature DetectionLooks Like This…Yuck! Even the monkey is freaked! function(){        var        sheet, ...
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 ...
Get Custom Build
Test for @font-faceYou can do this           function(){                  var                  sheet, bool,               ...
Test for @font-faceOr ….        if (Modernizr.fontface){        …        }
Demo
Polyfills and Shims
Polyfills & Shims   What are they?     Typically JavaScript, HTML & CSS code   What do they do?     Provides the techn...
What’s the Difference?   Polyfill:      Replicates the real, standard feature API      You can develop for the future  ...
Polyfills & Shims   Big List of Polyfills: http://bit.ly/b5HV1x      Some are good, some not so good   Some frequently ...
Consider This You need to vet the code   Does it work as expected?   Cross-browser? You may need to support it in the ...
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...
HTML5 Semantic TagsSupported in Internet Explorer 9<body>                                <mark>Doris dancing!</mark> <head...
HTML Tags               <div id=”header”>                 <div id=”nav”>   <div id=”sidebar”>    <div id=”article”>       ...
New Semantic HTML Tags                <header>                 <nav>                           <section>      <aside>     ...
Recognition & Styling Non-modern browsers don’t recognize the new  tags Internal stylesheets not updated You can’t styl...
DemoSemantic Tags
Polyfills & Shims: Examples   Semantic Tags   Video Tags   Media Queries
HTML5 Video & Audio <audio     <video src=       src=       The url to the audio or video            width=     The width ...
Compatibility Table HTML5 Audio                                10.0.648.20vCurrent    9     6     5.0.4                 11...
Compatibility TableHTML5 <video>                                      10.0.648.20vCurrent      9       6      5.0.4       ...
Elements With Fall Backs          Browsers won’t render elements          they don’t understand...            For example:...
HTML5 <video> : Degrading Gracefully Multiple video sources to support multiple browsers   <video src="video.mp4" poster=...
DemoVideo, fall back
Polyfills & Shims: Examples  Semantic Tags  Video Tags  Media Queries
Use Respond.js for Media Queries  Respond.js    Enable responsive web designs in browsers    A fast polyfill for CSS3 M...
DemoUse Respond for Media QueriesRealife: http://bostonglobe.com/
Yepnopejs Asynchronous conditional resource loader for JavaScript and CSS Integrated into Modernizr , only 1.6kb Load o...
Yepnope Syntax yepnope([{    test : /* boolean - Something truthy that you want to test */,    yep : /* array (of strings)...
Yepnope and Modernizr<script type="text/javascript"src="yepnope.1.0.2-min.js"></script>  <script type="text/javascript">  ...
DemoYepnope, Modernizr
Take Away   Avoid browser detection      Browsers change      Varying levels of feature support across all major browse...
Books            Introducing HTML5        (Bruce Lawson & Remy Sharp)         HTML5 for Web Designers               (Jerem...
Practical HTML5: Using It Today
Practical HTML5: Using It Today
Upcoming SlideShare
Loading in...5
×

Practical HTML5: Using It Today

3,406

Published on

Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring older browsers render your web pages as expected? This is where Modernizr, polyfills and shims come in. In the session, you’ll learn the best practices and strategy to deal with new HTML5 and CSS3 features in old legacy browsers. You’ll learn step by step how to use specially crafted JavaScript and CSS code that emulate HTML5 features. With a couple of simple changes to your sites, you can take advantage of HTML5 today without breaking your sites in older browsers. Expect a lot of demos and code in the session.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,406
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
61
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Practical HTML5: Using It Today

  1. 1. Practical HTML5:Using It TodayDoris Chen Ph.D.Developer EvangelistMicrosoftdoris.chen@microsoft.comhttp://blogs.msdn.com/dorischen/@doristchen
  2. 2. 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)
  3. 3. Agenda Browser Fragmentation Feature Detection Polyfills and Shims Polyfills and Shims: Examples Summary and ResourcesPAGE 3
  4. 4. Browser Fragmentation
  5. 5. 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
  6. 6. Browser Fragmentation
  7. 7. 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
  8. 8. Feature Detection
  9. 9. 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
  10. 10. 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); }
  11. 11. Why not Check for aBrowser?Good if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
  12. 12. DemoFeature Detection
  13. 13. 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; };
  14. 14. Feature Detection Best option in my opinion for this… http://www.modernizr.com/
  15. 15.  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
  16. 16. Get Custom Build
  17. 17. 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; };
  18. 18. Test for @font-faceOr …. if (Modernizr.fontface){ … }
  19. 19. Demo
  20. 20. Polyfills and Shims
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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?
  25. 25. Polyfills & Shims: Examples Semantic Tags Video Tags Media Queries
  26. 26. 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
  27. 27. 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>
  28. 28. HTML Tags <div id=”header”> <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”>
  29. 29. New Semantic HTML Tags <header> <nav> <section> <aside> <article> <footer>
  30. 30. Recognition & Styling Non-modern browsers don’t recognize the new tags Internal stylesheets not updated You can’t style elements not recognized
  31. 31. DemoSemantic Tags
  32. 32. Polyfills & Shims: Examples Semantic Tags Video Tags Media Queries
  33. 33. 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>
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 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" /> <!-- 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>
  38. 38. DemoVideo, fall back
  39. 39. Polyfills & Shims: Examples Semantic Tags Video Tags Media Queries
  40. 40. 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>
  41. 41. DemoUse Respond for Media QueriesRealife: http://bostonglobe.com/
  42. 42. 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/
  43. 43. 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
  44. 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
  45. 45. DemoYepnope, Modernizr
  46. 46. 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
  47. 47. Books Introducing HTML5 (Bruce Lawson & Remy Sharp) HTML5 for Web Designers (Jeremy Keith) CSS3 for Web Designers (Dan Cederholm)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×