Detectando Suporte para HTML 5

Veja neste artigo como podemos detectar de forma simples e elegante funcionalidades HTML 5 e CSS 3 que são suportados pelos browsers. Utilizando uma biblioteca podemos ter o trabalho bastante facilitado.

por Higor Medeiros

1. Introdução

Quando queremos detectar o suporte do browser para uma certa API temos uma certa dificuldade para realizar essa verificação. Por exemplo, quando se quer saber se Geolocalização é suportado pelo browser procura-se pelo objeto de geolocalização como uma propriedade do objeto do navegador, caso ele exista podemos utilizar uma API para tirar proveito da funcionalidade. Para sabermos se há suporte para armazenamento local verificamos se localStorage está definido no objeto window do browser, e para vídeo verificamos se foi criado um elemento vídeo no DOM, e assim sucessivamente.

Portanto, nota-se que existem diferentes maneiras para saber se há suporte para um determinado elemento.

Nota-se que esse método, além de poluir o código, tomar bastante tempo do desenvolvedor e aumentar o número de linhas de código, nem sempre é a melhor e mais precisa maneira de implementar esse tipo de verificação.

No entanto, todo desenvolvedor front-end se pergunta se não existe uma forma melhor de realizar toda essa verificação. No restante deste artigo será mostrada uma forma melhor e bastante utilizada por outros desenvolvedores de realizar essa verificação.

2. Modernizr para Verificação de Compatibilidade

O Modernizr é uma compacta biblioteca Javascript com cerca de 7kb de tamanho criada por Faruk Ates e Paul Irish. Esta biblioteca oferece uma abordagem diferente para o uso de novas tecnologias da HTML 5 e CSS 3 onde sua principal finalidade é testar a presença de propriedades no próprio navegador do usuário (em questão de milissegundos) e armazenar o resultado do teste numa variável dentro de um script.

Se a funcionalidade está presente, o valor da variável é true senão é declarada como false. Este resultado armazenado pelo teste pode ser manipulado via CSS, no qual o desenvolvedor pode oferecer ao usuário diferentes alternativas de acordo com a presença ou a ausência de determinada funcionalidade.

Em sua mais recente versão, o Modernizr é capaz de detectar mais de 20 recursos, são eles:

• @font-face
• Canvas
• Canvas Text
• HTML5 Audio
• HTML5 Video
• rgba()
• hsla()
• border-image:
• border-radius:
• box-shadow:
• Multiple backgrounds
• opacity:
• CSS Animations
• CSS Columns
• CSS Gradients
• CSS Reflections
• CSS 2D Transforms
• CSS 3D Transforms
• CSS Transitions
• Geolocation API
• Input Types

No último item ressalta-se que existem 13 tipos de Input Types, são eles: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range e color.

Todos esses recursos já são detectados pela biblioteca, no entanto, devemos atentar para o fato de que a biblioteca é atualizada constantemente e esse número pode mudar.

Segue abaixo o nome da funcionalidade e da classe de suporte que será utilizado posteriormente nos códigos de exemplo:

Funcionalidade	Classe de Suporte
@font-face	.fontface
Canvas	.canvas
Canvas Text	.canvastext
Audio	.audio
Video	.video
rgba	.rgba
hsla	.hsla
border-image	.borderimage
border-radius	.borderradius
box-shadow	.boxshadow
Multiple bgs	.multiplebgs
opacity	.opacity
CSS animations	.cssanimations
CSS Columns	.csscolumns
CSS Gradients	.cssgradients
CSS Reflections	.cssreflections
CSS 2D Transforms	.csstransforms
CSS 3D Tranforms	.csstransforms3d
CSS Transitions	.csstransitions
Geolocation API	.geolocation

Na próxima seção veremos melhor como utilizar as funcionalidades da biblioteca Modernizr descritas nas seções anteriores.

3. Utilizando o Modernizr

A biblioteca Modernizr utiliza um moderno conceito de detecção de funcionalidade para determinar o suporte pelo navegador na qual ela cria um objeto global JavaScript chamado Modernizr que contém as propriedades para cada uma das novas funcionalidades do HTML 5 e CSS 3 (todos os itens da lista citados acima).

Basicamente se o navegador suporta uma funcionalidade a propriedade retorna true, caso contrário retorna false.

Por exemplo, caso precisa-se saber se a funcionalidade de geolocalização é suportada utiliza-se o seguinte código abaixo:

Abaixo segue um exemplo que demonstra se a funcionalidade de geolocalização é suportada pelo browser:

Listagem 1: Exemplo de detecção de funcionalidade de geolocalização com o Modernizr.

if (Modernizr.geolocation) {
	alert(“Aceita”)
} else {
	alert(“Não Aceita”)
}

Para detectar o suporte para vídeo poderíamos utilizar o código abaixo:

Listagem 2: Exemplo de detecção de funcionalidade de vídeo com o Modernizr.

if (Modernizr.video) {
	alert(“Aceita”)
} else {
	alert(“Não Aceita”)
}

Ressalva-se que a melhor forma de utilizar o Modernizr é pesquisar a sua abrangente documentação que está contida no site oficial da biblioteca (www.modernizr.com) onde pode-se encontrar exemplos para a implementação de todas as funcionalidade que ele suporta além de detalhes internos sobre a funcionalidade da biblioteca.

4. Conclusões

Nesse artigo apresentamos aos leitores uma visão geral e clara sobre a biblioteca Modernizr que ajuda os desenvolvedores de front-end a detectarem se certos recursos estão sendo suportados pelo browser do usuário, dependendo da resposta uma página poderia agir de diferentes maneiras para melhorar a aparência, navegação ou a usabilidade do usuário. Faça testes e utilize a Modernizr que diversos desenvolvedores já estão utilizando as facilidades que ela nos oferece.

Bibliografia

Eric Freeman. HTML 5 Programming. O‘Reilly, 2011.
Curso HTML 5, W3C. Disponível em http://www.w3c.br/Cursos/CursoHTML5
Modernizr. Disponível em http://www.modernizr.com