Modernizr é uma biblioteca Javascript que nos permite conhecer a compatibilidade do navegador com tecnologias HTML5 e CSS3, para fazer websites que se adaptam a cada browser.
Neste artigo vamos apresentar Modernizr, um componente que pode tornar a vida mais simples dos desenvolvedores que tenham que criar páginas web compatíveis com diferentes navegadores. É ideal para aqueles profissionais que desejam utilizar as tecnologias mais modernas, inclusive aquelas que estão em fase de especificação como CSS3 e HTML5 e que poucos navegadores suportam, sem deixar de produzir websites que funcionem corretamente em clientes web mais antigos.
Modernizr não é o típico framework Javascript, embora pudéssemos chamá-lo assim. Vou explicar. Na realidade, não é uma biblioteca que nos permita implementar com menor esforço projetos avançados, mas um pacote de detecção das capacidades de um navegador relativas a HTML5 e a CSS3. Dito de outro modo, Modernizr é uma biblioteca Javascript que nos informará quais das novas capacidades destas linguagens estão disponíveis no navegador do usuário, para utilizá-las, ou não, em cada caso.
Sabendo que nosso navegador suporta certas capacidades de CSS3 ou de HTML5, poderemos utilizá-las com liberdade. De modo contrário, se sabemos que um navegador não é compatível com determinada funcionalidade, poderemos implementar variantes que o suportem e desse modo criar websites que se adaptam perfeitamente ao cliente web de cada visitante.
Você pode encontrar Modernizr em: http://www.modernizr.com
Ferramentas de Modernizr para detecção de funcionalidades
Existem duas ferramentas principais em Modernizr que podem ser utilizadas para detectar as funcionalidades que estão presentes em um navegador. Uma, pode ser utilizada em scripts Javascript e outra diretamente sobre código CSS.
Objeto Javascript:
Una vez que baixemos as bibliotecas de Modernizr teremos à nossa disposição um objeto Javascript que possui uma série de propriedades que nos servem para saber quando uma funcionalidade específica está disponível, ou não, em um navegador. Essas propriedades têm sempre valores booleanos (true ou false), que podemos avaliar para fazer ou não uso das funcionalidades avançadas que desejemos, sabendo que realmente estão disponíveis.
Classes CSS:
Além disso, modernizr cria uma série de classes CSS que servirão, de uma maneira inteligente, para atribuir estilos CSS3 unicamente quando são suportados e que nos permitirão aplicar estilos alternativos quando não estejam disponíveis.
Que funcionalidades Modernizr detecta
Em resumo, com Modernizr podemos detectar as funcionalidades básicas de CSS3 e HTML5.
No caso de CSS3, detecta se estão ou não implementados atributos para fazer bordas arredondadas, sombras de caixas, imagens nas bordas, cores rgba fundos múltiplos, etc. Ademais, existem formas de detectar se as animações CSS estão implementadas no navegador, as colunas CSS, os degradés, transformações, etc.
Com relação a HTML5, Modernizr é capaz de nos informar sobre a existência ou não de suporte para etiquetas como AUDIO, VIDEO e o que será mais importante, a diversas API que estarão disponíveis nessa versão da linguagem de marcação, como Local Storage, Session Storage, Web Sockets, geolocalização, SVG, etc.
Polyfills em Modernizr
Até agora falamos sempre de “detecção” de funcionalidades, nunca de ampliação das características dos navegadores : é que Modernizr é justamente isso, um biblioteca para detectar o suporte às distintas características dos navegadores mais modernos. No entanto, existe também uma conexão entre Modernizr e os chamados “Polyfills”.
Um Polyfill ou Polyfiller é uma biblioteca ou plugin para ampliar as funcionalidades de navegadores antigos que não suportam funcionalidades modernas. Para entender bem esse conceito pensemos em HTML 5, que traz com ele diversas API para trabalhar com Local Storage ou Web Sockets, etc. Hoje poucos navegadores suportam essas tecnologias e se falamos de navegadores antigos, aí o suporte é ainda menor. Então, podemos carregar um Polyfill no navegador para que seja compatível com algumas dessas tecnologias.
O Polyfill não tem por que estar construído da mesma maneira que o API nativo nos navegadores, mas é como um emulador, que nos proverá da mesma interface, de modo que possamos trabalhar em clientes web antigos da mesma maneira como trabalharíamos nos modernos.
Os Polyfill não fazem parte de Modernizr especificamente, mas este sim proporciona elementos para carregá-los no navegador quando não se tenha suporte nativo. Desse modo, podemos ter um suporte instantâneo para algumas funcionalidades do HTML5 que estão por vir, embora isso, às vezes, vá em detrimento do desempenho do cliente web.
Carregamento de Polyfills com Modernizr.load()
No pacote básico de Modernizr não está disponível, mas entre vários “Extra” que poderemos selecionar na página de download, encontraremos um método chamado Modernizr.load() que serve para carregar Pollyfills.
Com Modernizr.load() e o objeto Javascript Modernizr, que armazena booleanos sobre se existe ou não suporte para diversas funcionalidades, temos tudo que necessitamos para carregar comodamente os Pollyfills necessários para ampliar o suporte de nosso navegador a características de HTML5 e CSS3.
Na própria documentação de Modernizr aconselham utilizar os Pollyfills com cuidado, porque pode baixar o rendimento dos navegadores. Não obstante, antevemos uma via excelente para poder inovar no desenvolvimento e manter suporte com navegadores antigos.
Nos próximos artigos trataremos o método Modernizr.load() em detalhes e estudaremos mais sobre o carregamento de Pollyfills.
Conclusão
Modernizr é um complemento que agradará aos desenvolvedores que querem utilizar as últimas tecnologias, mas que estão comprometidos com a compatibilidade y acessibilidade de suas criações. Talvez, quando você comece a utilizá-lo, perceba que conquistou um lugar destacado entre suas ferramentas de desenvolvimento.
Suas funcionalidades básicas, para detecção de suporte a HTML5 e CSS3, já são bastante interessantes por si só. Porém, ademais, com a possibilidade de carregar pollyfills, se converte em uma ferramenta potente que permitirá nos adiantarmos a diversos standards que ainda não estão universalizados.
