HTML5 Espiadas, Cutucadas e Apontadores

Abreviações comuns (você vai vê-las ao longo deste artigo):
$new=document.createElement $bool=function(any){return!(any=="no"||!any)}
A maioria das novas funcionalidades podem ser detectadas em JavaScript. Para testar o suporte HTML5 a vídeos, crie uma tag <video> e verifique se existe a seguinte propriedade no DOM: if("canPlayType" in $new("video")){...}
Veja Capítulo 2: Detectando Funcionalidades Da HTML5.

Novos elementos

5 > 2 Formas

Veja Capítulo 3: O Quê Significa Tudo Isso? Compatível com HTML 4. Veja Capítulo 9: Uma Forma De Loucura.
Teste de suporte Teste de suporte
<command> "type" em $new("command") Validation "noValidate" em $new("form")
<datalist> "options" em $new("datalist") Regex constraint "pattern" em $new("input")
<details> "open" em $new("details") Placeholder text "placeholder" em $new("input")
<output> "value" em $new("output") Autofocus "autofocus" em $new("input")
<progress> "value" em $new("progress") Required "required" em $new("input")
<meter> "value" em $new("meter") Novos input types Navegadores podem personalizar os métodos de estilo ou de entrada.
<time> "valueAsDate" em $new("time") type="search" search box
Anotações de texto <ruby>, <rt>, <rp> type="number" spinbox
Semântica utilizáveis em todos os navegadores IE < 9 requer um hack. type="range" slider
<article>, <aside>, <header>, <hgroup>, <footer>, type="color" color picker
<section>, <nav>, <figure>, <figcaption>, <mark>, type="tel" telephone number
<summary> type="url" web address
Documentados recentemente <embed>, <keygen>, <wbr> type="email" email address
Obsoletos Ainda suportados, mas não validados. type="date"/"time"/"month"/"week"/"datetime"
<basefont>, <big>, <center>, <font>, <s>, <strike>, Testes para os novos input types Todos os testes seguem o mesmo padrão.
<frame>, <frameset>, <noframes>, <applet>, <dir>, function() {
<isindex>, <tt>, <u>, <acronym> (usar <abbr>)   var i = $new("input");

Sempre colocar "aspas" nos seus atributos, a não ser que você seja um rockstar. Mantenhas suas barras finais se você quiser. A validação ainda é interessante: html5.validator.nu

  i.setAttribute("type", "search");
  return i.type !== "text";
}
Alguns navegadores dizem “suportar” algum input type mas não oferecem um padrão para interface do usuário.
Modernizr consegue detectar isto.

Veja mamãe, sem plugins Multimedia

Encodando video com Firefogg (Theora), HandBrake (H.264), ou Miro Video Encoder (multiple). Veja Capítulo 5: Vídeo na web.
<audio> support "canPlayType" in $new("audio")
Vorbis $bool($new("audio").canPlayType('audio/ogg; codecs="vorbis"'))
MP3 $bool($new("audio").canPlayType('audio/mpeg;'))
AAC $bool($new("audio").canPlayType('audio/mp4; codecs="mp4a.40.2"'))
<video> support "canPlayType" in $new("video")
WebM $bool($new("video").canPlayType('video/webm; codecs="vp8, vorbis"'))
Theora $bool($new("video").canPlayType('video/ogg; codecs="theora"'))
H.264 $bool($new("video").canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'))
Properties Estes se aplicam a ambos elementos de <audio> e <video>.
src string currentSrc string, somente leitura
preload string tracks um array de objetos TimedTrack
currentTime em segundos buffered Objeto TimeRanges, somente leitura
initialTime em segundos, apenas leitura played Objeto TimeRanges, apenas leitura
duration em segundos, apenas leitura seekable Objeto TimeRanges, apenas leitura
startOffsetTime datetime, apenas leitura networkState enumerated, apenas leitura
paused boolean readyState enumerated, apenas leitura
ended boolean, apenas leitura error.code enumerated, apenas leitura
autoplay boolean

Liste vários elementos <source> em um <audio> ou <video>. O suporte a HTML5 dos browsers não renderizam os filhos de <video>, então coloque o fallback em Flash lá. Áudio e vídeo devem ser colocados com o MIME type apropriado, então verifique seu Content-Type no cabeçalho!

loop boolean
controls boolean
volume 0.0 a 1.0, default = 1.0
muted boolean
playbackRate default = 1.0

Offline

IsGeolocationPartOfHTML5.com Geolocalização

Veja Capítulo 8: Vamos tornar isso offline. Compartilhamento de localização sempre é opt-in (opcional). Veja Capítulo 6: Você está aqui.
Teste de suporte window.applicationCache Teste de suporte navigator.geolocation
<html manifest> Links para cache manifest. Funções
Sessões cache manifest Position getCurrentPosition(callback, err, opt);
CACHE: Sempre em cache. Sem wildcards. long watchPosition(callback, err, opt);
NETWORK: Nunca em cache. "*" wildcards. void clearWatch(watchId);
FALLBACK: Pares; o segundo é utilizado offline. void callback(position); Chamado em caso de sucesso
Eventos Os quatro primeiros são os mais comuns. void err(positionError); Chamado em caso de erro
checking sempre em primeiro lugar PositionOptions object
downloading Encontrado manifest, buscando timeout Em milissegundos
progress Ainda buscando maximumAge também milissegundos
cached todos os recursos armazenados em cache enableHighAccuracy true or false (verdadeiro ou falso)
noupdate manifest não mudou Position object (no callback) Tem timestamp e coords.
updateready chamar swapCache() para ativar Coordinates object Propriedades não suportados serão null.
obsolete manifest é 404 (ou 410) latitude em graus decimais
error tudo deu errado em algum lugar longitude também em graus decimais

Semânticas HTTP ainda se aplicam aos recursos listados no cache manifest, então verifique seus cabeçalhos Expires e Cache-Control. Manifest devem ser apresentados como text/cache-manifest, então verifique o seu cabeçalho Content-Type também. Se qualquer recurso necessário não carregar, a aplicação não irá funcionar offline.

altitude metros acima do elipsóide de referência
accuracy em metros
altitudeAccuracy também em metros
heading graus CCW do norte verdadeiro
speed em metros/segundos
PositionError object (no err callback) tem message e code:
TIMEOUT, POSITION_UNAVAILABLE,
PERMISSION_DENIED, ou UNKNOWN_ERROR

Matemática é difícil, vamos às compras! Canvas

Os caminhos são como traçar a lápis; nada é desenhado até fill() ou stroke()! Veja Capítulo 4:Vamos Chamar De Superfície de Desenho.
Suporte básico "getContext" in $new("canvas")
Suporte de texto typeof $new("canvas").fillText=="function"
Funções Caminho da raiz está implícito; subcaminhos devem ser explícitos. drawImage() também pode desenhar vídeo ou canvas.
beginPath(); drawImage(image,dx,dy,dw,dh); quadraticCurveTo(cpx,cpy,x,y);
closePath(); rotate(angle); bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
moveTo(x,y); translate(x,y); arc(x,y,radius,startAngle,endAngle,anticlockwise);
lineTo(x,y); arcTo(x1,y1,x2,y2,radius); getImageData(sx,sy,sw,sh);
rect(x,y,w,h); isPointInPath(x,y); putImageData(imagedata,dx,dy,x,y,w,h);
fill(); fillRect(x,y,w,h); fillText(text,x,y,maxWidth);
stroke(); strokeRect(x,y,w,h); strokeText(text,x,y,maxWidth);
clip(); clearRect(x,y,w,h); measureText(text);
save(); setTransform(a,b,c,d,e,f); createLinearGradient(x0,y0,x1,y1);
restore(); transform(a,b,c,d,e,f); createRadialGradient(x0,y0,r0,x1,y1,r1);
scale(x,y); createImageData(sw,sh); createPattern(image,repetition);
Propriedades Todas as propriedades são de leitura/escrita. fillStyle e strokeStyle também pode ser um gradiente ou padrão.
fillStyle cor CSS, padrão = "black" shadowColor cor CSS, padrão = "black"
strokeStyle cor CSS, padrão = "black" shadowOffsetX Em pixels, padrão = 0
font fonte CSS, padrão = "10px sans-serif" shadowOffsetY Em pixels, padrão = 0
textAlign enumerated, padrão = "start" shadowBlur Em pixels, padrão = 0
textBaseline enumerated, padrão = "alphabetic"

Aprenda mais sobre os estados! Um canvas state inclui o caminho de recorte, todas as propriedades, e todas as transformações. save() envia um estado para a pilha e restore() tira fora.

globalAlpha 0.0 (transparente) até 1.0 (opaco)
lineWidth Em pixels, padrão = 1
lineCap enumerated, padrão = "butt"
lineJoin enumerated, padrão = "miter"
miterLimit float, enumerado = 10

Bits & Bytes

Doctype <!DOCTYPE html> Dispara a renderização baseada em padrões em todos os navegadores. É 2011; pare de confiar em "quirks mode"!
Codificação de texto <meta charset="utf-8"> Sempre declarar um charset, mesmo que você seja um rockstar. UTF-8 sempre é uma escolha segura.
Tags de fim opcional <html>, <head>, <body>, <li>, <p>, <dt>, <dd>, <colgroup>, <option>, <optgroup>, <rt>, <rp>,
<thead>, <tbody>, <tfoot>, <tr>, <td>. Exceção: sempre feche <p> antes de <table> para evitar a loucura do IE.
Tags de inicio opcionais <html>, <head>, <body>, <tbody>, <colgroup>. Surpreenda os seus amigos! Ignore a tag <html> e continue validando!
Novos atributos <a media>, <a ping>, <base target>, <style scoped>, <script async>, <ol reversed>
Testes diversos Veja O Único Quase-Alfabético Sem-Besteiras Guia Para Detectar Tudo.
IndexedDB window.indexedDB contentEditable "isContentEditable" in $new("a")
Web Workers window.Worker Drag-and-drop "draggable" in $new("span")
Web Sockets window.WebSocket File API typeof FileReader!=="undefined"
X-doc messaging window.postMessage Undo history typeof UndoManager!=="undefined"
Web SQL window.openDatabase <iframe sandbox> "sandbox" in $new("iframe")
Web Storage "localStorage" in window && window["localStorage"] !== null Veja Capítulo 7: Um Lugar Para Colocar Suas Soisas.
History API window.history && window.history.pushState Veja Capítulo 11: Manipulando Histórico Para Diversão & Lucro.
Inline SVG function() { var e=$new("div"); e.innerHTML="<svg></svg>";
  return window.SVGSVGElement && e.firstChild instanceof window.SVGSVGElement}

Serial Number 110518 Creditos

Escrita Mark Pilgrim Referências HTML5, HTML-diff, HTML vs. XHTML
Código Modernizr (Paul Irish et. al.) Inspiração Beagle Bros
Tipografia Chunk, Latin Modern Licença CC-BY-3.0