HTML5 compatibility

Last major update on 12 June 2009.

These compatibility tables detail support for the new HTML5 functionalities in all modern browsers.

Overview

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
localStorage and sessionStorage

Details 		No Yes No Yes No Yes No No To be tested
New form fields

Details 		No No Minimal Minimal Yes To be tested
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7

Local storage and session storage

Otherwise the two storage objects work exactly the same. The storage object in the code examples below can stand for either localStorage or sessionStorage.

Test page.

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
clear()
Clear the entire storage 		No Yes No Incomplete No Yes No No To be tested 
storage.clear()

Clear all values from the storage object.

  • Firefox supports this method only on localStorage, and not on sessionStorage.
getItem()
Get a value by key 		No Yes No Yes No Yes No No To be tested 
var x = storage.getItem('ppk')

Get the stored value by name.
key()
Retrieve keys by number 		No Yes No Yes No Yes No No To be tested 
var x = storage.key(1)

x now contains the second key in the storage object. Exactly which key is considered the second depends on the browser. In practice this method is meant for looping through all keys.

Entering a key that does not exist throws an error.
length
The number of keys stored 		No Yes No Yes No Yes No No To be tested 
storage.length

The number of keys stored in the storage object.
removeItem()
Remove a key and its value 		No Yes No Yes No Yes No No To be tested 
storage.removeItem('ppk')

Remove a named item from the storage.
setItem()
Set a value by key 		No Yes No Yes No Yes No No To be tested 
storage.setItem('ppk','JavaScript')

Set a value to a key.
storage event
Fires when the storage changes 		No Yes No Yes No Yes No No To be tested 
document.addEventListener('storage',handleStorage,false)

This event fires on all pages that come from the same site when a local storage field is changed.

If a session field is changed, it fires only in the relevant window.

Thus, scripts in pages opened in other tabs or windows can also update their storage use.

Safari requires you to define your event listener on the <body>; IE requires it to be set on the document. Firefox doesn’t care.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
storage event - domain property
The domain in which this storage is active Mozilla proprietary 		No No Yes No No No To be tested 
storageEvent.domain

The domain the field is stored in.
storage event - key property
What’s the key of the changed field? 		No No No Yes No No To be tested 
storageEvent.key

The key of the changed field.
storage event - newValue property
What’s the new value of the changed field? 		No No No Yes No No To be tested 
storageEvent.newValue

The new value of the affected field.
storage event - oldValue property
What’s the old value of the changed field? 		No No No Yes No No To be tested 
storageEvent.oldValue

The old value of the affected field. Is null when the clear() method is used.
storage event - uri property
What’s the url of the page that changed the field? Apple proprietary 		No No No Yes No No To be tested 
storageEvent.uri

The URL of the page that changed the field.
storage event - url property
What’s the url of the page that changed the field? 		No No Yes No No No To be tested 
storageEvent.url

The URL of the page that changed the field.
storage event - source property
Gets the windowProxy of the window the change happened in (or something) 		No No No Yes No No To be tested 
storageEvent.source

The window in which the field was changed.

This property is pretty interesting, because it allows you to create a connection between two totally separate windows.

So far, windows could only influence each other if they knew of each other’s existence; i.e. if one window was opened by the other by means of JavaScript.

With the source property this restriction is lifted. You can basically define a storage event in all pages on your site, change one field, and let all other opened pages from this site connect to the window that changed the field.
storage event - storageArea property
Did the change happen in the localStorage or sessionStorage object? 		No No No No No To be tested 
storageEvent.storageArea

Whether a local or a session field was changed.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7

Form controls

HTML5 defines quite a few new form field types, most of which serve to automate common tasks such as entering a date. There are also a few new form field attributes.

Test page.

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 4.0 Win Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
<input type="color">
 No No No No No To be tested

Will probably show a color wheel or similar interface.
<datalist>
 No No No No Yes To be tested 
<input list="ppk" name="list" />
<datalist id="ppk">
	<option label="ppk" value="ppk">
	<option label="JavaScript" value="JavaScript">
</datalist>

Shows the listed values as a suggestion/autocomplete box. Users can type in an alternative value, though.
<input type="date">
 No No No No Yes To be tested

Shows a calendar popup.
<input type="datetime">
 No No No No Yes To be tested

Shows a calendar popup and a time box.
<input type="email">
 No No No No Yes To be tested

Value is automatically validated as an email address, and if it’s invalid form submission is halted.
<input type="number">
 No No No No Yes To be tested

Value should be a number, and a special control is added for going up or down the numbers. Oddly, this filed is not auto-validated, although it’s not submitted to the server when it does not contain a number.
<input type="range">
 No No Yes Yes Yes To be tested

Shows a slider.
<input type="search">
 No No No No No To be tested

I’m not sure what should happen.
<input type="time">
 No No No No Yes To be tested

Shows a time box.
<input type="week">
 No No No No Yes To be tested

Shows a calendar box with only the weeks selectable.
<input type="url">
 No No No No Yes To be tested

Value is automatically validated as a URL, and if it’s invalid form submission is halted.
autofocus
 No No No Yes Yes Buggy To be tested
<input type="text" autofocus>

The browser automatically focuses on this field when the page is loading.

  • The autofocus works fine in Opera on the pages here on QuirksMode.org, but it doesn’t work when I access the same page on my local web server.
required
 No No No No Yes To be tested
<input type="text" required>

Form submission is halted if a required field does not have a value.
placeholder
 No No Yes Yes Yes To be tested
<input type="text" placeholder="Some text">

The placeholder text is shown as long as the field is unfocused and the user has not entered another value.
step
 No No No No Yes To be tested
<input type="number" step="3">

The number field goes from 0 up in steps of 3. The browser generates an error message when the value does not conform to the step attribute.
AppCache: FF 3.5, Ozone, Saf 4 Mac (heard, not tested), iPhone. HTML5 Drag and Drop: don't fucking bother online/offline events: only FF

These compatibility tables are sponsored by

Google