Página Inicial>Tutorial de web design>Tutorial HTML

Conte -nos sobre como usar o Modernizr

Autor：Eve Cole Data da Última Atualização：2025-08-23 02:32:01

Já existem muitas apresentações chinesas sobre o Modernizr, você pode pesquisar no Baidu ou Gu Ge. Você também pode lê-lo no Blue Ideal, este artigo é relativamente abrangente: nascido em Modernizr para HTML5 e CSS3;

Quais são os usos do Modernizr, além de fornecer julgamento ambiental básico e suporte semântico para HTML5 e CSS3? Vamos aprender juntos hoje.

1. Comece aplicando modernizr

Esta parte é explicada em detalhes no Modernizr, nascido em HTML5 e CSS3, incluindo alterações nos elementos HTML após as execuções do Modernizr, etc. Recomenda-se que os novos alunos possam lê-la com cuidado.

Você também pode ir diretamente para o site oficial http://modernizr.com/docs/ para obter mais informações.

2. Uso de Modernizr.load

1. Carregar jQuery

Vamos primeiro dar uma olhada nos métodos e códigos para carregar o jQuery no site oficial:

  1. Modernizr.load ([{
  2. LOAD: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
  3. Complete: function () {
  4. if (! window.jQuery) {
  5. Modernizr.Load ('JS/LIBS/JQuery-1.7.1.min.js');
  6. }
  7. }
  8. }]);

Este código foi testado e descobriu que, se você não puder acessar o CDN fornecido pelo Google normalmente, o navegador relatará um erro e a mensagem é

  1. Gethttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (Notfound)
  2. Modernizr.custom.js: 4ResourceInterpretEdasimageButtransferred com MimetypeApplication/x-Javascript: JS/LIBS/jQuery-1.7.1.min.js.

A partir das informações de feedback, podemos ver que o formato de arquivo analisou a Modernizr ao recarregar o jQuery local está incorreto. Não sei se isso vai acontecer, mas isso afeta o uso. Entre todos os resultados da pesquisa chinesa, nenhuma explicação ou pesquisa sobre esse fenômeno foi encontrada, e as habilidades pessoais eram limitadas, por isso era impossível investigar em profundidade. Acabei de obter uma solução temporária do StackOverflow, o código é o seguinte:

  1. <scripttype = text/javascript> // <! [CDATA [
  2. Modernizr.load ([{
  3. Load: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
  4. Complete: function () {
  5. if (! window.jQuery) {
  6. Modernizr.load ([{
  7. Carga: 'js/jquery.min.js',
  8. retorno de chamada: função (url, resultado, chave) {
  9. //console.log('jQueryonlocalwasload! ');
  10. init ();
  11. }
  12. }]);
  13. }outro{
  14. //console.log('jQueryOngogleWasLoaded! ');
  15. init ();
  16. }
  17. }
  18. }]);
  19. functionInit () {
  20. jQuery (documento) .ready (function () {
  21. $ ('corpo'). Prepend ('helloworld!');
  22. });
  23. }
  24. //]]> </script>

2. Suporte para a versão inferior, ou seja, diagramas PNG interceptados

Na descrição da documentação de Yepnopejs, há uma seção sobre o uso de plug-ins para o IE! Prefixo.

Na maioria das vezes, quando estamos fazendo compatibilidade com interface front-end, precisamos considerar os detalhes de diferentes versões do IE. Embora agora estejamos enfatizando o abandono do IE6, a maioria dos clientes ainda está usando esta versão. Para garantir a consistência da interface, geralmente podemos ver o seguinte código de formato:

  1. <!-[ifltie7]> <htmlclass = ie6> <! [endif]->
  2. <!-[ifie7]> <htmlclass = ie7> <! [endif]->
  3. <!-[ifie8]> <htmlclass = ie8> <! [endif]->
  4. <!-[ifie9]> <htmlclass = ie9> <! [endif]->
  5. <!-[if (gtie9) |! (ie)]> <!-> <!-<! [endif]->

Esta é uma instrução de formato condicional para filtragem de filtragem permitida no HTML. Através da filtragem, podemos obter alguns hacks CSS para diferentes versões do IE. Esta parte do conteúdo pode ser lida e estudada em Paulirish.com.

Existem muitas soluções para os diagramas de PNG transparentes. Aqui estão algumas tentativas de introduzir o segmento de código JS para resolver o PNG transparente através do Modernizr. O código específico é o seguinte:

  1. <scripttype = text/javascript> // <! [CDATA [
  2. Modernizr.load ([
  3. {
  4. LOAD: 'js/yepnope.ie_prefix.js', // Carregar o plugin de prefixo do Yepnope
  5. Complete: function () {
  6. yepnope ([{
  7. Carregar: 'iElt8!
  8. Complete: function () {
  9. ie_png.fix ('img');
  10. }
  11. }]);
  12. }
  13. }
  14. ]);
  15. //]]> </script>

Esta é uma tentativa interessante.

3. Determine o suporte do navegador para CSS3 ou HTML5

Esta parte é a característica básica do modernizr. Usando esses recursos básicos, não podemos não apenas tentar novos recursos de CSS3 ou HTML5, mas também garantir que forneçamos instruções amigáveis em ambientes não suportados. Dê uma olhada no seguinte código:

  1. <scripttype = text/javascript> // <! [CDATA [
  3. Modernizr.load ({
  4. Teste: Modernizr.csstransforms3d &#038; & Modernizr.csstransitions, // julga se o cliente atual suporta variantes tridimensionais e transições de gradiente
  5. sim: ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'.'js/jquery.hoverfold.js'], // Se suportado, carregar JS relacionado
  6. Não: 'CSS/Fallback.css', // Outros carregam os estilos relevantes usados para lembretes amigáveis
  7. Retorno de chamada: function (url, resultado, chave) {// conteúdo de retorno de chamada
  9. if (url === 'js/jQuery.hoverfold.js') {// Se o caminho do último arquivo JS carregado for o mesmo, o aplicativo
  10. $ ('#grade'). hoverfold ();
  11. }
  13. }
  14. });
  16. //]]> </script>

Este código é cortado de um parágrafo no documento de apresentação nos efeitos de pairar em miniatura em 3D. Ao analisar e experimentar os tutoriais produzidos pelo autor, não podemos apenas aprender parte do uso do Modernizr, mas também experimentar alguns dos efeitos poderosos e deslumbrantes do CSS3.

O conteúdo acima ainda está muito organizado e o objetivo é usá -lo para aprender e entender as características e métodos de uso do Modernizr (Yepnope). Ao mesmo tempo, também devemos aumentar o aprendizado e a atenção do CSS3 e HTML5.

O texto inteiro acabou.

Artigos Relacionados