A cada dia, os designers são premiados com novos recursos de HTML e CSS que visam ampliar as possibilidades do desenvolvimento front-end. Porém, nem sempre os browsers acompanham o ritmo do surgimento das novidades – e nem sempre os usuários estão em dia com as atualizações de seus navegadores. 

Esse fato, além de desencorajar o uso de novos recursos que não sejam completamente crossbrowser, obriga os desenvolvedores a gastar boa parte do seu tempo procurando alternativas para lidar com a discrepância de suporte entre os navegadores – quando poderiam estar aplicando seus esforços em tarefas mais produtivas.

Atualmente, a forma mais comum de utilizar funcionalidades avançadas de HTML e CSS de maneira crossbrowser é através de scripts de detecção de “userAgent”. Eles detectam o agente do navegador do usuário e aplicam (ou deixam de aplicar) as novas funcionalidades de acordo com o suporte fornecido pelo agente.

Esse método, além de tomar tempo e linhas de código, nem sempre é a maneira mais precisa de implementar uma nova propriedade, já que navegadores com o mesmo agente podem renderizar conteúdo de forma diferente.

Uma biblioteca Javascript com abordagens para HTML e CSS

O Modernizr, uma compacta biblioteca Javascript, oferece uma abordagem diferente para o uso de novas tecnologias do HTML e CSS. Em vez de basear a renderização de uma propriedade no que é declarado pelo agente do navegador, ele de fato testa a presença da propriedade no próprio navegador do usuário (em questão de milissegundos) e armazena o resultado do teste numa variável dentro de um script.

Se a funcionalidade está presente, o valor da variável é true; do contrario, é declarada false. O resultado do teste pode ser manipulado via CSS, no qual o desenvolvedor tem a chance de prover 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 de última geração, entre eles o suporte a border-radius, canvas, @font-face, opacidade e backgrounds múltiplos.

Aqui vale abrir um parêntese em relação ao Modernizr: embora seja capaz de detectar a presença ou a ausência de um recurso, ele não é capaz de implementá-lo em um agente no qual ele não esteja presente. Porém, a incapacidade de implementar novos recursos não tira os méritos da biblioteca – que torna muito mais simples e ágil o uso de novas tecnologias e eleva o desenvolvimento front-end a um novo patamar.

Exemplos utilizando o Modernizr

A documentação do Modernizr é bastante abrangente e tem exemplos para a implementação de todas as funcionalidades suportadas pela biblioteca. Geralmente, as propriedades de CSS3 são implementadas a partir de uma classe especial, que checa a presença ou a ausência de suporte à propriedade e executa o código para ambas as ocasiões. Neste código, por exemplo:

.divGradiente {background: #1eff00;}  

.cssgradients .divGradiente {background:-webkit-linear-gradient(#00f0ff, #1eff00);}

O elemento de classe .divGradiente tem como valor default de sua propriedade background uma única cor (padrão aceito por todos os browsers). A classe do Minimizr, .cssgradients, então checa o suporte do navegador ao uso de gradientes. Caso ele exista, o background do navegador passa a ser o gradiente definido como valor da propriedade em vez da cor única definida anteriormente.

O código acima também pode ser escrito como beautiful degradation, em que o gradiente é definido como o valor default da classe .divGradiente enquanto uma outra classe do Minimizr no .cssgradients fornece um valor alternativo caso não haja suporte para gradientes no navegador:

.divGradiente {background:-webkit-linear-gradient(#00f0ff, #1eff00);}

.no-cssgradients .divGradiente {background: #1eff00;}

Elementos do HTML5 são implementados via Javascript. Este script cria uma canvas e testa a presença da propriedade getContext. Em caso verdadeiro, ele criará um quadrado vermelho dentro de uma div cujo id é “canvasAqui”:

if(Modernizr.canvas) { 
function draw() { 
var c = document.createElement("canvas"); 
var cxt = c.getContext("2d"); 
cxt.fillStyle="#FF0000"; 
cxt.fillRect(20,20,150,150);  
$(c).appendTo("#canvasAqui"); } 

window.onload = draw; } 

E para providenciar conteúdo alternativo na ausência de suporte a canvas, basta inserir este conteúdo dentro da div “canvasAqui” e escondê-lo se o suporte ao elemento canvas for verdadeiro:

 /*HTML*/

<div id="canvasAqui">
<p>Este conteúdo requer suporte a HTML 5.</p>
</div>

/*CSS*/

.canvas #canvasAqui p {  
display:none; 
 }

Conclusão

Como demonstrado nos exemplos anteriores, usar o Modernizr é bastante simples, e a biblioteca ainda pode ser utilizada sem conflitos com outras bibliotecas como jQuery. Não é à toa que o Minimizr foi adotado pela equipe de desenvolvedores do Twitter.

A forma como ele oferece ao desenvolvedor controle sobre o uso de funcionalidades que ainda não são suportadas por todos os browsers é bastante eficiente, impulsionando o uso dessas novas tecnologias no desenvolvimento front-end.