INTRODUÇÃO
Neste artigo vamos falar sobre Modernizr, uma compacta biblioteca JavaScript que detecta a disponibilidade de implementações nativas para a nova geração de tecnologias web, isto é, características que se originam das especificações da HTML5 e CSS3. Várias dessas características já estão implementadas, principalmente nos navegadores mais atuais. E o que a modernizr faz é simplesmente nos informar quais dessas características já estão presentes ou não em cada um desses navegadores.
Ao invés do método de fazer uma “UA sniffing” tradicional – porém altamente recomendável – que por sua vez detecta o navegador em si só utilizando a propriedade navigator.userAgent, a Modernizr realiza uma detecção das características que os navegadores podem ou não suportar. Além do mais, a mesma engine de renderização pode não necessariamente suportar as mesmas coisas, e em alguns casos, os usuários mudam as suas strings userAgent para acessar sites mal desenvolvidos que não os permitem realizar certas tarefas. O foco da Modernizr está voltado a acabar com o uso da UA Sniffing, pois utilizar um detector de características é mais confiável mecanicamente para definir o que podemos ou não desenvolver em determinado navegador, e o Modernizr se torna conveniente para nós desenvolvedores em vários aspectos.
- Realiza o teste de mais de quarenta características, tudo em apenas alguns milissegundos.
- Cria um objeto em JavaScript chamado “Modernizr” que contém os resultados desses testes com propriedades booleanas.
- Adiciona classes no HTML explicando precisamente quais características são ou não nativamente suportadas.
- Possui um script carregado que podemos resgatar no polyfills para implementarmos em navegadores mais antigos.
Sabendo o que a Modernizr pode fazer por nós desenvolvedores podemos tirar vantagens dos navegadores mais atuais que podem renderizar ou utilizar essas características, e ainda termos um fácil e confiável método para controlar a situação para aqueles navegadores que não podem exibir tais implementos.
INSTALAÇÃO
Para que possamos fazer uso dessa ferramenta, primeiramente temos que efetuar o download da mesma, para isso vamos acessar o seguinte site: http://modernizr.com/download/. Na página que abriu temos a opção de escolhermos as características que desejamos utilizar em nosso projeto. Dessa maneira iremos copiar apenas os códigos que necessitamos, assim economizando bits no nosso script. Após todas as opções desejadas estarem selecionadas, clicamos em “GENERATE”. Obteremos nossa biblioteca customizada da Modernizr.
Caso não tenhamos certeza do que necessitamos usar, podemos optar por baixar a versão para desenvolvedores que contém a biblioteca completa, porém não comprimida, (http://modernizr.com/) clicando em development.
Figura 1: Download Modernizr Development
E na próxima página que será exibida, clique em Download, ao lado de Generate.
Figura 2: Finalizando download do Modernizr versão Development
Agora vamos incluir essa biblioteca no nosso HTML da seguinte forma. É recomendado colocarmos dentro da tag <head> para uma melhor performance, devemos inserir logo abaixo das nossas folhas de estilo.
Listagem 1: Inserindo Modernizr no HTML
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Teste de Modernizr</title>
<script src="modernizr.js"></script>
</head>
<body>
</body>
</html>
SUPORTE
A Mordernizr oferece suporte aos seguintes navegadores
- IE 6+
- Firefox 3.5+
- Opera 9.6+
- Safari 2+
- Chrome
E possui também suporte para os seguintes browsers móveis.
- iOS`s mobile Safari
- Android`s Webkit browsers
- Opera Mobile
- Firefox Mobile
POLYFILLS E A MODERNIZR
Um polyfill ou polyfiller é uma biblioteca ou plugin para ampliarmos as funcionalidades dos navegadores antigos que não possuem suporte para as funcionalidades modernas. Para conseguirmos compreender bem esse conceito, pensamos em HTML 5, que traz consigo diversas APIs para trabalhar com local Storage ou Web Sockets, etc. Os navegadores atuais já não tem suporte total a essas tecnologias, imagina agora se tratando dos navegadores antigos, o suporte é ainda pior. Então podemos carregar um polyfill para assim deixar esses navegadores com compatibilidade para algumas dessas tecnologias.
O polyfill não tem como estar construído da mesma forma que a API nativa nos navegadores, porem é como um emulador que nos proverá da mesma interface de modo que possamos trabalhar em clientes web antigos da mesma forma como trabalhamos nos atuais.
Os polyfill não faz parte do Modernizr especificamente, porém proporciona elementos para carregá-lo no navegador quando nãohouver suporte nativo. Dessa forma, podemos ter um suporte instantâneo para algumas funcionalidades da HTML 5 e das CSS3.
EXEMPLO JAVASCRIPT
Vamos criar um exemplo no qual verificaremos se a propriedade “geolocation” é suportada ou não em um navegador. Para isso vamos usar JavaScript para dar um alert informando se tal propriedade é ou não suportada pelo navegador em questão. Como sabemos, a propriedade geolocation não é suportada pelo IE e por isso estaremos fazendo o teste para ver se realmente acusará essa característica.
Listagem 2: Exemplo JavaScript
<html>
<head>
<title>Modernizr - Javascript Exemplo</title>
<script src="modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
if (Modernizr.geolocation) {
alert("Geolocation é aceita neste navegador")
} else {
alert("Geolocation não é aceita neste navegador")
}
</script>
</head>
<body>
</body>
</html>
Figura 3: Resultado do teste no Chrome
Figura 4: Resultado do teste no Internet Explorer
CONCLUSÃO
Com isso concluímos que a Modernizr é um complemento que agrada a nós desenvolvedores que desejamos utilizar as últimas tecnologias, mas que estão comprometidas com a compatibilidade dos browsers.
As funcionalidades básicas do Modernizr para detecção de suporte do HTML e CSS já são bastante interessantes por si só. Portanto, com a possibilidade de carregar pollyfiles se converte em uma ferramenta excelente que permite nos adiantarmos a diversos standards que ainda não estão universalizados.
