Fork me on GitHub

Você está aqui: Home Dive Into HTML5


O Único
Quase-Alfabético
Sem-Besteiras Guia Para
Detectar Tudo

(Confuso? Leia Detectando Funcionalidades da HTML5: É Elementar, Meu Caro Watson para uma introdução conceitual. Quer uma biblioteca completa? Experimente Modernizr.)

<audio> #
return !!document.createElement('audio').canPlayType;
<audio> no formato MP3 #
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
<audio> no formato Vorbis #
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
<audio> no formato WAV #
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));
<audio> no formato AAC #
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mp4; codecs="mp4a.40.2"').replace(/no/, ''));
<canvas> #
return !!document.createElement('canvas').getContext;
<canvas> text API #
var c = document.createElement('canvas');
return c.getContext && typeof c.getContext('2d').fillText == 'function';
<command> #
return 'type' in document.createElement('command');
<datalist> #
return 'options' in document.createElement('datalist');
<details> #
return 'open' in document.createElement('details');
<device> #
return 'type' in document.createElement('device');
<form> constraint validation #
return 'noValidate' in document.createElement('form');
<iframe sandbox> #
return 'sandbox' in document.createElement('iframe');
<iframe srcdoc> #
return 'srcdoc' in document.createElement('iframe');
<input autofocus> #
return 'autofocus' in document.createElement('input');
<input placeholder> #
return 'placeholder' in document.createElement('input');
<textarea placeholder> #
return 'placeholder' in document.createElement('textarea');
<input type="color"> #
var i = document.createElement('input');
i.setAttribute('type', 'color');
return i.type !== 'text';
<input type="email"> #
var i = document.createElement('input');
i.setAttribute('type', 'email');
return i.type !== 'text';
<input type="number"> #
var i = document.createElement('input');
i.setAttribute('type', 'number');
return i.type !== 'text';
<input type="range"> #
var i = document.createElement('input');
i.setAttribute('type', 'range');
return i.type !== 'text';
var i = document.createElement('input');
i.setAttribute('type', 'search');
return i.type !== 'text';
<input type="tel"> #
var i = document.createElement('input');
i.setAttribute('type', 'tel');
return i.type !== 'text';
<input type="url"> #
var i = document.createElement('input');
i.setAttribute('type', 'url');
return i.type !== 'text';
<input type="date"> #
var i = document.createElement('input');
i.setAttribute('type', 'date');
return i.type !== 'text';
<input type="time"> #
var i = document.createElement('input');
i.setAttribute('type', 'time');
return i.type !== 'text';
<input type="datetime"> #
var i = document.createElement('input');
i.setAttribute('type', 'datetime');
return i.type !== 'text';
<input type="datetime-local"> #
var i = document.createElement('input');
i.setAttribute('type', 'datetime-local);
return i.type !== 'text';
<input type="month"> #
var i = document.createElement('input');
i.setAttribute('type', 'month');
return i.type !== 'text';
<input type="week"> #
var i = document.createElement('input');
i.setAttribute('type', 'week');
return i.type !== 'text';
<meter> #
return 'value' in document.createElement('meter');
<output> #
return 'value' in document.createElement('output');
<progress> #
return 'value' in document.createElement('progress');
<time> #
return 'valueAsDate' in document.createElement('time');
<video> #
return !!document.createElement('video').canPlayType;
<video> captions #
return 'src' in document.createElement('track');
<video poster> #
return 'poster' in document.createElement('video');
<video> no formato WebM #
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
<video> no formato H.264 #
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
<video> no formato Theora #
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''));
contentEditable #
return 'isContentEditable' in document.createElement('span');
mensagem Cross-document #
return !!window.postMessage;
Drag-and-drop #
return 'draggable' in document.createElement('span');
File API #
return typeof FileReader != 'undefined';
Geolocalização #
return !!navigator.geolocation;
History #
return !!(window.history && window.history.pushState);
Local storage #
try {
  return 'localStorage' in window && window['localStorage'] !== null;
} catch(e) {
  return false;
}
Microdata #
return !!document.getItems;
Aplicações Web Offline #
return !!window.applicationCache;
Eventos enviados pelo servidor #
return typeof EventSource !== 'undefined';
Session storage #
try {
  return 'sessionStorage' in window && window['sessionStorage'] !== null;
} catch(e) {
  return false;
}
SVG #
return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);
SVG in text/html #
var e = document.createElement('div');
e.innerHTML = '<svg></svg>';
return !!(window.SVGSVGElement && e.firstChild instanceof window.SVGSVGElement);
Undo #
return typeof UndoManager !== 'undefined';
IndexedDB #
return !!window.indexedDB;
Web Sockets #
return !!window.WebSocket;
Web SQL Database #
return !!window.openDatabase;
Web Workers #
return !!window.Worker;
Widgets: estou em um? #
return typeof widget !== 'undefined';
XMLHttpRequest: requisições cross-domain #
return "withCredentials" in new XMLHttpRequest;
XMLHttpRequest: envio como formData #
return !!window.FormData;
XMLHttpRequest: eventos de progresso de upload #
return "upload" in new XMLHttpRequest;

Leitura complementar

Especificações e normas:

Bibliotecas JavaScript:

Este foi “O Único Quase-Alfabético Sem-Besteiras Guia Para Detectar Tudo.” O Sumário tem muito mais, se você quiser continuar a leitura.

Você sabia?

Em associação a Google Press, O’Reilly está distribuindo este livro em variados formatos, incluindo papel, ePub, Mobi, DRM-free e PDF. A edição paga é chamada “HTML5: Up & Running,” e está disponível agora.

Se você gostou dessa introdução e quer mostrar como apreciou, basta comprar o livro “HTML5: Up & Running” com esse link afiliado ou comprar a edição eletrônica diretamente da O’Reilly. Você vai ganhar um livro, e eu vou ganhar um trocado. Atualmente não aceito doações diretas.

Copyright MMIX–MMXI Mark Pilgrim