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';

<input type="search"> #

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:

• HTML5
• Geolocalização
• Server-Sent Events
• WebSimpleDB
• Web Sockets
• Web SQL Database
• Web Storage
• Web Workers
• Widgets
• XMLHttpRequest Level 2

Bibliotecas JavaScript:

• Modernizr, uma biblioteca HTML5 de detecção

❧

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.

Copyright MMIX–MMXI Mark Pilgrim