Documentação sobre a Biblioteca Modernizr

Traduzida por André Buzzo em

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+.

Características (features) detectadas pela Modernizr

CSS Features

Característica (Feature) Modernizr / Propriedade do objeto JavaScript / Classe do CSS
@font-face fontface
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow
Flexible Box Model flexbox

O Flexible Box Model (conhecido como flexbox) oferece uma maneira diferenciada de posicionar elementos, que aborda algumas das deficiências do flutuador baseado em layouts.

/* Simulated box shadow using borders: */ .box { border-bottom: 1px solid #666; border-right: 1px solid #777; } .boxshadow div.box { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px; box-shadow: #666 1px 1px 1px; }
hsla()hsla

Na maioria dos casos você não precisará utilizar as classes rgba e hsla, pois os navegadores fazem a reposição naturalmente:

.my_container { /* sem a necessidade de usar .rgba */ background-color: #ccc; background-color: rgba(255,255,255, .5); }
Multiple backgrounds multiplebgs
opacity opacity
rgba() rgba
text-shadow textshadow

O Firefox 3.0 dá um "falso-positivo" para esse teste, mas não se sabe de nenhuma correção ao problema. Todos os IE´s, incluindo o 9, não suporta o text-shadow e assim, falha em "entregar prazer".

.glowy { /* letras fantasmas */ color: transparent; text-shadow: 0 0 10px black; } .no-textshadow { color: black; }
CSS Animations cssanimations
CSS Columns csscolumns
CSS Gradients cssgradients

Como existe um bug no WebKit que causa a necessidade de realizar o download da imagem de background, existe uma melhor maneira de efetuar um combo de imagens com css gradientes, e assim todos têm acesso à mesma experiência sem a necessidade de sobrecarregar a HTTP com algum script extra:

.no-js .glossy, .no-cssgradients .glossy { background: url("images/glossybutton.png"); } .cssgradients .glossy { background-image: linear-gradient(top, #555, #333); }
CSS Reflections cssreflections
CSS 2D Transforms csstransforms
CSS 3D Transforms csstransforms3d
CSS Transitions csstransitions

As transições, tipicamente, podem ser usadas sem a necessidade de uma característica específica ou uma classe em JavaScript do Modernizr, mas para essas ocasiões, você poderá desejar que seu site se comporte de maneira diferente ao apresentado de acordo com o navegador utilizado. Um bom exemplo da situação é criar um site com uma animação que utilize nativamente o CSS Transitions, e para os navegadores que não suportam essa característica, você poderá manter a animação utilizando-se JavaScript.

Isotope utiliza o recurso da detecção da Modernizr para usar transitions junto com transforms para garantir uma total aceleração de hardware quando possível, e quando necessário, utiliza uma reserva baseada em jQuery animations quando necessário.

HTML5 Features

Característica (Feature) Modernizr / Propriedade do objeto JavaScript / Classe do CSS
applicationCache applicationcache
Canvas canvas

Se no teste a Modernizr.canvas retornar como "false", você pode baixar o FlashCanvas ou excanvas.

Canvas Text canvastext
Drag and Drop draganddrop
hashchange Event hashchange
History Management history
HTML5 Audio audio

Se o suporte à característica de Audio for detectada, a Modernizr verifica quais formatos o navegador utilizado pode reproduzir. Atualmente, a Modernizr testa as extensões ogg, mp3, wav e mp4.

Importante: Os valores para essas propriedades não são verdades booleanas. Ao invés disso, a Modernizr compara as especificações da HTML5 esperando obter retorno de uma string que representa o nível de confiança do navegador que pode executar determinado codec. Esses valores de retorno são strings vazias (resposta negativa), "talvez" ou "provavelmente". A string vazia é "false", em outras palavras: Modernizr.audio.ogg = '  ' e '  ' == false.

var audio = new Audio(); audio.src = Modernizr.audio.ogg ? 'background.ogg' : Modernizr.audio.mp3 ? 'background.mp3' : 'background.m4a'; audio.play();
HTML5 Video video

Veja o Video for Everybody por Kroc Camen, script em JavaScript criado para usar na tag video do HTML5 e que proporciona uma gracioso fallback para todos os navegadores. Com a detecção do video pela Modernizr, você pode utilizar CSS e JavaScript para estilizar os controles, desde que o navegador ofereça suporte à video.

Se o suporte a video for detectado, a Modernizr avalia qual formato o navegador está apto a reproduzir. Atualmente, a Modernizr verifica as seguintes extensões: ogg, webm e h264.

Veja também a nota Importante do tópico acima, sobre audio, pois os valores de retorno se aplicam também ao video.

IndexedDB indexeddb
Input Attributes

O HTML5 introduziu diversos novos atributos para os elementos input. A Modernizr testa os seguintes:

autocomplete, autofocus, list, placeholder, max, min, multiple, pattern, required, step.

Esses novos atributos pode fazer coisas como: habilitar o auto complemento nativo, imitar o elem.focus() quando a página é carregada, apresentar uma sugestão no campo input do formulário, e realizar a validação client-side.

Visite a página HTML5 input attribute support, de Mike Taylor para ver os atributos em ação!

Input Types

O HTML5 introduziu 13 novos valores para a tag do tipo <input>. São as seguintes:

search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color.

Esses novos tipos podem ativar nativamente seletores de datas (datapickers), seletores de cores (colorpickers), validação de URL, e por aí vai. Se o navegador não suportar o tipo informado, ele será renderizado com um campo de texto (text field). Modernizr não consegue verificar que as datas informadas podem se transformar em um seletor de datas, não consegue detectar um conjunto de cores como um seletor de cores, e por aí vai. Ele vai apenas detectar que os dados informados são "limpos" com base na especificação. No caso do Webkit, foi recebida a confirmação de que a "limpeza" não será realizada se não houver algum widget UI em seu devido lugar.

localStorage localstorage
Cross-window Messaging postmessage
sessionStorage sessionstorage
Web Sockets websockets
Web SQL Database websqldatabase
Web Workers webworkers

Miscelânia

Característica (Feature) Modernizr / Propriedade do objeto JavaScript / Classe do CSS
Geolocation API geolocation
Inline SVG inlinesvg
SMIL smil
SVG svg
SVG Clip paths svgclippaths
Touch Events touch

O teste realizado pela Modernizr.touch apenas indica se o navegador suporta eventos sensíveis ao toque, o que não necessariamente significa, um aparelho touchscreen. Por exemplo, o fones Palm Pre/WebOS (touch) não é sensível ao toque e portanto, falha no teste. Adicionalmente, o Chrome (versão Desktop) dizia oferecer suporte ao toque, o que recentemente foi retificado. Modernizr também testa para suporte Multitouch via media query, maneira com a qual o Firefox 4 se apresenta para tablets com sistema Windows 7. Para mais informações, veja o Modernizr touch tests.

if (Modernizr.touch){ // relacionar ao touchstart, touchmove, etc e ver `event.streamId` } else { // relacionar a clique normal, movimento do mouse, etc }
WebGLwebgl
if (Modernizr.webgl){ loadAllWebGLScripts(); // webgl ativos podem facilmente ter > 300k } else { var msg = 'Utilizando um navegador diferente você sentirá toda a experiência proporcionada pela WebGL aqui: \ get.webgl.org.'; document.getElementById( '#notice' ).innerHTML = msg; }

TESTES ADICIONAIS PARA VERIFICAR A EXISTÊNCIA VIA PLUGINS

Para complementar os testes do Modernizr no modo “core”, muitos outros testes comuns estão disponíveis como Modernizr plugins na pasta /feature-detects/ no github. Se você por acaso não encontrou o teste que necessita realizar nessa página, procure nessa pasta ou tente no issue tracker.

MÉTODOS DA Modernizr

Existe um par de métodos disponíveis, apresentando algumas funcionalidades que você irá gostar se costuma trabalhar bastante com CSS3 ou com design responsivo.

Modernizr.prefixed()

Método JavaScript
Modernizr.prefixed(str)

Modernizr.prefixed() retorna o prefixo ou não-prefixo da propriedade do nome da variável que você inseriu

Modernizr.prefixed('boxSizing') // 'MozBoxSizing'

As propriedades precisam ser declaradas via DOM-style ou camelCase, ao invés utilizar hífens, como por exemplo, 'box-sizing'

Os valores retornados também seguirão variações de camelCase, mas se você precisar mudar o nome e necessitar usar hífens, use isso:

str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

Se você estiver tentando determinar qual o final do evento para fazer um relacionamento com o próximo, você pode fazer algo assim:

var transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd', 'msTransition' : 'msTransitionEnd', // maybe? 'transition' : 'transitionEnd' }, transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ]; // ... relacionando ao evento transEndEventName ...

mq() media query testing

Método JavaScript
Modernizr.mq(str)

Modernizr.mq testa uma consulta de mídia (media query), confrontando o atual estado do navegador.

Alguns detalhes importantes:

  • Se o navegador não suporta media queries de maneira nenhuma (ex. IE´s antigos), o mq() será sempre falso;
  • Um max-width ou orientation query será avaliada contra o estado atual, que poderá se alterar futuramente;
  • Você deve especificar o tipo de media, e pensando assim, todos os tipos são bem-vindos:
Modernizr.mq('only all and (max-width: 400px)')

Exemplo de uso:

Modernizr.mq('only screen and (max-width: 768px)') // true

Extensibilidade

addTest() Plugin API

Método JavaScript
Modernizr.addTest(str, fn)
Modernizr.addTest(str, bool)
Modernizr.addTest({str: fn, str2: fn2})
Modernizr.addTest({str: bool, str2: fn})

Você talvez queira realizar outros testes que a Modernizr não oferece suporte. Para isso, você pode utilizar a função addTest . Por exemplo, alguns usuários requisitaram testes para o bug do double margin quando se usa float, e suporte para o position:fixed nos IE´s. Usando o addTest, você pode adicionar por si mesmo e obter exatamente a mesma API com todos os outros testes suportados.

Novas assinaturas foram inseridas nesse método para aceitar booleanos e objetos no Modernizr 2.

Exemplo de uso:

// Teste para o suporte ao position:fixed Modernizr.addTest('positionfixed', function () { var test = document.createElement('div'), control = test.cloneNode(false), fake = false, root = document.body || (function () { fake = true; return document.documentElement.appendChild(document.createElement('body')); }()); var oldCssText = root.style.cssText; root.style.cssText = 'padding:0;margin:0'; test.style.cssText = 'position:fixed;top:42px'; root.appendChild(test); root.appendChild(control); var ret = test.offsetTop !== control.offsetTop; root.removeChild(test); root.removeChild(control); root.style.cssText = oldCssText; if (fake) { document.documentElement.removeChild(root); } return ret; });

Considerando que o teste acima foi efetuado com sucesso, haverá agora uma classe .positionfixed no elemento HTML e Modernizr.positionfixed será “true”. IE6, é claro, terá agora uma classe .no-positionfixed.

testStyles()

Método JavaScript
Modernizr.testStyles(str,fn)

Modernizr.testStyles() permite que você adicione estilos para o documento e teste-os após isso. Um elemento com o ID de “Modernizr” é inserido na página.

Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule){ Modernizr.addTest('width', elem.offsetWidth == 9); });

testeProp()

Método JavaScript
Modernizr.testProp(str)

Modernizr.testProp() investiga onde determinada propriedade de estilo é reconhecida. Note que os nomes das propriedades devem ser fornecidos usando as variáveis camelCase.

Modernizr.testProp('pointerEvents') // true

testAllProps()

Método JavaScript
Modernizr.testAllProps(str)

Modernizr.testAllProps() investiga onde determinada propriedade de estilo, ou qualquer conjuntos de propriedades de estilos pre-fixados, são reconhecidos. Note que os nomes das propriedades devem ser fornecidos usando as variáveis camelCase.

Modernizr.testAllProps('boxSizing') // true

hasEvent()

Método JavaScript
Modernizr.hasEvent(str [,elem])

Modernizr.hasEvent() oferece suporte a um evento informado, e opcionalmente, um elemento para efetuar testes.

Modernizr.hasEvent('gesturestart', elem) // true

_prefixes & _domPrefixes

Método JavaScript
Modernizr._prefixes   Modernizr._domPrefixes

O prefixo do vendor que você precisará testar. Verifique no código fonte do Modernizr ou abaixo para entender como efetivamente usar o join() nesses arrays para ordenar os testes para suas propriedades de estilos.

Modernizr._prefixes.join('prop' + ':value; '); /* prop:value; -webkit-prop:value; -moz-prop:value; -o-prop:value; -ms-prop:value; -khtml-prop:value; */ 'prop:' + Modernizr._prefixes.join('value; prop:') + 'blah'; /* prop:value; prop:-webkit-value; prop:-moz-value; prop:-o-value; prop:-ms-value; prop:-khtml-value; prop:blah; */ 'prop:value; ' + Modernizr._domPrefixes.join('Prop' + ':value; ') + ':value'; /* prop:value; WebkitProp:value; MozProp:value; OProp:value; msProp:value; Khtml:value */

Já acessaram essa documentação: contador free

Conteúdos da Documentação

  1. Geral
    1. O que é a Modernizr?
    2. Instalando a Modernizr
    3. Polyfills e a Modernizr
    4. Modernizr.(load) tutorial
    5. Como funciona a Modernizr
    6. Elementos HTML5 no IE
    7. Suporte aos Navegadores
  2. Características (features) detectadas pela Modernizr
    1. CSS3 Features
    2. HTML5 Features
    3. Miscelânia
  3. Extensibilidade
    1. addTest() Plugin API
    2. Modernizr.prefixed()
    3. testStyles()
    4. testeProp()
    5. testAllProps
    6. hasEvent()
    7. mq() media query testing
    8. _prefixes & _domPrefixes
Informações Adicionais
Traduzido do original: Modernizr Documentation Tradução: André Buzzo