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.

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

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

3. Agenda
Browser Fragmentation
Feature Detection
Polyfills and Shims
Polyfills and Shims: Examples
Summary and Resources
PAGE 3

4. Browser Fragmentation

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. Browser Fragmentation

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. Feature Detection

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

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

12. Demo
Feature Detection

13. 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;
};

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

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. Get Custom Build

17. 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;
};

18. Test for @font-face
Or ….
if (Modernizr.fontface){
…
}

19. Demo

20. Polyfills and Shims

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

23. 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

24. 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

25. 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?

26. Polyfills & Shims: Examples
Semantic Tags
Video Tags
Media Queries

27. 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

28. 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>

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

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

31. Recognition & Styling
 Non-modern browsers don’t recognize the new
tags
 Internal stylesheets not updated
 You can’t style elements not recognized

32. Demo
Semantic Tags

33. Polyfills & Shims: Examples
Semantic Tags
Video Tags
Media Queries

34. 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>

35. Compatibility Table
HTML5 Audio
10.0.648.20
vCurrent 9 6 5.0.4 11.01
4
MP3 audio
Yes No Yes Yes No (*)
support
WAV PCM
audio No Yes Yes Yes Yes
support
AAC audio
Yes No Yes Yes No (*)
format

36. 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

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

38. 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>

39. Demo
Video, fall back

40. Polyfills & Shims: Examples
Semantic Tags
Video Tags
Media Queries

41. 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>

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

43. 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/

44. 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

45. 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

46. Demo
Yepnope, Modernizr

47. 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

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