heldercorreia.com

autodidata, programador e consultor

Adotando o HTML5 e CSS3

Logotipos do HTML5 e CSS3

Faz algum tempo que adotei o HTML5 e CSS3, mas tenho notado que os meus colegas ainda estão um bocado apreensivos com o problema de adoção nos vários browsers.

Será que podemos usar esses novos standards hoje, ou ainda é cedo?

Eu vejo o HTML5 focalizado em duas áreas principais. A parte do “markup” no desenvolvimento de páginas web e a parte da API na construção de aplicações web (e.g., Gmail).

A nova API traz tecnologias muito interessantes como geolocalização, suporte para funcionamento offline, JavaScript com threads, comunicação estandardizada entre browsers e servidores com Web Sockets, suporte mais rico para formulários, drag-and-drop nativo entre elementos numa página sem ser necessário JavaScript complexo, capacidade para arrastar ficheiros diretamente do desktop, entre outras.

Existe muito potencial e sendo que o standard está vivo (continuamente a mudar), algumas destas tecnologias já estão disponíveis para se usar, outras nem por isso ou então só funciona num browser ou dois. Algumas poderão já ter sido abandonadas, e outras novas a surgir.

É aqui que entra a confusão porque eu ainda não me debrucei muito na API para aplicações web e quando digo que adotei o HTML5 estou a falar da parte do markup, i.e., os novos elementos estruturais e semânticos como o header, footer, aside e nav.

Classitis

Depois da separação entre conteúdo e apresentação que surgiu em força com o CSS e XHTML o mundo era bonito e cheirava a rosas porque a web era mais semântica. No entanto surgiu outra doença, a classitis (e divitis), onde são abusados os atributos class e inúmeros divs para estilar o conteúdo, o que mais vezes que não, quebra a semântica do código.

Os novos elementos para o HTML ajudam a semântica. Em vez de fazer <div class="header"></div> fazemos simplesmente <header></header>. É mais limpo.

Estes novos elementos são amplamente suportados, sendo que como habitual o IE é a grande exceção.

Domando o Internet Explorer

Aqui está o grande gotcha.

Felizmente temos comentários condicionais que apenas funcionam nas várias versões do IE. Portanto conseguimos carregar folhas de estilo (CSS) e código JavaScript para apenas versões específicas do Internet Explorer. Podemos desta forma compensar a falta de suporte no IE com bibliotecas, enquanto que nos browsers modernos temos suporte nativo.

Por exemplo, para ter suporte às novas tags do HTML5 nos browsers IE inferiores à versão 9, eu uso o seguinte no cabeçalho das minhas páginas:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

O html5shiv adiciona suporte ao IE com javascript. Outras bibliotecas javascript ou folhas de estilo ajudam a compensar onde este browser falha. Ver também o Modernizr.

Melhoramentos progressivos

E quanto ao CSS3? É a mesma história. Excelente suporte em todos os browsers modernos (Safari, Chrome, Firefox, Opera, iOS, Android, webOS e outros) à exceção do Internet Explorer.

Até certo ponto nesta linha de trabalho eu tentava com que as minhas páginas tivessem o mesmo aspeto em todos os browsers. Perdi inúmeras horas a corrigir as diferenças de rendering no terror da Internet (IE). Mas será que vale a pena? A resposta é um NÃO gigantesco! Isso não é possível e só nos faz desperdiçar tempo.

Aquilo que eu faço e sugiro fazer é certificar que o conteúdo é acessível de forma aceitável em todos os browsers, mas não tentar ser “pixel perfect”. Depois, progressivamente adicionar funcionalidades que melhorem a experiência do utilizador, nos browsers que suportem essas funcionalidades.

Por exemplo, neste momento estou a fazer um menu onde tenho o texto em branco e o fundo num tom de azul. Esse texto sobressai mais com uma sombra e graças ao CSS3 com a nova propriedade text-shadow isso atinge-se facilmente… exceto no IE. Mas não é essencial para se perceber o texto, apenas melhora a leitura. A minha decisão é usar na mesma essa propriedade e não tentar compensar nos browsers que não suportem.

Será que vale a pena atingir perfeição pixelar em todos os browsers? Não.

Esta é a ideia principal que eu quero transmitir com este artigo. Até podemos mostrar uma curta mensagem ao utilizador que se ele optar por um browser mais moderno, terá uma melhor experiência.

…desde que não seja essencial para a funcionalidade da página.

Se o Chrome amanhã lançar uma nova funcionalidade em que mais nenhum tem será impedimento para eu usar? Nem por isso. O meu browser de escolha é o Safari, e se valesse a pena eu não vejo porque não dar um doce aos utilizadores do Chrome, desde que não seja essencial para a funcionalidade da página.

Mais informação

Se estiver interessado em descobrir mais sobre o HTML5, seguem-se alguns recursos.

Comentários