Os navegadores tradicionais não são completamente substituídos neste momento, dificultando a incorporação dos recursos mais recentes do CSS3 ou HTML5 em seu site. Modernizr surgiu para resolver esse problema. Como uma biblioteca JavaScript de código aberto, o Modernizr detecta o suporte do navegador para recursos CSS3 ou HTML5. A Modernizr não está tentando adicionar recursos que não são suportados por navegadores mais antigos, mas permite modificar o design da página criando configurações de estilo opcional. Ele também pode simular recursos que não são suportados por navegadores mais antigos carregando scripts personalizados.
Modernizr é simples de usar, mas não onipotente. O uso bem -sucedido da Modernizr depende muito das suas habilidades CSS e JavaScript. Este guia permite aprender a definir estilos opcionais para navegadores que não suportam várias colunas ou projeções. Além disso, você pode aprender a obter navegadores mais antigos para validar formulários que usam as propriedades necessárias mais recentes do HTML5 e como carregar seletivamente arquivos de script com base na funcionalidade do navegador.
Modernizr é uma biblioteca JavaScript usada para detectar suporte à funcionalidade do navegador. Atualmente, ao verificar o processamento do navegador de uma série de testes, o Modernizr pode detectar 18 funções CSS3 e mais de 40 funções sobre o HTML5. É mais confiável do que as maneiras tradicionais de detectar nomes do navegador (fungando do navegador). O tempo de execução de um conjunto completo de testes leva apenas alguns microssegundos. Além disso, o site Modernizr usa scripts personalizados para detectar apenas elementos de interesse, alcançando assim a otimização de eficiência.
Ao usar o Modernizr para detectar o suporte ao CSS3, você não precisa ter nenhum conhecimento JavaScript. Você só precisa inserir um arquivo na página da web e ele adicionará um conjunto de classes à tag <html> da página de acordo com a funcionalidade do navegador. Os nomes das classes correspondentes atenderam aos requisitos de padronização e são fáceis de entender. Por exemplo, se o navegador suportar a propriedade Box-Shadow, você precisará adicionar a classe BoxShadow correspondente; Caso contrário, adicione uma classe sem boxshadow. Tudo o que você precisa fazer é criar uma tabela de estilo que use essas classes para fornecer o estilo apropriado para o navegador correspondente.
A Modernizr facilita a implementação de soluções JavaScript, conhecidas como Polyfills - simula recursos relacionados a HTML5 e tecnologias como a geolocalização. No entanto, você precisa ter um entendimento básico do JavaScript para usar esses recursos e tecnologias. O termo Polyfill vem de uma marca britânica de argila que preenche rachaduras (ou seja, o material de enchimento conhecido pelos americanos). Aqui, o Polyfill é usado para preencher as funções do navegador. Às vezes, a Modernizr executa essa tarefa sem problemas. Mas essencialmente, este é apenas um trabalho de patch, para que você não possa confiar nele para produzir exatamente o mesmo resultado alcançado por um navegador vulnerável.
Como outras bibliotecas JavaScript, o Modernizr fornece versões de desenvolvimento e produção. A única diferença em comparação com a maioria das bibliotecas é que os espaços e comentários foram removidos da versão de produção, o que reduz o tamanho dos downloads. Modernizr adota uma abordagem diferente. A versão de desenvolvimento pode ser chamada de pia em uma cozinha em certo sentido - ela contém quase tudo. A versão de produção contém apenas os elementos que você escolhe, o que pode reduzir significativamente os downloads. Em muitos casos, a versão de produção pode ser reduzida a um quarto de tempo do tamanho da versão de desenvolvimento.
Ao testar com o Modernizr, recomendo que você faça o download da versão de desenvolvimento. Depois de dominar como funciona e seus recursos, você pode baixar uma versão de produção personalizada para implantação no seu site.
O arquivo de amostra para este tutorial contém a versão de desenvolvimento 2.0.6 do Modernizr, mas sugiro que você o substitua pela versão atualizada mais recente do site Modernizr.
NOTA: Se você clicar no link de download no menu de navegação principal por engano, verá um grande número de caixas de seleção aparecendo, solicitando que você selecione a ferramenta desejada. Isso está definido para a versão personalizada da produção. Clique no link para a versão de desenvolvimento na parte superior do painel ou clique no botão Voltar no navegador para retornar à página inicial e selecionar o botão de desenvolvimento mostrado na Figura 1.
Como mencionado anteriormente, o Modernizr não tenta adicionar novos recursos aos navegadores mais antigos, mas permite compensar os recursos que faltavam em seu estilo. Para mostrar como isso funciona, o arquivo de exemplo contém uma página chamada css_support_begin.html. Se você carregar esta página em um novo navegador, ele deve parecer a Figura 2.
Figura 2. Firefox 5 exibe a página em formato de várias colunas e adiciona sombras à imagem O estilo desta página é usar column-count e box-shadow do CSS3 para exibir o texto no formato de várias colunas e adicionar sombras à imagem. As versões mais antigas dos navegadores não suportam nenhuma dessas propriedades; portanto, a mesma página no Internet Explorer (IE) 7 se parece com a Figura 3.
No IE9, a mesma página mostra a sombra da imagem, mas o texto é o mesmo que o layout mostrado na Figura 3.
O que você leva ao tentar compensar os recursos ausentes depende dos requisitos do seu esboço de design. Ele envolverá muito trabalho para tentar fazer com que a página pareça exatamente a mesma em todos os navegadores, mas você pode fazer algumas melhorias simples, como circular o texto ao redor da imagem, ajustar as margens esquerdas da imagem ao texto e adicionar limites vagos na parte inferior e à direita da imagem para fazê-la parecer mais tridimensional.
O Modernizr usa o JavaScript para detectar a funcionalidade suportada pelo navegador, mas, em vez de usar o JavaScript para carregar dinamicamente diferentes folhas de estilo, ele usa técnicas muito simples para adicionar classes à tag <html> da página. Então, como designer, cabe a você decidir usar a carcaça CSS para fornecer o estilo apropriado para os elementos de destino. Por exemplo, se a página suportar a propriedade box-shadow , o Modernizr adicionará boxshadow . Se não for suportado, ele é adicionado à classe no-boxshadow como substituto.
Como os navegadores ignoram as propriedades do CSS que eles não podem reconhecer, você pode usar box-shadow com confiança de acordo com suas regras de estilo básico, mas você precisa adicionar um seletor de descendente separado para navegadores mais antigos no seguinte formato:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } Somente os navegadores que não suportam box-shadow terão aula de no-boxshadow , para que outros navegadores não apliquem essa regra de estilo.
Vamos adicionar o Modernizr à página de amostra e verificar as classes que ela adiciona à tag <html>.
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>O Modernizr conta com JavaScript ativado no navegador. Quando está ativado, esta classe é excluída dinamicamente. No entanto, em casos raros, o JavaScript ainda está presente no HTML Makup quando não está ativado, o que permite criar regras de estilo especial para esses visitantes, se necessário.
</style> <script src=js/modernizr.js></script> </head> NOTA: Se você usar o painel Inserir ou o menu Inserir, o Dreamweaver adicionará type=text/javascript à tag <script> inicial. Isso não é mais necessário no HTML5, mas mantê -lo não causará nenhum dano.
Nota: Se a sua versão Dreamweaver não tiver código ao vivo (ou você estiver usando um editor HTML diferente), você poderá verificar o código gerado usando ferramentas de desenvolvimento fornecidas pela maioria dos novos navegadores ou Firebug fornecidos pelos navegadores do Firefox.
Conforme mostrado na Figura 4, a classe no-js foi substituída pela classe js , que indica que o JavaScript foi ativado.
A Tabela 1 lista os nomes de classe usados pelo Modernizr para indicar suporte ao CSS3. Se uma função não o suportar, o nome da classe correspondente será prefixado com no- .
Tabela 1. Funções CSS3 detectadas pelo Modernizr
Recursos CSS | Classe Modernizr (propriedades) |
@font-face | fontface |
::before e ::after pseudo-elementos | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
Animações CSS | cssanimations |
Transformações 2D CSS | csstransforms |
Transformações 3D CSS | csstransforms3d |
Transições CSS | csstransitions |
layout flexível da caixa | flexbox |
Gradientes | cssgradients |
hsla() | hsla |
Layout de várias colunas | csscolumns |
múltiplos fundos | multiplebgs |
opacity | opacity |
reflexão | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
Não importa onde um atributo CSS específico seja testado, o nome da classe e o nome da propriedade são os mesmos, no entanto, isso requer a remoção de qualquer hífen ou colchetes. Outras classes são nomeadas após o módulo CSS3 que se referem.
Consulte a Tabela 1, você pode ver que o Modernizr usa boxshadow e csscolumns para mostrar o suporte para propriedades box-shadow e layout de várias colunas, respectivamente. Portanto, você pode usar as classes no-boxshadow e no-csscolumns para criar regras de estilo especial para navegadores que não suportam esses recursos.
Para garantir que a diretiva seja simples, demonstrarei apenas um exemplo de declarações de CSS. Você pode digitá -los diretamente na exibição de código ou usar a nova caixa de diálogo de regra CSS.
.no-boxshadow img . #8A8A8A ). As regras de estilo resultantes devem ser assim:.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }Isso não é tão atraente quanto sombras translúcidas, mas, apesar disso, ainda permite que a imagem se projete um pouco do fundo.
.no-csscolumns img . .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img . As duas regras têm a mesma particularidade; portanto, se forem revertidas, a margem esquerda de 10 pixels .columns img pode substituir a nova regra que você acabou de criar. Você pode renomear .no-csscolumns img para .no-csscolumns .columns img para fornecer maior especificidade, mas é melhor garantir que quanto mais simples o seletor, melhor. (A propósito, se você não tiver certeza de qual é a particularidade , confira o artigo de Adrian Senior, compreendendo a especificidade. É publicado há muito tempo, mas é valioso.) Neste exemplo simples, criei estilos especiais para versões mais antigas de navegadores usando apenas a classe prefixada com no- . No entanto, por sua capacidade, não faz nada que você use as duas classes (com ou sem prefixos) para criar estilos diferentes para o seu navegador. Por exemplo:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }Às vezes, essa abordagem é razoável, por exemplo, se você deseja criar um layout completamente diferente para cada nível de suporte. Mas se for apenas uma questão de fornecer estilos selecionáveis para navegadores mais antigos, não esqueça que o navegador ignora as propriedades que eles não reconhecem. Se você usar a classe Modernizr para todos os estilos, sua página será completamente sem seleção em um navegador de Disable JavaScript.
Modernizr adiciona o nome da classe para a tag <html> inicial para reproduzir um objetivo duplo. Quando as páginas estão carregando, elas também são os nomes das propriedades JavaScript criadas pelo objeto Modernizr. A Tabela 1 lista os nomes das classes e atributos relacionados ao CSS. A Tabela 2 lista as classes e atributos restantes relacionados ao HTML5 e às tecnologias relacionadas, como locais geográficos.
Tabela 2.
Recursos relacionados ao HTML5 | Classe Modernizr (propriedades) |
Cache do aplicativo | applicationcache |
Áudio | audio. type (ogg, mp3, wav, m4a) |
Tela | canvas |
Texto de tela | canvastext |
Arraste e solte | draganddrop |
Atributos de entrada do formulário | input. attributeName |
Formulário de elementos de entrada | inputtypes. elementName |
Geolocation | geolocation |
evento de hashchange | hashchange |
Gerenciamento de história | history |
Indexeddb | indexeddb |
Inline SVG | inlinesvg |
Armazenamento local | localstorage |
Mensagens | postmessage |
Armazenamento de sessão | sessionstorage |
Smil | smil |
Svg | svg |
Caminhos de clipe SVG | svgclippaths |
Toque em eventos | touch |
Vídeo | video. type (ogg, webm, h264) |
Webgl | webgl |
Soquetes da web | websockets |
Banco de dados SQL da Web | websqldatabase |
Trabalhadores da web | webworkers |
Na maioria dos casos, todos os atributos listados na Tabela 1 e na Tabela 2 retornam true ou false . Portanto, você pode testar o armazenamento local usando JavaScript, como mostrado abaixo:
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } No entanto, em termos de audio e video , o valor de retorno é uma string que indica que o navegador é capaz de lidar com um certo tipo de nível de confiança. De acordo com a especificação HTML5, uma sequência vazia significa que o tipo não é suportado. Se esse tipo for suportado, o valor de retorno será talvez ou provavelmente. Por exemplo:
if (Modernizr.video.h264 == ) { // h264 is not supported } O HTML5 adiciona muitas novas propriedades de formulário, como autofocus , que coloca automaticamente o cursor em um campo especificado quando a página é carregada pela primeira vez. Outra propriedade útil é required , que impedirá que os navegadores compatíveis com HTML5 enviem formulários se um campo necessário for deixado em branco (veja a Figura 6).
Isso é ótimo, mas deixará você com uma pergunta: o que você deve fazer com versões mais antigas do seu navegador?
Uma solução é ignorá-los e deixá-los para a função de verificação do servidor para verificações finais. Se o navegador não reconhecer o atributo required , outra maneira amigável de lidar com essa situação é criar um pequeno script para verificar os campos necessários. As instruções a seguir mostram como executar operações correspondentes com a ajuda da Modernizr.
</style> <script src=js/modernizr.js></script> </head> <script> separado e crie um manipulador de eventos assim que a página for carregada para facilitar a execução do código:<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus e as propriedades required . A maneira de lidar com autofocus é simples:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it } Essa condição testa Modernizr.input.autofocus , se autofocus não for suportado, o valor retornado será false . No entanto, o operador lógico não (um ponto de exclamação) pode reverter o significado; portanto, se autofocus não for suportado, o resultado da avaliação dessa condição é true e inputs[0].focus() coloca o cursor no primeiro campo de entrada.
required , não for suportado, agora adicione código para facilitar a verificação dos campos necessários. O código completo do manipulador de eventos é o seguinte:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } O novo código produz uma função que, ao enviar o formulário, pode iterar em todos os elementos de entrada para encontrar campos com os atributos required . Quando encontra um campo, ele remove o início e o final dos espaços em branco do valor e, se o resultado for uma string vazia, adicionará o resultado à matriz required . Depois que todos os campos foram verificados, se alguns elementos forem incluídos na matriz, o navegador exibe um aviso relacionado ao nome do campo ausente e impede que o formulário seja enviado.
NOTA: O Safari 5.1 relatou incorretamente que suporta required , por isso envia o formulário sem validar os campos necessários. Esta é uma falha do Safari, mas no Modernizr não existe.
Quando você está pronto para implantar seu site, é recomendável criar uma versão de produto personalizada do Modernizr que contém apenas os elementos que você realmente precisa. Isso pode reduzir o tamanho da biblioteca Modernizr de 44kb para 2kb de acordo com a funcionalidade que você selecionou. O intervalo das opções atuais é mostrado na Figura 8.
Figura 8. A página de download modernizr permite selecionar apenas os recursos que você precisaAs opções podem ser facilmente agrupadas nas seguintes categorias: CSS3, HTML5, MISC (ellante) e extra. Clique no botão Alternar ao lado dos três primeiros títulos para selecionar ou descartar todas as caixas de seleção na categoria de seleção.
Por padrão, a categoria extra selecionará as três entradas a seguir:
Se você selecionar alguma opção na categoria CSS3, as opções na categoria extra a seguir também serão selecionadas:
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()Não desmarque essas opções. Fazer isso cancelará automaticamente todas as opções que você selecionou na categoria CSS3.
O MQ Polyfill (Responst.js) na categoria extra adicionou um script que permite que as consultas de mídia no IE 6-8 obtenham suporte limitado. Quando você seleciona esta opção, ele seleciona automaticamente as consultas de mídia e o Modernizr.teststyles (). Para saber mais sobre as consultas de mídia Polyfill (Responst.js), visite https://github.com/scottjehl/Rand.
Somente usuários avançados estarão interessados em outras opções na categoria extra. Para mais detalhes sobre o que são e como usá -los, consulte a seção de extensibilidade da documentação Modernizr.
A descrição a seguir descreve como criar uma versão de produto personalizada do Modernizr para o arquivo de amostra. Esta versão personalizada é necessária para exercícios subsequentes, que mostrarão como carregar arquivos JavaScript externos usando Modernizr.load() .
Ao criar uma versão de produção personalizada do Modernizr, a opção que contém Modernizr.load() deve ser selecionada por padrão. Modernizr.load() é um alias para yepnope() , que é um carregador de script independente desenvolvido de maneira síncrona com o Modernizr. Para ilustrar como usá -lo, dou um exemplo simples. Eu movi o script correspondente do exigido.html para check_required.js e fiz três pequenas alterações para facilitar a remoção dos testes modernizr e atribuí -lo a uma variável chamada init . O script revisado se parece com o seguinte:
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }; Uma grande vantagem do Modernizr.load() é que ele pode carregar scripts condicionalmente com base nos resultados dos recursos do navegador de teste - é por isso que foi chamado yepnope() no início. Ele pode carregar scripts externos de forma assíncrona - em outras palavras, pode carregar scripts externos após o navegador ter carregado o Modelo de Objetos do Documento (DOM) - para que possa ajudar a melhorar o desempenho do seu site.
A sintaxe básica do Modernizr.load() é passar um objeto com os seguintes atributos para ele:
test : a propriedade Modernizr que você deseja detectar. yep : Se o teste for bem -sucedido, a localização do script que você deseja carregar. Use uma matriz de vários scripts. nope : se o teste falhar, a localização do script que você deseja carregar. Use uma matriz de vários scripts. complete : uma função que é executada assim que um script externo for carregado (opcional). Tanto yep quanto nope são opcionais, desde que você forneça um deles.
Para carregar e executar scripts em check_required.js, você precisa adicionar o seguinte bloco <script> depois que Modernizr.adc.js foi anexado à página (o código está localizado em necessidades_load.html):
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> É exatamente o mesmo de antes, mas pode reduzir a carga de download de navegadores que já suportam required .
Para testar várias condições, você pode passar um conjunto de objetos para Modernizr.load() . Para mais detalhes, consulte o tutorial Modernizr.load () sobre a documentação Modernizr.
O Modernizr é uma ferramenta poderosa e útil, mas isso não significa que você deve usá -la. Nem todos os casos são necessários para usar o Modernizr para fornecer vários estilos ao navegador. Se o seu foco principal é o Internet Explorer, considere usar comentários condicionais do IE. Você também pode usar a pilha CSS para substituir alguns estilos. Por exemplo, use primeiro a cor hexadecimal e substitua -a com rgba() ou hsla() . As versões mais antigas dos navegadores usarão o primeiro valor e ignorarão o segundo valor.
O Modernizr realmente se torna realidade quando é combinado com poli -preenchimentos e outros JavaScript. Mas lembre -se, geralmente é fácil criar seus próprios testes adequados para suporte para recursos. Por exemplo, a seguir é todo o código que você teste se um navegador suporta required (o código está localizado em necessidades_nomodernizr.html):
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }Este tutorial abordou todas as principais características do Modernizr. Para obter mais informações sobre esses recursos, consulte a documentação oficial correspondente, localizada em http://www.modernizr.com/docs/. Além disso, você pode encontrar os seguintes recursos úteis:
yepnope() , que foi mesclada em Modernizr.load() em Modernizr. +