HTML5 & CSS3:
the Good Enough Parts

Estelle Weyl

www.standardista.com
@estellevw

Part 1: CSS3 Snow

Part 2: CSS3 Other features

Part 3: HTML5

→Part 4: APIs←

CSS

@font-face Web fonts
calc() in CSS
Generated content
Gradients
display values
Mulitiple backgrounds
background image properties
Border images
Border-radius
Box-shadow
Box-sizing
New Colors
Alphatransparency
Media Queries
Multiple column layout
object-fit/object-position
Opacity
CSS3 selectors
Text-shadow
Transforms
Transitions
3D Transforms
Animation
Word-wrap
Flexible Box Layout Module
Grid Layout
rem (root em) units
Masks
Reflections
text-stroke
Text-overflow

HTML5

Semantic elements
Audio element
Canvas
contenteditable attribute
dataset & data-* attributes
Details & Summary elements
Drag and Drop
HTML5 form features
Form validation
Datalist element
Progress & Meter
New semantic elements
Offline web applications
Ruby annotation
Session history management
Text API for Canvas
Toolbar/context menu
Video element
WebGL - 3D Canvas graphics

JS API

Cross-document messaging
Cross-Origin Resource Sharing
File API
Geolocation
Hashchange event
IndexedDB
JSON parsing

Server-sent DOM events
Web Notifications
Web Sockets
Web Storage
Web Workers
Stream API
Web SQL Database
SVG

Other

classList (DOMTokenList )
Data URLs
getElementsByClassName
MathML
MPEG-4/H.264/WebM/VP8/Ogg/Theora video formats
querySelector/querySelectorAll
Touch events
WAI-ARIA Accessibility features
Font Formats
XHTML served as application/xhtml+xml
XMLHttpRequest 2
XHTML+SMIL animation

Part 4:
JavaScript APIs

JavaScript APIs

Offline web apps
Web Storage
Indexed dataBase
Geolocation
Session history
Drag and Drop
JSON parsing
File API
Web Workers
Web Sockets
Server events
Web Notifications
getElementsByClassName
classList (DOMTokenList)
querySelector/querySelectorAll
Hashchange event
Cross-document messaging
Cross-Origin Resource Sharing
Touch events
Toolbar/context menu

Offline Web Applications

<!doctype HTML>
<html manifest="cache.manifest">
<meta charset="utf-8"/>
<title>...

CACHE MANIFEST
#version01

#files that explicitly cached
CACHE:
index.html
css/styles.css
scripts/application.js

#Resources requiring connectivity
NETWORK:
signin.php
dosomething.cgi

Chrome 8
Safari 5.1
Firefox 4
Opera 12?
IE 10
Require hardware

ApplicationCache

Add to .htaccess file

AddType text/cache-manifest manifest

if(window.applicationCache){
 var appCache = window.applicationCache; 
 appCache.update();
 if (appCache.status == appCache.UPDATEREADY ){ 
      appCache.swapCache();
 }
}

localStorage

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

Save text value on the client side (crash-safe)

	var el = document.querySelector('#myID');
	// place content from local storage on load if there is one
	el.innerHTML = window.localStorage.getItem('value');

Session Storage

use localStorage for persistent storage
use sessionStorage for per tab storage

Chrome: view storage: Inspector > Local Storage

Chrome
Safari
Firefox
Opera
IE 8
Well Supported!

Web SQL

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); 
  db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [ ], successCallback, errorCallback);
});

ChromeView your database: Inspector > Resources > Databases

Chrome
Safari
Firefox
Opera
IE 8
Well Supported!

Index dB

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

Chrome 11
Safari
Firefox 4
Opera
IE 10

Another plug....

Workshop: HTML5 Overview
Tomorrow, 9:00 am
Atlantic I
Brian Sletten

Geolocation

function getLocation(){
  if (navigator.geolocation) {
  	  navigator.geolocation.getCurrentPosition(success, error);
	  console.log('got position');
	} else {
	  error('not supported');
	}
}
function error(text){
	text = text || 'failed';
	console.log(text); 
 }
function success(location){
	 var lat = location.coords.latitude;
	 var long = location.coords.longitude;
	 var url = "http://maps.google.com/maps?q="+ lat+","+long; 
}

Chrome 4
Safari 5
Firefox 3.5
Opera 10.6
IE 9

History API

Load data & change browser address bar (without reloading)

window.history.pushState(data, title, url) 
/* Pushes data into history, with title, and, if provided, the URL.*/


window.history.replaceState(data, title, url) 
/* Updates current history entry to given data, with title, and, if provided, URL */

window.history.length /* number of entries in session history */

window.history.state /* current state */

window.history.go( Δ ) /*  back or forward Δ steps */

window.history.back() /* Goes back one step Δ== -1*/

window.history.forward() /* Goes forward one step Δ = 1*/

Drag and Drop

document.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text', 'Customized text');
  event.dataTransfer.effectAllowed = 'copy';
}, false);

Drag this text or the image above to the right. You can even change this text.

Drop Area

Chrome 8
Safari
Firefox 3.5
Opera 12?
IE
mobile: only Android

File API

Import from the filesystem or the web.
Create new files from scratch.
Manipulate existing file data.
Store file data on the client.
Publish files back to the web.

Chrome 6
Safari
Firefox 3.6
Opera 11.1
IE 10
mobile: only Android

Tutorial: Talk from Google I/O

File API

  <input type="file" id="files" accept="image/*" multiple>
document.querySelector('#files').onchange = function(e) {
  var files = e.target.files; // FileList of File objects.

  for (var i = 0, f; f = files[i]; ++i) {
    console.log(f.name, f.type, f.size,
                f.lastModifiedDate.toLocaleDateString());
  }
};

Web Workers

Create additional javascript threads to run scripts in the background.

No access to DOM
Allows UI thread to continue

Web Sockets

Full-duplex, bi-directional communication.
Both server and client can send data at any time or same time
Only data is sent, without HTTP headers (reduces bandwidth.

JS Events and Methods

var elements = document.getElementsByClassName(className)

Chrome 6
Safari
Firefox 3
Opera
IE 9
mobile: all

var element = document.querySelector(selectors);
var element = $(selectors)[0];

var elements = document.querySelectorAll(selectors);
var elements = $(selectors);

Where 'selectors' is a comma separated list of CSS selectors

Chrome 6
Safari
Firefox 3
Opera
IE 8
mobile: all

classList

<article id="main" class="blogpost popup"></article>

var el = document.getElementById('main').classList;
var el = document.querySelector('#main').classList;
el.add('bgimage');
el.remove('blogpost');
el.toggle('popup');
console.log(el.contains('popup')); // false
console.log(el.contains('blogpost')); // false
console.log(el.classList.toString() == el.className); // true

Result:

<article id="main" class="bgimage"></article>

Chrome
Safari 5.1
Firefox
Opera
IE 10
mobile: Android 3, Opera 11.1

Notifications

if (window.webkitNotifications.checkPermission() == 0) {
  window.webkitNotifications.createNotification(picture, title, 
      content).show();
} else {
  window.webkitNotifications.requestPermission();
}

Scene 5:
The End

Thank you

Estelle Weyl

www.standardista.com

@estellevw