Você está aqui: Home ‣ Dive Into HTML5 ‣
❧
ocê pode se
perguntar: “Como eu posso começar a usar HTML5 se os
navegadores não o suportam?” Mas a questão por si só é enganosa.
HTML5 não é uma coisa grande e única; é uma coleção de
funcionalidades individuais. Então você não pode detectar “suporte ao
HTML5,” por que isso não faz sentido. Mas você
pode verificar o suporte a funcionalidades individuais, como
canvas, vídeo, ou geolocalização.
❧
Quando seu navegador renderiza uma página web, ele constrói um Modelo
Objeto Documento (DOM, Document Object Model em inglês), uma coleção de objetos que
representam os elementos HTML na página. Cada elemento — todo
<p>, todo <div>, todo
<span> — é representado no DOM por um
objeto diferente. (Também existem objetos globais, como
window e document, que não estão vinculados a
elementos específicos.)
Todos os objetos no DOM compartilham um conjunto comum de propriedades, mas alguns objetos têm mais do que outros. Em navegadores que suportam funcionalidades da HTML5, alguns objetos terão propriedades únicas. Uma espiada rápida no DOM irá te dizer quais funcionalidades são suportadas.
Existem quatros técnicas básicas para detectar se o browser suporta uma funcionalidade específica. Do mais simples até o mais complexo:
Verifica se uma determinada propriedade existe em um objeto global
(como window ou navigator).
Exemplo: testando o suporte a geolocalização
Crie um elemento, então verifique se uma determinada propriedade existe naquele elemento.
Exemplo: testanto suporte ao canvas
Crie um elemento, verifique se um determinado método existe naquele elemento, então chame o método e verifique o valor que ele retorna.
Crie um elemento, defina uma propriedade para um determinado valor, então verifique se a propriedade manteve seu valor.
❧
Modernizr é um biblioteca
JavaScript de código aberto, sob licença MIT, que detecta
suporte a várias funcionalidades de HTML5
& CSS3. Você deve usar sempre a última
versão. Para usá-la, inclua o seguinte elemento
<script> no topo da sua página.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
↜ Isso vai no seu <head>
Modernizr executa automaticamente. Não existe uma função
modernizr_init() para ser chamada. Quando ela roda, cria um
objeto global chamado Modernizr, que contém um conjunto de
propriedades Booleanas para cada funcionalidade que ela puder detectar.
Por exemplo, se seu navegador suporta a
API do canvas, a propriedade
Modernizr.canvas será true. Se seu navagador não
suportar a API do canvas, a propriedade
Modernizr.canvas será false.
if (Modernizr.canvas) {
// vamos desenhar algumas formas!
} else {
// o suporte nativo ao canvas não está disponível :(
}❧
Seu navegador possui suporte a API canvas.
A HTML5 define o elemento <canvas> como “uma tela bitmap de resolução dependente que pode ser usada para renderizar grafos, gráficos de jogos, ou outras imagens visuais em tempo real.” Um canvas é um retângulo na sua página onde você pode usar JavaScript para desenhar qualquer coisa que você quiser. A HTML5 define um conjunto de funções (“a API canvas”) para desenhar formas, definindo caminhos, criando gradientes e aplicando transformações.
A verificação da API do canvas usa a
técnica de detecção #2. Se seu navegador suporta
a API do canvas, o objeto DOM o cria para
representar um elemento <canvas> que terá um
método getContext(). Se seu navegador não suporta a API do canvas, o objeto
DOM o cria para um elemento <canvas> que
terá apenas um conjunto comum de propriedades, mas nada específico do
canvas.
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
Essa função começa com a criação do elemento
<canvas> de teste. Mas o elemento nunca é adicionado a
sua página, então ninguém nunca o verá. Está apenas flutuando na memória,
indo a lugar nenhum e fazendo nada, como uma canoa em um rio calmo.
return !!document.createElement('canvas').getContext;
Assim que você cria o elemento <canvas> de teste, você
testa a existência de um método getContext(). Esse método só
existirá se o seu navegador suportar a API do canvas.
return !!document.createElement('canvas').getContext;
Finalmente, você usa o truque da negação dupla para forçar a conversão do
resultado em um valor booleano(true ou false).
return !!document.createElement('canvas').getContext;
Essa função irá detectar grande parte da API do canvas,
incluindo shapes,
paths,
gradients & patterns. Ela não detectará a biblioteca de terceiros
explorercanvas que implementa a
API do canvas no Microsoft Internet Explorer.
Ao invés de escrever essa função você mesmo, você pode usar a Modernizr para detectar o suporte a API do canvas.
↶ verifica o suporte ao canvas
if (Modernizr.canvas) {
// vamos desenhar algumas formas!
} else {
// o suporte nativo ao canvas não está disponível :(
}Existe um teste separado para a API do canvas text, que será demonstrado a seguir.
❧
Seu navegador possui suporte API de texto canvas.
Mesmo que o seu navegador suporte a API canvas, ele pode não suportar a API do texto canvas. A API do canvas cresceu através do tempo, e as funções de texto foram adicionadas por último. Alguns navegadores passaram a suportar o canvas antes da API de texto estar completa.
A verificação da API do texto canvas usa a
técnica de detecção #2. Se seu navegador suporta
a API do canvas, o objeto DOM o cria para
representar um elemento <canvas> que terá um
método getContext(). Se seu navegador não suporta a API do canvas, o objeto
DOM o cria para um elemento <canvas> que
terá apenas um conjunto comum de propriedades, mas nada específico do
canvas.
function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}
A função começa verificando o suporte ao canvas,
usando a função supports_canvas() que você acabou de ver na
seção anterior. Se seu navegador não suporta a API do canvas,
ele certamente não suportará a API de texto canvas!
if (!supports_canvas()) { return false; }
Depois, você cria um elemento <canvas> de teste e pega
seu contexto de desenho. Isso funcionará de forma garantida, porque a
função supports_canvas() já verificou que o método
getContext() existe em todo objeto canvas.
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
Finalmente, você verifica se o contexto de desenho tem uma função
fillText(). Se tiver, a API de texto canvas está
disponível. Hooray!
return typeof context.fillText == 'function';Ao invés de escrever essa função você mesmo, você pode usar Modernizr para detectar o suporte à API do texto canvas.
↶ verifica o suporte ao texto canvas
if (Modernizr.canvastext) {
// vamos desenhar algum texto!
} else {
// sem suporte nativo ao texto canvas disponível :(
}❧
A HTML5 define um novo elemento chamado
<video> para embutir vídeo nas suas páginas web.
Embutir vídeos costuma ser impossível sem plugins de terceiros como Apple
QuickTime® ou Adobe Flash®.
Seu navegador possui suporte video HTML5.
O elemento <video> é projetado para funcionar sem a
necessidade de scripts de detecção. Você pode especificar múltiplos
arquivos de vídeo, e os navegadores que possuirem suporte ao
HTML5 vídeo escolherão um baseado nos formatos suportados por
eles.
Navegadores que não possuem suporte a HTML5 vídeo irão
ignorar o elemento <video> completamente, mas você pode
usar isso a seu favor dizendo a eles para tocar o vídeo através de
plugins. Kroc Camen desenvolveu uma solução chamada
Video for Everybody!
que faz uso da HTML5 vídeo onde estiver disponivel, porém
fazendo tratamento para uso de QuickTime ou Flash em navegadores antigos.
Essa solução não usa JavaScript, e funciona praticamente em qualquer
navegador, inclusive em mobiles.
Se você quiser fazer mais com vídeo do que apenas colocá-lo em sua página
e tocá-lo, terá que usar JavaScript. Checar suporte a vídeo utiliza a
técnica de detecção #2. Se seu navegador possui
suporte para HTML5 vídeo, o objeto DOM criado
para representar o elemento <video> terá um método
canPlayType(). Caso o navegador não tenha suporte para
HTML5 vídeo, o objeto DOM criado para o elemento
<video> terá apenas uma coleção de proprieades comum à
todos os elementos. Você pode verificar o suporte a vídeo usando essa
função:
function supports_video() {
return !!document.createElement('video').canPlayType;
}Ao invés de escrever a função você mesmo, você pode usar o Modernizr para detectar suporte a HTML5 vídeo.
↶ verificando suporte a HTML5 vídeo
if (Modernizr.video) {
// vamos tocar alguns vídeos!
} else {
// suporte nativo a vídeos indisponível :(
// verifique suporte a QuickTime ou Flash talvez
}
No capítulo de Vídeo, explicarei outra solução
que faz uso dessas técnicas de detecção para converter elementos
<video> para players baseados em Flash, para atender a
navegadores que não possuem suporte ao HTML5 vídeo.
Existe um teste separado para detectar quais formatos de vídeo seu navegador pode tocar, o qual demonstrarei em seguida.
❧
Formatos de vídeo são como linguagens escritas. Um jornal em inglês contém a mesma informação que um jornal em espanhol, mas se você só sabe ler inglês, apenas um dos jornais será útil pra você! Para tocar um vídeo, seu navegador precisa entender o “idioma” no qual o vídeo foi escrito.
Seu navegador pode tocar ambos Ogg Theora e H.264 video. Hey, você pode
tocar videos WebM video, também!
O “idioma” de um vídeo é chamado de “codec” — é um algoritmo usado para codificar o vídeo em uma sequência de bits. Existem vários codecs em uso ao redor do mundo. Qual deles você usa? A triste realidade da HTML5 vídeo é que os navegadores não trabalham com um único codec em comum. Contudo, aparentemente eles se limitaram a dois tipos. Um codec é pago (por causa da licença de patente), mas funciona no Safari e no iPhone. (Este também funciona com Flash se você utiliza uma solução como Video for Everybody!) O outro codec é gratuito e funciona em navegadores open source como Chromium and Mozilla Firefox.
A verificação de suporte a formatos de vídeo utiliza a
técnica de detecção #3. Se o seu navegador
possui suporte a HTML5 vídeo, o objeto
DOM criado para representar um elemento
<video> terá um método canPlayType(). Esse
método dirá se seu browser possui suporte a um determinado formato de
vídeo.
Essa função verifica formatos suportados por Macs e iPhones.
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
A função começa
verificando suporte a HTML5 vídeo,
usando a função supports_video() que você acabou de ver na
seção anterior. Se o seu navegador não possui suporte a
HTML5 vídeo, com certeza não terá suporte para formatos de
vídeo!
if (!supports_video()) { return false; }
Então a função cria um elemento <video> (mas não o
inclui na página, assim ele não será visível) e invoca o método
canPlayType(). Este método está lá seguramente, pois a função
supports_video() acabou de garantir sua existência.
var v = document.createElement("video");Um “formato de vídeo” é na verdade uma combinação de diferentes coisas. Em termos técnicos, vocês está perguntando ao navegador se ele pode tocar um vídeo de base H.264 e um áudio AAC LC em um container MPEG-4. (Irei explicar o que tudo isso significa no capítulo de Vídeo. Você também pode querer ler Uma breve introdução à codificação de vídeo.)
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
A função canPlayType() não retorna true ou
false. Considerando a complexidade que os formatos de vídeo
possuem, a função retorna uma string:
"probably" se o navegador está confiante de que possa tocar
este formato
"maybe" se o navegador acha que tem condições de tocar este
formato
"" (uma string vazia) se o navegador tem certeza de que não
consegue tocar este formato
Essa segunda função verifica pelo formato de vídeo livre suportado pelo
Mozilla Firefox e outros navegadores de código aberto. O processo é
exatamente o mesmo; a única diferença é a string que você passa à função
canPlayType(). Em termos técnicos, você pergunta ao navegador
se ele é capaz de tocar vídeo Theora e áudio Vorbis em um container Ogg.
function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}Finalmente, WebM é um recente codec de vídeo open-source (e livre de patentes) que será incluido nas próximas versões dos principais navegadores, tais como o Chrome, Firefox, e Opera. Você pode utilizar a mesma técnica para detectar suporte ao vídeo livre WebM.
function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}Ao invés de escrever essa função você mesmo, você pode utilizar o Modernizr (1.5 ou superior) para detectar suporte aos diferentes formatos de HTML5 vídeo.
↶ verificando suporte a formatos para HTML5 vídeo
if (Modernizr.video) {
// vamos tocar alguns vídeos! mas de qual tipo?
if (Modernizr.video.webm) {
// tentar o WebM
} else if (Modernizr.video.ogg) {
// tentar Ogg Theora + Vorbis em um container Ogg
} else if (Modernizr.video.h264){
// tentar vídeo H.264 + áudio AAC em um container MP4
}
}❧
Seu navegador possui suporte HTML5 storage.
HTML5 storage fornece aos web sites uma forma de armazenar informações em seu computador e recuperá-lo mais tarde. O conceito é semelhante ao dos cookies, porém ele é projetado para armazenar quantidades de informação superiores. Cookies possuem tamanho bem limitado, e o seu navegador os envia de volta ao servidor web sempre que uma nova página é solicitada (o que leva um tempo extra e uma banda valiosa). O HTML5 storage permanece em seu computador, e os web sites podem acessá-lo através de JavaScript depois que a página é carregada.
☞P: O armazenamento local é realmente parte da HTML5? Por que ele fica em uma especificação separada?
R: A resposta curta é sim, armazenamento local é parte da HTML5. A resposta um pouco mais completa é que o armazenamento local fazia parte da especificação principal da HTML5, mas foi dividido em uma especificação isolada porque algumas pessoas no Working Group da HTML5 se queixaram que a HTML5 estava ficando muito grande. Se partir um bolo em mais pedaços passa a sensação de reduzir o número de calorias, bem, bem vindo ao mundo estranho dos padrões.
A verificação de suporte ao HTML5 storage utiliza a
técnica de detecção #1. Se o seu navegador
possui suporte ao HTML5 storage, haverá uma propriedade
chamada localStorage no objeto global window. Se
o seu navegador não possui suporte ao HTML5 storage, a
propriedade localStorage será undefined. Devido a um bug em
versões anteriores do Firefox, este teste causará uma exceção se os
cookies estiverem desabilitados, por isso o teste todo é envolvido por um
bloco try..catch.
function supports_local_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch(e){
return false;
}
}Ao invés de escrever essa função, você pode usar o Modernizr (1.1 ou superior) para detectar suporte ao HTML5 local storage.
↶ verificando suporte ao HTML5 local storage
if (Modernizr.localstorage) {
// window.localStorage está disponível!
} else {
// sem suporte nativo ao local storage :(
// tente usar o Gears ou outra solução, talvez
}
Note que o JavaScript faz distinção entre letras maiúsculas e minúsculas.
O atributo do Modernizr é chamado localstorage (todas as
letras minúsculas), mas a propriedade DOM é chamada
window.localStorage (letras maiúsculas e minúsculas
misturadas).
☞P: Quão seguro é o banco de dados da HTML5 storage? Qualquer um pode acessá-lo?
R: Qualquer um que possua acesso físico ao seu computador provavelmente poderá ler (ou até mesmo editar) seu banco de dados da HTML5 storage. Com seu navegador, qualquer web site pode ler e modificar seus próprios valores, mas sites não podem acessar valores armazenados por outros sites. Isso é chamado de same-origin restriction.
❧
Seu navegador possui suporte web workers.
Web Workers fornecem uma maneira padrão aos navegadores de executarem JavaScript ao fundo. Com web workers, você pode disparar múltiplas “threads” que irão todas ser executadas ao mesmo tempo, mais ou menos. (Pense em como o computador pode executar múltiplas aplicações ao mesmo tempo e você terá praticamente entendido tudo.) Essas “threads em background” podem realizar cálculos matemáticos complexos, fazer requisições HTTP ou acessar o local storage enquanto a página principal atende aos comandos do usuário tais como rolando a página, cliques ou digitação.
Verificar o suporte às web workers utiliza a
técnica de detecção #1. Se o seu navegador
possui suporte à API do Web Worker, haverá uma propriedade
Worker no objeto global window. Se o seu
navegador não possui suporte à API do Web Worker, a
propriedade Worker será undefined.
function supports_web_workers() {
return !!window.Worker;
}Ao invés de escrever essa função, você pode utilizar o Modernizr (1.1 ou superior) para detectar suporte a web workers.
↶ verificando suporte a web workers
if (Modernizr.webworkers) {
// window.Worker está disponível!
} else {
// sem suporte nativo a web workers :(
// tente o Gears ou outra solução
}
Note que o JavaScript faz distinção entre letras maiúsculas e minúsculas.
O atributo do Modernizr é chamado webworkers (todas as letras
minúsculas), mas a propriedade DOM é chamada
window.Worker (letras maiúsculas e minúsculas misturadas).
❧
Seu navegador possui suporte aplicações web offline.
Ler páginas web estáticas é fácil: conecte-se na Internet, carregue uma página, se disconecte da Internet, dirija até uma cabine isolada, e leia a página comodamente. (Para ganhar tempo, pule a parte de ir até uma cabine.) Mas e as aplicações como o Gmail ou Google Docs? Graças ao HTML5, qualquer um (não só o Google!) pode construir uma aplicação web que funcione offline.
Aplicações web offline começam como aplicações web online. A primeira vez que você visita um site com conteúdo offline habilitado, o servidor web diz ao navegador quais arquivos ele precisa para trabalhar offline. Esses arquivos podem ser qualquer coisa — HTML, JavaScript, imagens, até mesmo vídeos. Uma vez que o navegador carregou todos os arquivos necessários, você pode revisitar o web site até mesmo se você não estiver conectado a Internet. Seu navegador perceberá que você está offline e usará os arquivos que ele já havia feito download. Quando você se reconectar, quaisquer alterações que você tenha feito podem ser enviadas ao servidor web.
Verificar o suporte a conteúdo offline utiliza a
técnica de detecção #1. Se o seu navegador
possui suporte à aplicações web offline, haverá uma propriedade
applicationCache no objeto global window. Se o
seu navegador não possui suporte à aplicações web offline, a propriedade
applicationCache será undefined. Você pode verificar a
disponibilidade de aplicações web offline através da seguinte função:
function supports_offline() {
return !!window.applicationCache;
}Ao invés de escrever essa função, você pode utilizar o Modernizr (1.1 ou superior) para detectar suporte a aplicações web offline.
↶ verificando suporte a aplicações web offline
if (Modernizr.applicationcache) {
// window.applicationCache está disponível!
} else {
// sem suporte nativo a conteudo offline :(
// tente usar o Gears ou outra solução
}
Note que o JavaScript faz distinção entre letras maiúsculas e minúsculas.
O atributo do Modernizr é chamado applicationcache (todas as
letras minúsculas), mas a propriedade DOM é chamada
window.applicationCache (letras maiúsculas e minúsculas
misturadas).
❧
Geolocalização é a arte de descobrir em que lugar do mundo você está e (eventualmente) compartilhar essa informação com as pessoas de sua confiança. Existe mais de uma maneira de saber onde você está — seu endereço IP, sua conexão de rede sem fio, com qual torre seu celular está se comunicando, ou o GPS que calcula a latitude e longitude através das informações enviadas pelos satélites no céu.
Seu navegador possui suporte geolocation.
Clique para pesquisar sua localização.
☞P: A geolocalização faz parte da HTML5? Por que você está falando sobre ela?
R: O suporte a geolocalização foi adicionado aos navegadores agora há pouco, juntamente com o suporte para novos recursos HTML5. Na verdade, a geolocalização está sendo padronizada pelo Geolocation Working Group, o qual está separado da HTML5 Working Group. Porém eu irei falar sobre a geolocalização neste livro assim mesmo, porque ela é parte da evolução da web que está acontecendo nesse momento.
Verificar o suporte à geolocalização utiliza a
técnica de detecção #1. Se o seu navegador
possui suporte à geolocalização, haverá uma propriedade
geolocation no objeto global window. Se o seu
navegador não possui suporte à geolocalização, a propriedade
geolocation será undefined. Veja como você pode verificar se
há suporte à geolocalização:
function supports_geolocation() {
return !!navigator.geolocation;
}Ao invés de escrever essa função, você pode utilizar o Modernizr para detectar suporte a API de geolocalização.
↶ verificando suporte a geolocalização
if (Modernizr.geolocation) {
// Vamos ver onde você está!
} else {
// suporte nativo à geolocalização indisponível :(
// tente o Gears ou outra solução
}
Se o seu navegador não possui suporte nativo à geolocalização, ainda há
esperança. O Gears é um
plugin para navegadores livre desenvolvido pelo Google que funciona no
Windows, Mac, Linux, Windows Mobile e Android. Ele fornece recursos para
navegadores mais antigos que não possuem suporte a todas essas novas
coisas estilosas que viemos discutindo neste capítulo. Um dos recursos que
o Gears fornece é a API de geolocalização. Não é exatamente a
mesma coisa que navigator.geolocation, mas funciona como se
fosse.
Existem ainda APIs de geolocalização específicas para determinados dispositivos para alguns celulares antigos, incluindo BlackBerry, Nokia, Palm e OMTP BONDI.
O capítulo sobre geolocalização falará nos mínimos detalhes sobre como usar as diferentes APIs.
❧
Seu navegador suporta os seguintes tipos de entrada do HTML5:
search, tel, url,
email, date, month,
week, time, datetime-local,
number, range, color
Você sabe tudo sobre formulários web, certo? Fazer um
<form>, adicionar alguns elementos
<input type="text"> e quem sabe um
<input type="password">, e por fim um botão
<input type="submit">.
Você não sabe a metade deles. a HTML5 define um monte de novos tipos de entrada de dados que você pode usar em seus formulários.
<input type="search">
para caixas de busca
<input type="number">
para campos incrementais
<input type="range">
para sliders
<input type="color">
para seleção de cores
<input type="tel">
para números de telefone
<input type="url">
para endereços na web
<input type="email">
para endereços de e-mail
<input type="date">
para calendários
<input type="month">
para meses
<input type="week">
para semanas
<input type="time">
para horas
<input type="datetime">
para precisos e absolutos data+hora
<input type="datetime-local">
para datas e horas locais
Verificando suporte aos tipos de entrada da HTML5 utiliza a
técnica de detecção #4. Primeiro, você cria um
elemento <input> em memória. O tipo padrão para todos
os elementos <input> é "text".
var i = document.createElement("input");
Em seguida, configure o atributo type ao elemento
<input> para o tipo de entrada que você quer detectar.
i.setAttribute("type", "color");
Se o seu navegador possuir suporte para aquele tipo de entrada em
particular, a propriedade type irá reter o valor que você
configurou. Se o seu navegador não possuir suporte para aquele tipo de
entrada em particular, ele irá ignorar o valor que você configurou e a
propriedade type ainda será "text".
return i.type !== "text";
Ao invés de ter de escrever 13 diferentes funções, você pode usar o
Modernizr para detectar suporte para todos os
novos tipos de entrada definidos na HTML5. O Modernizr
reaproveita um único elemento <input> para
eficientemente detectar o suporte aos 13 tipos de entrada. Então ele
constrói um hash chamado de Modernizr.inputtypes, que possui
13 chaves (os atributos type da HTML5) e 13
valores booleanos (true se for suportado,
false se não).
↶ verificando suporte nativo ao date picker
if (!Modernizr.inputtypes.date) {
// sem suporte nativo para <input type="date"> :(
// talvez você deva fazer um você mesmo com Dojo ou jQueryUI
}❧
Além dos novos tipos de entrada, a HTML5 inclui vários pequenos ajustes aos formulários já existentes. Uma melhoria é colocar um placeholder em um campo de entrada. O placeholder é exibido dentro de um campo de entrada enquanto o campo estiver vazio e sem foco. Assim que você clica no campo (ou navega com o tab até ele), o placeholder some. O capítulo sobre formulários web tem screenshots se você está tendo dificuldades em visualizá-lo.
A verificação de suporte ao placeholder utiliza a
técnica de detecção #2. Se o seu navegador
possui suporte à colocar placeholders em campos de entrada, o objeto
DOM criado para representar o elemento
<input> terá uma propriedade
placeholder (mesmo que você não inclua um atributo
placeholder em seu HTML). Se o seu navegador não
possui suporte ao placeholder, o objeto DOM criado para um
elemento <input> não terá uma propriedade
placeholder.
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}Ao invés de escrever essa função, você pode utilizar o Modernizr (1.1 ou superior) para detectar suporte ao placeholder.
↶ checa pelo texto de placeholder
if (Modernizr.input.placeholder) {
// seu placeholder já deve estar visível!
} else {
// sem suporte ao placeholder :(
// implemente uma solução com script
}❧
Seu navegador possui suporte auto foco.
Os web sites podem usar JavaScript para dar foco ao primeiro campo de um formulário automaticamente. Por exemplo, a página principal do Google.com dá auto foco no campo de busca para você poder iniciar sua busca sem ter que posicionar o cursor do mouse no campo de busca. Enquanto isso pode ser conveniente para a maioria das pessoas, pode vir a ser incômodo para usuários experientes ou pessoas com necessidades especiais. Se você tentar pressionar a barra de espaço esperando que a página seja rolada para baixo, não ocorrerá conforme o esperado, pois o foco já está em um campo. (Acaba digitando um espaço no campo ao invés de rolar a página.) Se você der foco a um campo diferente antes de a página terminar de carregar, o script de auto foco pode “gentilmente” mover o foco de volta ao campo original ao fim do carregamento da página, atrapalhando seu fluxo de trabalho fazendo com que você digite no lugar errado.
Como o auto foco é feito através do JavaScript, pode ser trabalhoso ter que lidar com todos esses delicados casos, e não há muito o que fazer para evitar a página web de “roubar” o foco.
Para resolver esse problema, a HTML5 apresenta
um atributo de autofocus em todos os controles de
formulário. O atributo autofocus faz exatamente o que o seu nome diz:
move o foco para um campo específico. Mas por ser apenas uma marcação ao
invés de script, o comportamento será consistente entre todos os sites.
Além disso, os desenvolvedores de navegadores podem oferecer formas de
desabilitar o comportamento de auto foco.
A verificação de suporte ao auto foco utiliza a
técnica de detecção #2. Se o seu navegador
possui suporte ao auto foco, o objeto DOM criado para
representar um elemento <input> terá uma propriedade
autofocus (mesmo que você não inclua o atributo
autofocus em seu HTML). Se o seu navegador não
possui suporte ao auto foco, o objeto DOM criado para um
elemento <input> não terá uma propriedade
autofocus. Você pode detectar suporte ao auto foco usando
essa função:
function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}Ao invés de escrever essa função, você pode usar o Modernizr (1.1 ou superior) para detectar o suporte a campos com auto foco.
↶ verificando suporte ao auto foco
if (Modernizr.input.autofocus) {
// autofocus funciona!
} else {
// sem suporte a autofocus :(
// contornar com uma solução com script
}❧
Seu navegador não possui suporte a API de micro dado do HTML5. :(
Microdata é um jeito padronizado de informar semânticas adicionais em suas páginas. Por exemplo, você pode usar micro dados para declarar que uma foto está disponível sob a licença Creative Commons. Como você pode ver no capítulo de extensibilidade distribuída, você pode usar micro dados para demarcar uma página “Sobre mim”. Navegadores, extensões e motores de busca podem converter suas marcações de micro dados da HTML5 em um vCard, um formato padrão para compartilhamento de contatos. Você também pode definir seu próprio vocabulário de micro dados.
O padrão de micro dados da HTML5 inclui ambos a marcação HTML (a princípio para os motores de busca) e uma coleção de funções DOM (a princípio para os navegadores). Não há problema algum em adicionar marcações de micro dados em suas páginas. Não é nada mais do que alguns poucos atributos bem dispostos, e os motores de busca que não compreendem os atributos de micro dados irão simplesmente ignorá-los. Porém se você precisar acessar ou manipular os micro dados através de DOM, você terá que checar se o navegador possui ou não suporte a API DOM de micro dados.
A verificação de suporte a micro dados da HTML5 utiliza a
técnica de detecção #1. Se o seu navegador
possui suporte aos micro dados da HTML5, haverá uma função
getItems() no objeto global document. Se o seu
navegador não possuir suporte a micro dados, a função
getItems() será undefined.
function supports_microdata_api() {
return !!document.getItems;
}O Modernizr ainda não possui suporte aos micro dados, então você terá que usar uma função semelhante a exibida acima.
❧
Seu navegador possui suporte a API de histórico do HTML5.
A API de histórico da HTML5 é uma maneira padronizada de manipular o histórico do navegador via script. Uma parte dessa API — navegando pelo histórico — tem estado disponível em versões anteriores do HTML. A nova parte em HTML5 é uma maneira de adicionar entradas no histórico do navegador, e obter uma resposta quando essas entradas são removidas da pilha quando o usuário pressionar o botão voltar do navegador. Isso quer dizer que a URL pode continuar a fazer o seu trabalho como identificador único para o recurso atual, mesmo em aplicações ricas em scripts que nunca realizam uma recarga total da página.
A verificação de suporte a API de histórico da
HTML5 utiliza a
técnica de detecção #1. Se o seu navegador
possui suporte a API de histórico da HTML5,
haverá uma função pushState() no objeto global
history. Se o seu navegador não possui suporte a
API de histórico, a função pushState() será
undefined.
function supports_history_api() {
return !!(window.history && history.pushState);
}Ao invés de escrever sua função, você pode utilizar o Modernizr (1.6 ou superior) para detectar suporte a API de histórico da HTML5.
↶ verificando suporte a API de histórico
if (Modernizr.history) {
// o gerenciamento de histórico funciona!
} else {
// sem suporte ao histórico :(
// contornar com uma solução de script History.js
}❧
Especificações e padrões:
<canvas>
<video>
<input>
<input placeholder>
<input autofocus>
Bibliotecas JavaScript:
Outros artigos e tutoriais:
❧
Isso foi “Detectando funcionalidades da HTML5.” Consulte o Sumário, caso queira continuar com a leitura.
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. Este capítulo está incluído na versão paga.
Se você gostou deste capítulo e quer mostrar sua apreciação, 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