Fork me on GitHub

Você está aqui: Home Dive Into HTML5


Detectando funcionalidades da HTML5

 

Mergulhando

Você 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.

Técnicas de detecçã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.)

girl peeking out the window

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:

  1. Verifica se uma determinada propriedade existe em um objeto global (como window ou navigator).

    Exemplo: testando o suporte a geolocalização

  2. Crie um elemento, então verifique se uma determinada propriedade existe naquele elemento.

    Exemplo: testanto suporte ao canvas

  3. 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.

    Exemplo: testando quais formatos de vídeos são suportados

  4. Crie um elemento, defina uma propriedade para um determinado valor, então verifique se a propriedade manteve seu valor.

    Exemplo: testando quais tipos de <input> são suportados

Modernizr, uma biblioteca de detecção HTML5

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 :(
}

Canvas

man fishing in a canoe

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.

Texto Canvas

baseball player at bat

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 :(
}

Vídeo

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®.

audience at the theater

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

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.

man reading newspaper

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:

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
  }
}

Armazenamento Local

filing cabinet with drawers of different sizes

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.

Pergunte ao Professor Marcação

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).

Pergunte ao Professor Marcação

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.

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).

Aplicações Web Offline

cabin in the woods

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

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.

man with a globe for a head

Pergunte ao Professor Marcaçã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.

Tipos de entrada

manual typewriter

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.

  1. <input type="search"> para caixas de busca
  2. <input type="number"> para campos incrementais
  3. <input type="range"> para sliders
  4. <input type="color"> para seleção de cores
  5. <input type="tel"> para números de telefone
  6. <input type="url"> para endereços na web
  7. <input type="email"> para endereços de e-mail
  8. <input type="date"> para calendários
  9. <input type="month"> para meses
  10. <input type="week"> para semanas
  11. <input type="time"> para horas
  12. <input type="datetime"> para precisos e absolutos data+hora
  13. <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
}

Placeholder

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
}

Auto foco de formulário

angry guy with arms up

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 resoler 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 comportamente será consistente entre todos os sites. Além disso, os desenvolvedores de navegadores podem oferecer formas de desabilitar o comportamente 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
}

Micro dados

alphabetized folders

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.

API de Histórico

demon reading book

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
}

Leitura Adicional

Especificações e padrões:

Bibliotecas JavaScript:

Outros artigos e tutoriais:

Isso foi “Detectando funcionalidades da HTML5.” Consulte o Sumário, caso queira continuar com 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. 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