Antes de começar a implementar o HTML5 e o CSS3 em seus projetos, é importante você ter conciência de quais marcações e propriedades são suportadas pelas diferentes versões dos diferentes navegadores.
Na verdade, o suporte as linguagens não é feito exatamente pelo navegador, e sim pelo motor de renderização que ele utiliza. Por exemplo, temos o motor Webkit que é usado pelos navegadores Chrome e Safari, o motor Gecko que é utilizado pelo navegador Firefox, o motor Trident usado pelo navegador Internet Explorer, e o motor Presto usado pelo navegador Opera.
O Webkit é derivado (fork) do motor KHTML, do navegador Konqueror (facilmente encontrado nas distribuições Linux que utilizam a interface KDE). Atualmente, o Webkit é o motor de renderização que tem maior compatibilidade com o HTML5 e CSS3.
Se o seu código HTML5 e CSS3 estiver bem compatível com o Webkit, ele com certeza funcionará bem não só nos desktops com Chrome e Safari, mas também nos celulares e tablets – sejam eles iPhone e iPad ou produtos que levam o Android como sistema operacional.
Avaliando o nível de suporte do HTML5 e CSS3
Pois bem, sabendo disso tudo, vamos ao que interessa. Existem na web alguns bons site e algumas boas ferramentas para nos mostrar o nível atual de suporte dos navegadores com relação as novas versões das linguagens.
O primeiro site que você pode consultar é o http://html5readiness.com/. Nele você encontrará um infográfico interativo mostrando o nível de suporte dos navegadores para o HTML5 e CSS3. Cada raio do infográfico diz respeito a um recurso diferente, e todos os raios possuem links para páginas e documentações a respeito de cada um deles.
O segundo site que eu indico o acesso é o http://html5test.com/. Nele, você recebe uma pontuação para o navegador que você estiver usando, de acordo com o nível de suporte que ele tiver. Os detalhes sobre o suporte e a pontuação dada também são listados na página.
Por fim, a informação mais completa sobre suporte das linguagens nos navegadores, vocês irão encontrar no site http://caniuse.com/. Ao clicar no link de algum recurso ou funcionalidade, você verá informações completas sobre o suporte em cada versão de cada navegador. O site é constantemente atualizado e sem dúvida deve ter lugar cativo nos seus favoritos 🙂
Técnicas para compatibilidade com o HTML e CSS3
Já existe uma porção de bibliotecas javascript para prover compatibilidade entre suas páginas feitas com HTML5 e CSS3 e os navegadores. Claro que essas bibliotecas não farão com que recursos como APIs funcionem em navegadores antigos, mas elas conseguem fazer com que eles renderizem as novas marcações ou entendam algumas novas propriedades, o que já é suficiente para criarmos documentos bem semânticos e estilizados.
Modernizr
O Modernizr (http://modernizr.com/) é uma pequena biblioteca javascript que faz a detecção das funcionalidades do HTML5 e do CSS3 em cada navegador que acessar a página. Dessa forma, quando o Modernizr é carregado, ele insere no elemento <html> uma série de classes que indicam o suporte ou não das marcações e propriedades.
Vamos a um exemplo. Suponhamos que um navegador suporte os @font-face, border-radius, box-shadow e opacity. Em compensação, ele não suporta canvas, audio, video e CSS animations. Dessa forma, o Modernizr iria inserir em nossa tag <html> as seguintes classes:
<html class="fontface borderradius boxshadow opacity no-canvas no-audio no-video no-cssanimations" lang="pt-BR">
Com essas classes, nós podemos tratar o código de forma a prover diferentes formatações para os navegadores. Vamos a um exemplo: suponhamos que eu queira adicionar uma sombra a um botão, e para isso eu utilize a propriedade box-shadow nos navegagores que suportam essa propriedade, e uma imagem com a sombra desenhada para os navegadores que não suportam o box-shadow. Ficaria assim:
.boxshadow .button {
-webkit-box-shadow: 0px 0px 5px #666;
-moz-box-shadow: 0px 0px 5px #666;
-ms-box-shadow: 0px 0px 5px #666;
-o-box-shadow: 0px 0px 5px #666;
box-shadow: 0px 0px 5px #666;
}
.no-boxshadow .button {
background: url(sombra.png) no-repeat;
}
Claro, isso é bem interessante, mas não é necessáriamente muito útil. Existem muitas formas de contornarmos esses problemas e criamos soluções em nosso código sem depender dessas classes. Talvez para uma ou outra propriedade o uso dessas classes valha a pena, mas não para todas elas.
Mas enfim, ao menos essas classes são uma forma de termos ideia do nível de suporte de cada navegador, e também fazer alguns testes. E como comentei no início, o Modernizr cria os elementos do HTML5 nos navegadores que não possuem suporte. Dessa forma podemos utiliza-los e estiliza-los sem problemas.
IE7.js
“Uma biblioteca JavaScript para fazer o Internet Explorer se comportar como um navegador compatível com os padrões”. Essa é a melhor definição para o projeto IE7-js, uma biblioteca que corrige muitas questões relativas a falta de suporte das diferentes versões do Internet Explorer ao HTML e CSS, além de fazer as imagens PNG com canal alpha (transparência) funcionarem corretamente no IE6 (se é que alguém ainda usa o IE6).
Como o nome indica, o projeto começou corrigindo problemas do IE7, mas ao acessarmos o site http://code.google.com/p/ie7-js/ vemos que já existem versões para o IE8 e IE9. Todas as versões funcionam atravém de comentários condicionais. Veja abaixo o exemplo:
<!--[if lt IE 7]> http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js <![endif]-->
No exemplo acima, o comentário condicional está indicando uma solução para as versões do Internet Explorer anteriores ao 7. Dessa forma, navegadores como o IE5 e IE6 ficarão compatíveis com o IE7.
Caso você opte por usar a biblioteca IE8.js, os navegadores como o IE5, IE6 e IE7 ficarão compatíveis com o IE8, e dessa forma você não precisará usar também o IE7.js.
Bem, no nosso caso, vou recomendar a você que utilize a biblioteca IE9.js, que fará com que os navegadores IE6, IE7 e IE8 sejam compatíveis com a sua versão posterior, suportando muitas marcações de HTML5 e propriedades de CSS3. Perfeito, não?
E você, tem mais alguma dica interessante sobre suporte dos navegadores ou técnicas de compatibilidade? Então deixe um comentário, e vamos compartilhar conhecimento 😉
