Seções iMasters
JavaScript + Web Standards

Modernizr: implementando funcionalidades de CSS3 e HTML5 de forma segura

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.

Comente também

14 Comentários

Flavio Ferreira

Bom artigo :D
Provavelmente irei adota-la em um novo projeto !!

https://lokamisa.com.br
http://www.ifranca.com.br

Marcelo Custódio

Muito bom! Parabéns! Nosso contexto é complexo e envolve várias arquiteturas e plataformas. É necessário sempre testar compatibilidades.

http://marcelocustodio.net
http://www.inovacaosoftware.com.br

Heloisa Biagi

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.

Tiago Baeta

Genial Heloisa. Estreia impecável no iMasters. Parabéns!

Sidney Lins

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+

    Heloisa Biagi

    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.

Cypriano

Querida Heloisa

Somos leigo no assunto…
Ficamos contente com seu sucesso, um grande abraço.
Parabéns

Mary e Cypriano

EDUARDO BRITO

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.

Jean Nascimento

Fizemos o uso do modernizr com testes unitários caso vc deseje saber o q seu navegador suporta.

http://suissacorp.com.br/modernizr_readiness/

    Heloisa Biagi

    Genial esse teste, Jean! Uma bela representação gráfica do Modernizr.

Edson Schiavetti

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

Tania Nass

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!!!

Marcus Ortense

Artigo excelente, já estou usando a biblioteca nos meus testes

Adélson

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.

Qual a sua opinião?