HTML5 Today - Sep 2011

Ido Green @greenido +Google

Agenda

HTML5 & CSS3 Support

2008

HTML5 & CSS3 Support

2011

When can we start using HTML5?
Today!
But how can I use it safely?
Feature Detection
You are using feature detection, right? right?
Okay, how about older browsers?

Good To Go

Semantic Tags, doctype, charset, quotes & more

<!doctype html>
<html lang="en">
  <head>
    <title>page title</title>
    <meta charset=utf-8>
    <style>
      body { background-color: #ccc; }
    </style>
  </head>
  <body class=myClass>
    <article>Hello, world!</article>
    <input type=text required>
  </body>
  <script>
    console.log('Oh, hello there!');
  </script>
</html>

Speech Input

<input type="text" x-webkit-speech />
function startSearch(event) {
  if (event.target.results.length > 1) {
    var second = event.target.results[1].utterance;
    document.getElementById("second_best").value = second;
  }
  event.target.form.submit();
}

Form Elements

<input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14" 
  value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel"  placeholder="(555) 555-5555"
   pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />

Web Fonts

@font-face {
    font-family: 'GoodDogRegular';
    src: url('fonts/GoodDog-webfont.eot');
    src: url('fonts/GoodDog-webfont.eot?#iefix') 
           format('embedded-opentype'),
         url('fonts/GoodDog-webfont.woff') format('woff'),
         url('fonts/GoodDog-webfont.ttf') format('truetype'),
         url('fonts/GoodDog-webfont.svg#GoodDogRegular') 
           format('svg');
    font-weight: normal;
    font-style: normal;

}

This is Good Dog Regular

Data Attributes

<div id="out" data-double="rainbow" data-freak="out">
// Add new data attributes via JS.
var el = document.querySelector('#out');
el.setAttribute('data-foo', 'bar');

var html = [];
for (var key in el.dataset) {
  html.push(key, ': ', el.dataset[key], '<br>');
}

el.innerHTML = html.join('');

Output:

double: rainbow
freak: out

Geo Location

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);
}

Good To Go (Beta)

Canvas

<canvas id="canvas" width="838" height="220"></canvas>
<script>
  var canvasContext = 
    document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);
  
  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

Web Storage

saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');

Gradients

background: linear-gradient(top, rgba(206,220,231,1) 0%, 
  rgba(89,106,114,1) 100%);
background: radial-gradient(center, 100px 100px, red, black);

http://colorzilla.com/gradient-editor/

Transitions & Transforms

div {
  margin-left: -2100px;
  -webkit-transform: scale(0.5);
  -webkit-transition: all 800ms ease-in; 
     -moz-transition: all 800ms ease-in; 
       -o-transition: all 800ms ease-in; 
          transition: all 800ms ease-in;
}

.div:hover {
  margin-left: auto;
  -webkit-transform: scale(1.0);
}

Application Cache

<html manifest="cache.appcache">

cache.appcache:

CACHE MANIFEST
# version 1.0.0
 
CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
 
NETWORK:
*

Enter At Your Own Risk

IndexedDB

Will eventually replace WebSQL as an object store, for storing significant quantities of structured JSON data.

var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
  var db = event.result;
  var transaction = db.transaction([], IDBTransaction.READ_ONLY);
  var curRequest = 
    transaction.objectStore('ObjectStore Name').openCursor();
  curRequest.onsuccess = ...;
};

How To Use IndexedDB

Web Workers

index.html

function startWorker(settings) {
  var myWorker = new Worker('scripts/worker.js');
  myWorker.addEventListener("message", workerListener, false);
  myWorker.postMessage(settings);
}

worker.js

self.addEventListener('message', function(e) {
  doSomeWork();
};

function doSomeWork() {
  importScripts('http://url?callBack=handleWork');
}

function handleWork() {
  postMessage(result);
}

Tools & Resources

ChromeStatus.com

updates.HTML5Rocks.com

Resources

Developer Guides & Tutorials

Tools & Libraries

Thank you!

Questions?

Ido Green @greenido +Google
Blog
Get the slides at Get The Slides - http://goo.gl/Ry6rP