The State of HTML5

Paul Irish
Google Chrome, Developer Programs Engineer

October 2010

This presentation is updated regularly.
In order to view this presentation accurately, you'll want to use Chrome Dev Channel or a nightly Chromium.
For the demos you'll need a combination of Chromium or Chrome Dev Channel. If you need Firefox Minefield, a custom Webkit-audio build or Opera 10.70, it will be noted.

You can navigate with → and use ↓ on bullets.

A proper video of this talk will be arriving in a few fortnights.

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
  • web storage
  • web workers
  • WebGL
  • File API
  • history.pushState
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 Beta!

http://bit.ly/mod16beta


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 alpha

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

Next steps...

Modernizr ⇒ yepnope.js ⇒ Polyfills

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

HTML5 Boilerplate
Thank you, kindly.