Primeiros passos com Modernizr

Como começar a usar Modernizr, as bibliotecas para detecção de funcionalidades no navegador.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 14/10/11
Valorize este artigo:
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.

Nota: Caso você não saiba que funcionalidades de Modernizr vai utilizar, recomenda-se utilizar a versão de desenvolvimento (ocupa apenas 42Kb), mas depois, uma vez terminado seu projeto, é recomendável fazer um pacote com as funcionalidades que você realmente utilizou. Esse pacote, ademais, estará sem comentários e comprimido, de modo que ocupará bastante menos que a versão para desenvolvimento.

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.

Nota: Conforme podemos ler na documentação de Modernizer, se aconselha colocar o script em HEAD porque deve ser baixado antes do BODY da página, devido a um componente que talvez utilizemos, para permitir HTML em IE, chamado HTML5 Shiv. Além disso, se recomenda colocar depois dos estilos CSS para evitar um comportamento pouco desejável chamado FOUC, pelo qual se pode mostrar por um pequeno espaço de tempo a página sem os 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.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato