HTML5 - Análise do suporte atual pelos navadores e estratégia de uso

ANÁLISE DO SUPORTE ATUAL PELOS NAVEGADORES E ESTRATÉGIAS DE USO

O desenvolvimento modular

Antigamente, para que uma nova versão do HTML ou do CSS fosse lançada, todas as ideias listadas na especificação deveriam ser testadas e desenvolvidas para então serem publicadas para o uso dos browsers e os desenvolvedores.

Esse método foi mudado com o lançamento do HTML5 e o CSS3. A partir de agora, as duas tec­nologias foram divididas em módulos. Isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers não precisam esperar que todo o padrão seja escrito e publicado para utili­zarem as novidades das linguagens.

As propriedades do CSS3, por exemplo, foram divididas em pequenos grupos. Há um grupo cui­dando da propriedade Background, outro da propriedade Border, outro das propriedades de Texto e etc. Cada um destes grupos são independentes e podem lançar suas novidades a qualquer mo­mento. Logo, o desenvolvimento para web ficou mais dinâmico, com novidades mais constantes.

O ponto negativo nesse formato, é que problemas de compatibilidade podem ocorrer com mais frequencia. Por exemplo, um browser pode adotar bordas arredondadas e outro não. Ou um bro­wser pode escolher suportar um API diferente do API que o concorrente implementou. Contudo, os browsers tem mostrado grande interesse em se manterem atualizados em relação aos seus concorrentes.

Motores de Renderização

Há uma grande diversidade de dispositivos que acessam a internet. Entre eles, há uma série de ta­blets, smartphones, pc's e etc. Cada um destes meios de acesso utilizam um determinado browser para navegar na web. Não há como os desenvolvedores manterem um bom nível de compatibilida­de com todos estes browsers levando em consideração a particularidade de cada um. Uma maneira mais segura de manter o código compatível, é nivelar o desenvolvimento pelos motores de rende­rização. Cada browser utiliza um motor de renderização que é responsável pelo processamento do código da página.

Abaixo, segue uma lista dos principais browsers e seus motores:

É interessante que você faça código compatível com estes motores. Focando a compatibilidade nos motores de renderização você atingirá uma amplitude maior de browsers.

Por exemplo, se seu código funcionar no Webkit, você alcançará o Safari e o Chrome, dois dos principais browsers do mercado para desktops. Além disso, você também alcança aparelhos como Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android.

Compatibilidade com HTML5

Atualmente o Webkit é o motor mais compatível com os Padrões do HTML5. Como a Apple tem interesse que seus dispositivos sejam ultracompatíveis com os Padrões, ela tem feito um belo traba­lho de atualização e avanço da compatibilidade deste motor.

Contudo o Firefox e o Opera já estão compatíveis com grande parte da especificação do HTML5 e CSS3 e a cada upgrade eles trazem mais novidades e atualização dos padrões.

O que pode te preocupar de verdade é a retrocompatibilidade com versões antigas de browsers como o Internet Explorer. A Microsoft está fazendo um bom trabalho com o IE9, mas as versões 8 e 7 não tem quase nenhum suporte ao HTML5, o que é um problema sério para aplicações web baseadas em tecnologias mais recentes, mas que a base de usuários utiliza as versões antigas do Internet Explorer.

Abaixo segue uma tabela simples de compatibilidade entre os browsers e alguns módulos do HTML5:

Pode ser que o usuário não utilize um browser que suporta HTML5. Neste caso, você pode redire­cioná-lo para uma versão do site mais simples, ou talvez apenas mostrar uma mensagem alertando o usuário sobre a importância da atualização do browser. Para isso temos algumas técnicas de de­tectação para conferir se o browser suporta ou não HTML5.

Quando o browser visita um website, ele constrói uma coleção de objetos que representam ele­mentos HTML na página. Cada elemento no código é representado no DOM como um objeto diferente. Todo objeto DOM tem propriedades em comum, mas alguns objetos tem características específicas. Usaremos estes objetos para fazermos a detectação. Abaixo segue 4 meios que você poderá utilizar para detectar o suporte do browser:

1. Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou NAVIGATOR. Nesse caso, verificamos o suporte a geolocalização.

2. Crie um elemento e verifique se uma determinada propriedade existe neste elemento.

3. Crie um elemento e verifique se um determinado método existe neste elemento, então cha­me o método e verifique se o valor retorna. Por exemplo, teste quais formatos de vídeo são suportados.

4. Crie um elemento e defina um atributo com um determinado valor, então verifique se o atri­buto suporta este valor. Por exemplo, crie um input e verifique quais types são suportados.

Utilizando o Modernizr

O Modernizr (http://www.modernizr.com/) é uma biblioteca de detectação que lhe permite veri­ficar o suporte da maioria das características do HTML5 e CSS3.

O Modernizr roda automaticamente assim que você o adiciona no head do documento. Assim, se você quiser verificar se o browser suporta Geolocalização, por exemplo, basta inserir este script na página. Se o browser suportar a feature testada, ele retornará true:

if (Modernizr.geolocation) {
// Aceita a feature
}
else {
// Não aceita a feature testada.
}

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com