Modernizr é um pacote de bibliotecas orientado para os desenvolvedores que querem criar websites com as tecnologias mais modernas, leia-se CSS3 e HTML5, mas que não querem esquecer da compatibilidade com navegadores antigos. No artigo anterior fizemos uma apresentação detalhada do que oferece Modernizr, de modo que agora vamos começar a explicação sobre seu uso.

Neste primeiro artigo vamos simplesmente oferecer os primeiros passos que devemos realizar se queremos aproveitar as possibilidades de Modernizr em uma página web que estejamos realizando, ou seja, como baixar as bibliotecas e como incluí-las a partir de uma página web.

Download de Modernizr

O primeiro passo consistirá em baixar o arquivo com o código fonte de Modernizr. Trata-se de um arquivo com código Javascript que podemos encontrar em duas variantes:

1) Desenvolvimento (Development)
É um script completo, com todas as funcionalidades básicas de Modernizr, sem comprimir e com comentários. Seria ideal usar este script unicamente durante a fase de desenvolvimento de nosso projeto. A seguir interessaria baixar um pacote idôneo para produção.

2) Produção (Production)
Quando tenhamos o site já funcionando definitivamente e aberto aos visitantes, se recomenda fazer um download das bibliotecas para produção. Para fazer este download há uma página onde podemos selecionar as funcionalidades de detecção que queremos incluir, porque estamos utilizando em nosso projeto. O peso das bibliotecas não é muito grande, mas sempre é bom que nos permitam otimizar nosso download para incluir somente aqueles módulos que vamos utilizar.

Na própria página de downloads de Modernizr poderemos encontrar a listagem de funcionalidades completa e selecionar as que queremos incluir em nosso pacote. Também encontraremos um link para o acesso à versão de desenvolvimento das bibliotecas.

Instalação de Modernizr na página

Uma vez baixada nossa biblioteca, devemos incluí-la no código HTML da página, da mesma maneira que incluímos scripts Javascript desde sempre.

<script src="modernizr-latest.js"></script>

Isto é feito no HEAD da página e, além disso, nos recomendam colocar esta chamada no script de Modernizr logo depois de nossas declarações de estilos CSS.

A partir deste momento teremos disponíveis nossos scripts de detecção de funcionalidades bem como uma série de classes CSS que nos ajudarão a aplicar estilos apenas quando os navegadores os suportem. Tudo isso será visto mais adiante em próximos artigos.

Navegadores compatíveis

A listagem dos navegadores compatíveis com Modernizr é tão grande quanto poderíamos desejar. No momento de escrever este artigo estão suportando Internet Explorer 6+ (e superior), Firefox 3.5+, Opera 9.6+, Safari 2+ e Google Chrome. Ademais, para sistemas operativos de dispositivos móveis suportam Safari para iOS, o navegador de Android baseado em Webkit, Opera Mobile e Firefox Mobile. Avisam na documentação, além do mais, que estão trabalhando para suportar Blackberry 6+ dentro de pouco.

No momento deixamos este artigo por aqui, pois no seguinte já entraremos no assunto mais profundamente para mostrar como detectar funcionalidades no navegador por meio de Javascript e Modernizr.