Com o rápido desenvolvimento de HTML5 e CSS3, mais e mais tags semânticas e recursos legais foram aplicados ao desenvolvimento de aplicativos da Web. Os principais fabricantes de navegadores começaram a apoiar esses novos recursos, e os desenvolvedores da Web também estão interessados em experimentar esses novos recursos para desenvolver aplicativos mais coloridos e interessantes. No entanto, os problemas de compatibilidade da versão causados pelo apoio desigual desses novos recursos (especialmente o IE indutor de cabeça) são sempre um pesadelo que permanece nas mentes dos desenvolvedores. Os hábitos de uso tradicionais dificultam a abandona versões antigas dos navegadores, e os desenvolvedores só podem escolher testes manuais, testes e testes.
Para resolver esse problema, a Modernizr surgiu. Seu nome parece um pouco como modernizar e, de fato, o nome se originou do objetivo de tornar a experiência de desenvolvimento mais moderna, mas não é uma tentativa de modernizar o navegador antigo, ou seja, ele suporta esses novos recursos (embora você possa realmente fazer com que o navegador suporta certos novos recursos que não são suportados pela adição de calos/poli -preenchimento, como serão cobertos posteriormente).
A Modernizr é uma biblioteca JS de código aberto que detecta o suporte dos navegadores para recursos HTML5 e CSS3. O famoso site de compatibilidade do navegador HTML5/CSS3 FindMeByip é baseado nessa estrutura. Podemos usá -lo para detectar se o navegador suporta algum novo recurso e até carregar scripts adicionalmente para atender às suas necessidades para carregar dinamicamente diferentes arquivos JS de acordo com diferentes situações para reduzir downloads e melhorar o desempenho.
A Modernizr fornece duas versões: desenvolvimento e produção. A versão de desenvolvimento inclui a detecção de todos os novos recursos HTML5 e CSS3, adequados para aprendizado e teste. Para iniciantes que estão apenas começando a usar o Modernizr, Bella recomenda que você use esta versão. Depois de familiarizar -se com o princípio de trabalho da Modernizr, você pode usar a versão personalizada da produção. Você pode baixar apenas tantos recursos que você precisa detectar para reduzir bastante o número de downloads, o que pode melhorar ligeiramente o desempenho do seu programa até certo ponto. Você pode baixar essas duas versões em http://modernizr.com/download/, clique no link da versão de desenvolvimento na página para baixar a versão de desenvolvimento ou viu a seguinte página de exibição de recursos
Você pode verificar qualquer recurso HTML5 ou CSS3 que deseja testar, mas por padrão, a categoria extra será selecionada da seguinte maneira:
a) HTML5 shiv v3.6: adiciona um script-html5 shim força o IE6-8 a projetar e imprimir corretamente os elementos HTML5. Se você planeja usar novas tags semânticas HTML5, como <weweler>, <weeber>, <VN>, <Section>, <Artigo>, etc., precisará selecionar esta opção.
b) Modernizr.load (yepnope.js): adiciona um carregador de script opcional que não está incluído na versão de desenvolvimento. Aumenta 3KB de downloads; portanto, se você não precisar, poderá desistir de escolher.
c) Adicionar classes CSS: ele adiciona a classe Modernizr à tag de partida. Se você deseja detectar suporte para recursos CSS3, deve selecionar esta opção.
O método de usar o Modernizr é muito simples. Depois de baixar a versão de desenvolvimento, você só precisa apresentar o arquivo da biblioteca JS na página, como:
1 | < script type = text/javascript src = > js/modernizr.js script ></ |
Depois de adicionar a referência Modernizr, quando o programa JS é executado, ele adicionará um lote de nomes de classe CSS ao elemento HTML. Esses nomes de classe marcam que os recursos suportam e quais recursos não suportam no navegador atual. Se ele suportar, o nome do recurso correspondente será exibido. Se não o suportar, o nome sem recurso será exibido. Por exemplo, se o navegador detectado suportar o CSS3 Property Boxshadow, o Modernizr adicionará a classe Boxshadow à tag; caso contrário, a classe No-BoxShadow será adicionada. A figura abaixo mostra o suporte para novos recursos HTML5 e CSS3 no Chrome 23.0.1271.64.
Em seguida, você só precisa definir as informações de estilo correspondentes em sua folha de estilo CSS, você pode defini -las como abaixo:
1 | .boxshadow #MyContainer { |
2 | border : none ; |
3 | -webkit-box-shadow: #666 1px 1px 1px ; |
4 | -moz-box-shadow: #666 1px 1px 1px ; |
5 | } |
6 | .no-boxshadow #MyContainer { |
7 | border : 2px black solid ; |
8 | } |
Como o navegador ignora o recurso CSS3 não suportado, se a versão atual do navegador não suportar a propriedade Boxshadow, ela ignorará a classe Boxshadow e, em vez disso, se referirá aos estilos definidos no NO-BoxShadow, economizando a lógica problemática de detectar o nome do navegador no programa JS.
Obviamente, quando o cenário do seu aplicativo exige que você determine se um novo recurso é suportado no programa e fornecer lógica de processamento diferente, você também pode usar o Modernizr para fazer julgamentos facilmente. No momento, você precisa usar um objeto global chamado Modernizr criado pela Modernizr. O conteúdo é uma lista de resultados booleanos fornecidos para cada recurso detectado. Se o navegador suportar a propriedade BoxShadow, o valor do Modernizr.BoxShadow será verdadeiro, caso contrário, será falso. Portanto, depois de introduzir o arquivo da biblioteca, você também pode usar esse método para detectar o suporte do navegador para esse recurso. Este objeto JS também contém informações mais detalhadas para determinadas funções. Por exemplo, o Modernizr.Video.H264 informará se o navegador suporta este codec especial, e Modernizr.InputTypes.search informará se o navegador atual suporta o novo tipo de entrada de pesquisa.
Além disso, se o Modernizr não contiver os recursos que você precisa detectar, você poderá chamar a função adicional de adição encapsulada Modernizr para testar. Para diferentes recursos de HTML5 e CSS3, podemos encontrar muitas das funções adicionais já escritas no GitHub (por algum motivo, o Modernizr está bloqueado e o projeto agora está hospedado no GitHub). Vamos dar uma olhada em um exemplo simples. Se você deseja testar se o navegador suporta a API GetUSermedia (API na nova tecnologia WebRTC), você pode escrever a seguinte função addTest para testar:
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
Acredito que, após uma breve introdução, você já experimentou a conveniência que a Modernizr pode trazer ao desenvolvimento. Depois de entender as funções da Modernizr e como usar o Modernizr, você também pode aprender muito conhecimento, observando seu código -fonte e se familiarizando com seus princípios de implementação. Embora Bella seja um novato nesse sentido, ela ainda compartilha alguma experiência com você na leitura do código -fonte.
Bella mencionou o objeto global Modernizr anteriormente. Como é criado no Modernizr? Vejamos o seguinte código -fonte:
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | return Modernizr; |
6 | })( this , this .document); |
Essa parte do código usa uma função assíncrona para gerar um espaço para nome (embora não exista espaço para nome real no JS), e a função retorna um objeto Modernizr, que é atribuído a Window.MorderNizr, para que outros programas JS possam usar diretamente os objetos Window.modernizr ou modernizr. O parâmetro passou quando a função é chamada refere -se ao ambiente de contexto da execução da função, ou seja, o objeto global da janela.
Como o Modernizr testa o nível de suporte para novos recursos do CSS3? Acontece que o Modernizr primeiro criará um objeto DOM e, em seguida, usará os atributos de estilo neste objeto para testar se ele suporta os novos recursos CSS3. O código é o seguinte:
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
Para o navegador, se ele pode reconhecer nossa tag HTML recém -criada ou não, podemos estilizá -la, para que possamos estilizar a tag recém -criada aqui. Suponha que queremos testar se o navegador suporta HSLA para definir cores no CSS, podemos primeiro escrever um estilo com o atributo hsla aplicado para colocá -lo sob o rótulo e depois verificar se o valor do estilo contém strings HSLA. Se o navegador não o suportar, não haverá seqüências de caracteres HSLA (porque a ação de colocar o estilo com o atributo HSLA aplicado à tag Modernizr não entrará em vigor). Podemos escrever o seguinte código:
1 | tests[ 'hsla' ] = function () { |
2 | setCss('background-color:hsla(120,40%,100%,.5) '); |
3 | return contains(mStyle.backgroundColor, 'rgba' ) || |
4 | contains(mStyle.backgroundColor, 'hsla' ); |
5 | }; |
Aqui, como alguns navegadores converterão a notação do HSLA em RGBA, também verificamos se existe a sequência RGBA.
Para atributos CSS com prefixo de fornecedores, precisamos dar tratamentos diferentes. Retornando à propriedade BoxShadow, o Modernizr testará se existem propriedades BoxShadow, WebkitBoxshadow, Mozboxshadow, Oboxshadow, MSBoxshadow ou Khtmlboxshadow, sob a variável Mstyle criada acima. Nesse caso, significa que o navegador suporta essa propriedade. Aqui, usamos principalmente duas funções encapsuladas modernizr, uma é testProp () e a outra é testallprops (). Modernizr.TestProp (STR) retorna se uma determinada propriedade de estilo pode ser reconhecida, enquanto o Modernizr.testallProps (STR) retorna se uma determinada propriedade de estilo pode ser reconhecida ou se qualquer propriedade de estilo com um prefixo de fornecedor pode ser reconhecida.
Para mais conhecimento do código-fonte, apresentarei a você depois que Bella tiver pesquisas mais aprofundadas no futuro. Bella acredita que, se você estiver familiarizado com os princípios e o uso da Modernizr, definitivamente o ajudará a melhorar a eficiência do desenvolvimento.
Finalmente, Bella resume brevemente alguns materiais para que todos aprendam com o Modernizr:
1. Site oficial da Modernizr: http://modernizr.com/docs/ você pode aprender conhecimento modernizr, código -fonte e baixar modernizr com ele.
2. URL da suíte de teste Modernizr: http://modernizr.github.com/modernizr/test/index.html Você pode consultar o status de suporte dos recursos HTML5 e CSS3 de cada navegador acima. O método de consulta:
Clique em Mostrar os testes REF de Caniuuse e Modernizr na parte inferior desta página e clique em qualquer um dos links da tabela para os recursos testados HTML5 ou CSS3 para ver o suporte de cada navegador.
3. Informações relacionadas ao script de Shim/Polyfill: https://github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills
4. Endereços de download de várias funções AddTest que detectam novos recursos HTML5 e CSS3:
https://github.com/modernizr/modernizr/tree/master/feature-detects
Este artigo é do Tencent Wuhan Blog. Por favor, indique a fonte ao reimprimir