Como usar Modernizr

Modernizr é uma pequena biblioteca Javascript que detecta a disponibilidade das novas características do HTML5 e CSS3 nos browsers. Muitas destas características já estão implementadas nos browsers, mas é muito chato você decorar quais novidades os browsers já estão suportando. O que a Modernizr faz é simples: ela te diz quais features um determinado browser suporta e insere classes no HTML para que você possa utilizar para fazer uma versão alternativa de visual ou solução.

Alguns browsers não aceitam as novas features de CSS3 e HTML5. Saiba como detectá-los e tratá-los com a biblioteca Modernizr.

Entenda que a Modernizr não é um sniffing de browser. Ela é diferente. A Modernizr faz o trabalho de detectar das seguintes formas:

Ela testa 40 features de CSS3 e HTML5 em alguns milisegundos.
Depois ela cria objetos javascript que contém os resultados destes testes.
Aí são adicionadas classes no elemento HTML descrevendo exatamente quais propriedades e novidades são ou não nativamente suportadas.
Depois disso você consegue ter os resultados descritos nos navegadores dinamicamente e então pode tomar decisões criando alternativas para aquelas propriedades não suportadas pelos browsers antigos.

Como funciona

É simples: primeiro você baixa a versão mais atual da biblioteca no endereço https://www.modernizr.com/. O interessante é que você tem a opção para personalizar a biblioteca, indicando quais features você quer que a Modernizr teste no seu projeto.

Depois você inclui esse pacote no seu HTML:

    <!DOCTYPE html>

    <html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Teste de Modernizr</title>
        <script src="modernizr-2.0.6.js"></script>
    </head>
    <body>

    </body>
    </html>

Feito isso, insira uma classe no-js no elemento HTML:

<html class="no-js" lang="pt-br">

Quando a Modernizr rodar, ela irá substituir essa classe para uma js se o browser estiver com o Javascript ligado, já te dando um feedback para tomar alguma atitude se o usuário estiver com o Javascript desligado.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Compartilhar: | | Whatsapp |
hits