Geral
O que é a Modernizr?
Modernizr é uma pequena biblioteca JavaScript que detecta a disponibilidade de implementações nativas para a nova geração de tecnologia web, isto é, características que se originam das especificações do HTML5 e CSS3. Muitas dessas características já estão implementadas pelo menos nos mais utilizados Browsers (entenda-se dois ou mais!) e o que a Modernizr faz é, simplesmente, lhe informar quais características já são presentes nativamente ou não em cada um desses browser.
Ao contrário do tradicional – porém altamente recomendável – método de fazer uma “UA sniffing”, que por sua vez detecta o browser por si só usando a propriedade navigator.userAgent, a Modernizr realiza uma detecção das características que os browsers podem ou não realizar. 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 sua string userAgent para acessar sites mal desenvolvidos que não os deixam realizar determinadas tarefas.
Modernizr foca-se em acabar com a prática do UA Sniffing. Usar um detector de características é mais confiável mecanicamente para estabelecer o que você poderá ou não desenvolver em determinado browser, e o Modernizr torna-se conveniente para você em vários aspectos:
- Realiza um teste de mais de 40 características, tudo em alguns milisegundos;
- Cria um objeto em JavaScript (chamado Modernizr) que contém os resultados desses testes com propriedades booleanas;
- Ela adiciona classes no elemento html explicando precisamente quais características são e não são nativamente suportadas
- Ela disponibiliza um script carregador que você pode resgatar no polyfills para implementá-las em navegadores antigos
Sabendo o que a Modernizr oferece a você, você poderá tirar vantagens dos browsers mais atuais que podem renderizar ou utilizar essas características, e ainda ter um fácil e confiável método para controlar a situação para os navegadores que não podem exibir tais implementos!
Instalando a Modernizr
No topo da página de Download, selecione as características que você pretende utilizar no seu projeto. Dessa maneira, você irá copiar apenas os códigos que necessita, economizando bites no seu script. Clicando em Generate, você obterá sua biblioteca customizada da Modernizr. Se você não sabe exatamente o que deseja usar, baixe a Versão para Desenvolvedores que contém a biblioteca completa, porém não comprimida.
Coloque os scripts dentro das tags <head> do seu HTML. Para uma melhor performance você deverá inseri-las logo abaixo de seu link para as folhas de estilo. A razão pela qual pedimos para inserir dentro do head se dá por dois motivos: o HTML Shiv (que inicia os elementos do HTML5 no IE) precisa executar a biblioteca antes do início do <body>, e se você estiver usando alguma classe no CSS que a Modernizr inclui, você desejaria se precaver contra um FOUC (do inglês FLASH OF UNSTYLED CONTENT).
Polyfills e a Modernizr
O nome “Modernizr” pode lhe trazer alguma lembrança, nós admitimos. A biblioteca lhe permite utilizar os novos elementos seccionados do HTML5 no IE, além disso, ela não “moderniza” nenhuma outra característica! O nome “Modernizr” ainda se encaixa perfeitamente bem nos scripts que proporcionam suporte quando o suporte nativo dos navegadores é defeituoso. De maneira geral, esses scripts são chamados de polyfills.
"polyfill (n): uma saída em JavaScript que replica a API padrão para os navegadores mais antigos”
Portanto, um websocket polyfill deverá criar um window.WebSocket global com as mesmas propriedades e métodos em uma implementação nativa. Isso significa que você poderá desenvolver para o futuro, com uma API real, e somente carregar suas compatibilidades nos navegadores que não suportam determinada API ou característica.
E uma excelente notícia para você, existe uma polyfill por perto em todas as características do HTML5 que o Modernizr pode detectar. U-hú! Sendo assim, na maioria dos casos, você pode usar características do HTML5 ou CSS3 e pode replicar isso em navegadores que não oferecem suporte a elas! Sim, você não só pode utilizar HTML5 nos navegadores atuais, como pode usar nos navegadores antigos também!
Mas isso nos leva a um grande e gordo aviso: não é só porque você pode usar um polyfill que você deverá usá-lo! Você deve entregar a melhor experiência para o usuário sempre que possível, que significa que você deve ser rápido! Carregar 5 scripts compatíveis para o IE7 não é a melhor saída quando esse projeto for carregado em um navegador como o Opera ou o Chrome. Não existem regras rápidas, mas tenha em mente que quanto mais scripts você adiciona para uma página, mais impacto haverá na experiência do usuário. E lembre-se: nenhum dos seus visitantes costuma acessar seu site em vários navegadores; mas é normal se o contrário também acontecer.
Agora, para entender efetivamente o uso e serviços dos polyfills para todos os tipos de usuários, leia o …
Modernizr.(load) tutorial
Modernizr.load é um gestor de recursos (CSS e JavaScript) que foi criado para trabalhar especificamente lado-a-lado com a Modernizr. É opcional ao seu desenvolvimento, mas se estiver carregando polyfills, há uma grande chance em se economizar banda e turbinar a performance.
A Modernizr.load é geralmente muito fácil de entender, então começaremos com um exemplo básico:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
Nesse exemplo, decidimos que deveríamos carregar um script diferente dependendo da geolocalização suportada pelo navegador ou não. Fazendo isso, você não deixará que alguns usuários façam o donwload de códigos que seu navegador não necessite. Isso aumenta a performance da página e oferece claramente um local para abstrair suas polyfills (ambos ‘geo.js’ e ‘geo-polyfill.js’ podem parecer o mesmo para a aplicação, mesmo que sejam implementadas de maneira diferente).
Há uma grande chance que você não esteja totalmente infeliz com o tempo de download do seu script agora, mas ficará muito feliz em saber que o Modernizr.load não atrasa o carregamento de nada, e às vezes, oferece maior velocidade na performance das páginas no carregamento assíncrono e no paralelo. Há várias possibilidades a se considerar nessa área, então sugerimos que você tente algumas coisas para ter certeza de que está extraindo o máximo de performance para sua situação em específico.
Modernizr.load é leve e simples, mas pode fazer a força de um peso-pesado para você. Abaixo se encontra um exemplo mais complexo da utilização do script, quando seus scripts esbarram em mais de um teste sobre as características do navegador. Uma boa técnica é encapsular múltiplas características para apenas determinado navegador, de maneira que você não acabe rodando muitos scripts de uma única vez. É assim que deveria trabalhar:
// Dá ao Modernizr.load uma string, um objeto, ou um array de strings e objetos
Modernizr.load([
// Polyfills presenciais
{
// Uma lista lógica das coisas que normalmente precisamos
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
// Modernizr.load carrega o css e o javascript por padrão
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Polyfills funcionais
{
// Isso apenas precisa ser verdadeiro
test : Modernizr.websockets && window.JSON,
// socket-io.js e json2.js
nope : 'functional-polyfills.js',
// Você pode também fornecer arrays de recursos para carregamento
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Roda isso após tudo nesse grupo ter sido baixado
// e o executa, assim como tudo no grupo anterior
myApp.init();
}
},
// Roda o seu script analytics depois que você já deu um ponta-pé no restante
// de sua aplicação.
'post-analytics.js'
]);
Existem muitas coisas que você pode fazer com a Modernizr.load. Ela foi lançada primeiramente standalone como yepnope.js , mas foi criada especificamente com a Modernizr e com os testes de características em mente. Você pode estudar toda a documentação para o Modernizr.load em yepnopejs.com.
Uma característica bacana da Modernizr.load é a dissociação total da carga e execução de scripts. Isso pode não significar muito para você, mas usuários de HTML5 Boilerplate irão se familializar com o a cópia do jQuery fallback do Google CDN. Ele se apresenta mais ou menos assim:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.1.min.js">\x3C</script>')</script>
Ele trabalha tentando carregar o script, e imediatamente após, testando para ver se objetos em jQuery estão disponíveis. Se não estiverem, ele carrega uma cópia local do jQuery como uma reserva.Isso geralmente não é assim tão simpes em “scripts-carregadores”, mas o Modernizr.load protege a retaguarda. Você pode simplesmente utilizar a mesma lógica, e a Modernizr.load fará a execução na ordem para você:
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.6.1.min.js');
}
}
},
{
// Isso vai aguardar pelo fallback (reserva) carregar e
// ser executado se houver a necessidade!
load: 'needs-jQuery.js'
}
]);
Uma nota rápida: Use somente essa técnica como um método para os fallbacks (reservas), pois ele pode afetar a performance por forçar o carregamento de scripts em série ao invés de paralelamente.
Modernizr.load é bem flexível. Você pode carregar seus próprios prefixos e filtros para seus scripts. Para informações avançadas sobre isso, você pode checar a documentação na home page do yepnopejs.com. Você pode até ir mais longe ao alterar passos inteiros no processo de carregamento e alterá-los usando sua própria lógica. Portanto, comece a usar e economize aqueles preciosos, preciosos bytes.
Como funciona a Modernizr
Para realizar muitos testes, Modernizr faz sua mágica criando um elemento, informando um estilo específico nesse elemento e então o recupera imediatamente. Navegadores que entendem a instrução retornarão algo sensível; navegadores que não entendem irão retornar algo como nada ou “indefinido”.
Muitos dos testes na documentação vem com um pequeno código de exemplo para ilustrar como você pode usá-lo em um teste específico em seu fluxo de trabalho. Atualmente, casos de uso chegam de maneiras bem diferentes. Os usos possíveis para o Modernizr são limitados apenas por sua imaginação.
Se você estiver realmente interessado em detalhes sobre como o Modernizr trabalha, veja em annotated source code e dig into the project on github.
Elementos HTML5 no IE
Modernizr roda através de um loop em JavaScript para habilitar vários elementos do HTML5 (assim como a tag abbr) para estilzá-lo no Internet Explorer. Note que isso não quer dizer que faz o IE oferecer suporte para os elementos Audio e Video, apenas significa que você pode usar section ao invés de div e estilizá-los com CSS. Você provavelmente desejará inserir esses elementos utilizando display:block; veja o HTML5 Boilerplate CSS como exemplo. Assim como no Modernizr 1.5, esse script é idêntico ao usado na popular biblioteca html5shim/html5shiv. As duas permitem imprimir em tela elementos do HTML5 nos IE6-8, porém você desejará testar a performance se o seu CSS apresentar mais de 100kb.
Suporte aos Navegadores
A biblioteca oferece suporte aos seguintes navegadores: IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. Para os dispositivos móveis, oferece suporte ao iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile e enquanto continuamos fazendo testes, acreditamos que ofercer suporte também para o Blackberry 6+.
