Modernizr: implementando funcionalidades de CSS3 e HTML5 de forma segura

Heloisa Biagi
em JavaScript

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.

Mensagem do anunciante:

Tenha todo o desempenho para o seu site com a Hospedagem Cloud DialHost. Servidores em cloud prontos para receber sites. Saiba mais.

Heloisa Biagi

é desenvolvedora front-end, pós-graduanda em Gestão Web - Tecnologias e Ferramentas Aplicadas, pelo Senac, e articulista nas horas vagas. Além do iMasters, também escreve sobre programação front-end para o blog Digifilia. http://www.heloisabiagi.com

14 comentários Comente também

  1. Flávio e Marcelo, muito obrigada pelos cumprimentos. O Modernizr é ótimo pois permite a implantação de recursos CSS3/HTML5 sem deixar na mão os usuários de browsers mais antigos. Acredito que devemos sempre estar à frente e testar novos recursos em nossos projetos, mesmo que isso signifique mais trabalho. Até porque cada vez mais surgem no mercado browsers e aparelhos que suportam recursos novos, então, por que não experimentar?

    Abraços.

  2. Olá Heloísa.

    Dê uma verificada pois há pelo menos duas referências a “Minimizr” em vez de Modernizr. Acredito (e o contexto indica) que era pra ser usado este último.

    Obrigado pelo artigo. Conhecia mas nunca usei. Acho que vou experimentar em breve.

    T+

    1. Realmente, foi uma gafe minha. O Minimizr (que também existe) são outros 500. Tentarei corrigir o erro.

      No mais, vale a pena testar o Modernizr. Ele permite ao desenvolvedor usar tecnologia de ponta sem e preocupar em como oferecerá conteúdo alternativo a quem não tem acesso a essas tecnologias.

  3. ola Heloisa. parabens.
    alem do sucesso promissor, com certeza é saber do orgulho que seu pai sente, em enviar aos amigos e poder compartilhar disso tudo. felicidades.
    BRITO.

  4. Meus parabens Heloisa
    Compartilho com seu pai coruja seu sucesso e fico muito honrado de telos como amigos.
    Continue sendo a filha maravilhosa e tenha certeza que sempre estaremos torcendo por ti.
    Abraços.
    Edson Schiavetti e família

  5. Heloisa, parabéns pelo trabalho e desenvolvimento excepcional!!!! Visando a melhora de uma Empresa sediada aquí em S.Bernardo-SP com parcería junto a Empresa do meu filho nos EUA-N.Y., tomei a liberdade de divulgar o seu trabalho para melhor adequação da Empresa frente ao mercado tecnologico hoje sempre atualizado. Aproveito ainda para parabenizar tb o coruja do seu papai meu grande chefe e, por conseguinte a abençoada familia a qual vc descende!!!! Sucesso sempre!!!

  6. Apesar não ser do ramo, meus conhecimentos não passam dos que aplico no meu próprio site: http://www.interlingo.com.br, sou, na verdade, professor de inglês, pude perceber que o artigo é bem didático.
    Como certeza, com mais um pouco de estudo, serei capaz de aplicar os conhecimentos deste artigo. Obrigado.

Dê Sua Opinião

O seu endereço de email não será publicado Campos obrigatórios são marcados *


− 4 = um

leia mais
Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: