HTML5 for Web Apps,
in depth and
cross-browser

Paul Irish
Google Chrome, Developer Programs Engineer

Web Directions East, Tokyo
November 15th

stateofhtml5.appspot.com

Hello, I'm Paul.
HTML5: Where are we now?

What's practical to actually use?

Let's break this up.

Dependable features

Roughly usable features

Experimental features

Edge features

Dependable features
  • doctype 
    <!doctype html>
  • charset 
    <meta charset="utf-8">
  • self-closed tags, optional quotes 
    <link rel=stylesheet href=style.css />
  • no more type attributes 
    <link rel=stylesheet type="style/css" href=style.css />
  • new semantics 
    <article> <nav /> <section>
  • data-* attributes 
    <a data-omg="double">
  • contenteditable
Roughly usable features
Experimental features
  • form input types
  • <meter> & <progress>
    progress:
    meter:
  • web SQL database
    IndexedDB is taking its place, slowly...
  • web storage
  • web workers
  • WebGL
  • history.pushState
  • File API
Edge features

Kicked to the curb?

IE6: Dead to you.
  • PNG support!
  • position: fixed
  • div:hover
  • selectors: div:first-child, h2 + p,
    img[data-fullsize], and ul.main > li
  • background-attachment: fixed
  • min-width, max-height, etc
IE6: Dead to you.


☑ Prompt for Chrome Frame install


<!--[if lt IE 7 ]> 

  <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
  
  <script>
   CFInstall.check();
  </script>
  
<![endif]-->
IE7: Dead to you.
  • postMessage
  • cross-domain XHR
  • native JSON
  • data URI
  • :before, :after, :focus
  • localStorage and sessionStorage
  • getters and setters on DOM elements 
    if (!Element.prototype.__lookupGetter__("dataset")) {
   Element.prototype.__defineGetter__("dataset", function() {
       try { // simulate DOMStringMap w/accessor support
           var getter_test = {};
           getter_test.__defineGetter__("test", function() {}); // test setting accessor on normal object
           delete getter_test;
           var HTML5_DOMStringMap = {};
       } catch (e) {
           var HTML5_DOMStringMap = document.createElement("div")
       } // use a DOM object for IE8
  • querySelector(), querySelectorAll()
  • box-sizing! 
         -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* IE8 & Opera */

You're a cross-browser warrior

You feature detect, right?

Modernizr does that.
caniuse.com

e.g.: <input type=number>

Modernizr 1.6!

www.modernizr.com


Now with: WebGL, touch, flexbox, inline SVG.

Fixes for Typekit, IE9's bugs, Firefox's picky security settings.

Regressive Enhancement

polyfill:

(n) 1. A shim that mimics a future API, providing fallback functionality to older browsers.

e.g. geolocation polyfill

BAM! Cross-browser HTML5 polyfills

From the author of goto.js and co-author of vapor.js...

Introducing: yepnope.js v0.2.3

polyfill demo

Sound like too much work? Make money instead!

Chrome Web Store

Chrome Web Store: Advantages
  • unlimited storage
  • notifications
  • WebGL, hardware acceleration
  • File API: drag in, out
    Filesystem coming soon
  • speech attribute
  • orientation

Responsible HTML5 Development:

Modernizr ⇒ yepnope.js ⇒ Polyfills

While you can provide consistent features everywhere, maybe you shouldn't.

Be the champion of performance

Two Performance Truths:

Both you and the client want the most responsive experience possible.

Everything added to the page slows it down.

Aim for a great experience.

An excellent experience is better than feature parity across browsers

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

HTML5 Boilerplate
Thank you, kindly.