HTML 5 – Parte 11 – Detectando suporte para HTML5

Olá pessoal, tudo certo?

Depois de algum tempo, volto a escrever sobre HTML5. Hoje vou mostrar algumas técnicas para testar que recursos estão implementados em cada browser.

Nem todas as características previstas para a HTML5 são suportadas por todos os browsers. Logo, não há forma segura de testar compatibilidade com a especificação como um todo. Cada navegador possui sua “versão 100% implementada” do HTML5. O Internet Explorer 9, por exemplo, afirma ter o maior suporte a especificação oficial (o que, na prática. é bem pouco)

Não havendo como como testar suporte integral para HTML5, podemos e devemos testar o suporte para features individuais.

Uma alternativa para todo o código apresentado nesse post é o Modernizr.

O que já vimos?

Para você que está chegando agora, veja o que já foi abordado:

• HTML5 – Parte 10 – Animação
• HTML5 – Parte 9 – Começando a mexer com Canvas
• HTML5 – Parte 8 – Messaging
• HTML5 – Parte 7 – Suporte para offline
• HTML5 – Parte 6 – Armazenando dados com Web SQL Databases
• HTML5 – Parte 5 – Armazenando dados com Web Storage
• HTML5 – Parte 4 – Vídeo e Áudio
• HTML5 – Parte 3 – Formulários
• HTML5 – Parte 2 – Semântica para todos
• HTML5 – Parte 1 – história e elementos de estrutura

Download do códgo desse post

Todo o código escrito nesse post foi extraído de uma pequena página de teste que escrevi e que está disponível no Gist. Pegue o código em https://gist.github.com/2c499cd6367603124148.

Como testar compatibilidade HTML5

A técnica que apresento aqui é genérica e pode ser empregada para testar suporte a outras tecnologias.

Quando o browser renderiza uma págica, carrega um conjunto de objetos para o documento (Document Object Model – DOM) representando todos os elementos HTML presentes na página. Todos os elementos são representados nesse conjunto de objetos por um objeto diferente.

Todos os objetos DOM compartilham um conunto de propriedades, mas alguns objetos possuem outras. Em browsers que suportam HTML5, há alguns tipos de objetos, que possuem propriedades específicas, que não estão disponíveis nos browsers que não oferecem o mesmo suporte. Um exame desses objetos permite determinar que features do HTML5 estão disponíveis e quais não estão.

Testando suporte para o elemento Canvas

HTML5 define um elemento chamado Canvas. Já discutimos ele nessa série (parte 9 e parte 10).

Para sabermos se o browser que estamos utilizando suporta Canvas, tentamos instanciar um elemento desse tipo e verificamos a disponibilidade do método “getContext”. Observe:

function supportsCanvas() {
    return !!document.createElement('canvas').getContext;
}

O que fizemos?

• criamos um elemento canvas que nunca será adicionado na páginal;
• checamos a presença do método getContext que só estará disponível caso canvas esteja disponível;
• usamos uma dupla negativa (!!) para forçar um resultado boolean.

Esse teste demonstra que o “essencial” de canvas está disponível. Alguns recursos de canvas, mais avançados, precisam ser testados isoladamente. Observe o teste do suporte a textos no canvas:

function supportsCanvasText() {
    if (!supportsCanvas()) { return false; }
    var c = document.createElement('canvas').getContext('2d');
    return typeof c.fillText == 'function';
}

O que fizemos?

• verificamos o suporte geral do browser para o elemento canvas. Se esse suporte não for oferecido, certamente não haverá suporte para textos em canvas;
• criamos um elemento canvas dummy, apenas para conseguir obter uma instância do objeto contexto
• verificamos a presença do método fillText testando seu tipo (retornando function temos a indicação de que o suporte a textos do canvas está implementado).

Testando o suporte para vídeos

HTML5 oferece suporte para execução de vídeos (e áudios). Tratamos desse suporte na parte 4.

A técnica empregada para testar o suporte para vídeos é semelhante ao utilizado para testar suporte para canvas. Observe:

function supportsVideo() {
    return !!document.createElement('video').canPlayType;
}

Testando suporte para Web Storage e Web SQL Databases

HTML5 oferece suporte para persistência aprimoradas de dados locais. Tratamos desse tema na parte 5 e na parte 6.

Verificar se o browser suporta esses novos modelos de persistência é bem simples. Basicamente, verificamos a presença das propriedades/métodos relacionadas no objeto window. Observe:

function supportsLocalStorage() {
    return ('localStorage' in window) && window['localStorage'] !== null;
}

function supportsWebSqlDatabases() {
    return !!window.openDatabase;
}

Testando suporte para WebWorkers

Eis um tema não tratado nessa série (ainda!). Entretanto, aqui está o teste de suporte do browser:

function supportsWebWorkers() {
    return !!window.Worker;
}

Workers está entre um conjunto rico de novos recursos que estão sendo associados a HTML5 mas que não estão vinculados realmente a especificação. IE não possui suporte algum a este recurso. De qualquer forma, no futuro devo tratar do tema aqui no blog.

Testando suporte a aplicações offline

O suporte a offline foi abordado na parte 7. Eis o teste de disponibilidade para essa funcionalidade:

function supportsOffline() {
    return !!window.applicationCache;
}

Testando suporte para Geolocation

Assim como WebWorkers, Geolocation está fora da especificação formal do HTML5 e também não foi abordado nessa série (embora, muito interessante). A implementação do Safari para essa API é fenomenal! Eis como verificar se o seu browser suporta:

function supportsGeolocation() {
    return !!navigator.geolocation;
}

Testando suporte para novos Input types

Eis a ausência mais percebida (para mim) do suporte a HTML5 do IE9. Dizer que a especificação dessa funcionalidade não está 100% é uma das piores desculpas que eu já vi. Mas … Eis como verificar o nível de suporte que seu browser oferece para novos input types.

function supportsInputType(type) {
    var elem = document.createElement("input");
    elem.setAttribute("type", type);
    return elem.type != "text";
}

function supportsInputPlaceholder() {
    var elem = document.createElement("input");
    return 'placeholder' in elem;
}

function supportsInputAutofocus() {
    var elem = document.createElement("input");
    return 'autofocus' in elem;
}

O tema input types foi discutido na parte 3 dessa série.

Observe que o método supportsInputType espera pelo “tag” que desejamos testar. Os tags associados aos novos input types são: email, search, range, color, tel, url, date, month, week, time, datetime, datetime-local.

Por hoje, era isso