Cuéntanos cómo usar Modernizr

Autor：Eve Cole Fecha de actualización：2025-08-23 02:32:01

Ya hay muchas presentaciones chinas sobre Modernizr, puede buscar a través de Baidu o Ge Ge. También puede leerlo en Blue Ideal, este artículo es relativamente completo: Modernizr nacido para HTML5 y CSS3;

¿Cuáles son los usos de Modernizr además de proporcionar un juicio básico del medio ambiente y el apoyo semántico para HTML5 y CSS3? Aprendamos juntos hoy.

1. Comience aplicando Modernizr

Esta parte se explica en detalle en Modernizr nacido para HTML5 y CSS3, incluidos los cambios en los elementos HTML después de que se ejecuta Modernizr, etc. Se recomienda que los nuevos estudiantes puedan leerlo cuidadosamente.

También puede ir directamente al sitio web oficial http://modernizr.com/docs/ para obtener más información.

2. Uso de Modernizr.Load

1. Cargar jQuery

Primero echemos un vistazo a los métodos y códigos para cargar jQuery en el sitio web oficial:

Modernizr.load ([{
Carga: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
Complete: function () {
if (! Window.jquery) {
Modernizr.load ('js/libs/jQuery-1.7.1.min.js');
}
}
}]);

Este código se ha probado y descubrió que si no puede acceder al CDN proporcionado por Google normalmente, el navegador informará un error y el mensaje es

Gethttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (Notfound)
Modernizr.custom.js: 4ResourceinterpretedasiMageButtransfered con mimetypeApplication/x-javaScript: js/libs/jQuery-1.7.1.min.js.

De la información de comentarios, podemos ver que el formato de archivo analizado por Modernizr al recargar jQuery local es incorrecto. No sé si esto sucederá, pero esto afecta el uso. Entre todos los resultados de búsqueda chinos, no se encontró ninguna explicación o investigación sobre este fenómeno, y las habilidades personales eran limitadas, por lo que era imposible investigar en profundidad. Acabo de obtener una solución temporal de StackOverflow, el código es el siguiente:

<scriptType = text/javascript> // <! [Cdata [
Modernizr.load ([{
Carga: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',,
Complete: function () {
if (! Window.jquery) {
Modernizr.load ([{
Carga: 'js/jQuery.min.js',
devolución de llamada: function (url, resultado, tecla) {
//console.log('jqueryonlocalwasloaded! ');
init ();
}
}]);
}demás{
//console.log('jqueryOngogleWasloaded! ');
init ();
}
}
}]);
functionInit () {
jQuery (documento) .Ready (function () {
$ ('Body'). Prepend ('Helloworld!');
});
}
//]]> </script>

2. Soporte para la versión inferior, es decir, diagramas de PNG interceptados

En la descripción de la documentación de Yepnopejs, ¡hay una sección sobre el uso de complementos para IE! Prefijo.

La mayoría de las veces cuando estamos haciendo compatibilidad con la interfaz de front-end, tenemos que considerar los detalles de diferentes versiones de IE. Aunque ahora estamos enfatizando el abandono de IE6, la mayoría de los clientes todavía están usando esta versión. Para garantizar la consistencia de la interfaz, generalmente podemos ver el siguiente código de formato:

<!-[ifltie7]> <htmlclass = ie6> <! [endif]->
<!-[ifie7]> <htmlclass = ie7> <! [endif]->
<!-[ifie8]> <htmlclass = ie8> <! [endif]->
<!-[ifie9]> <htmlclass = ie9> <! [endif]->
<!-[if (gtie9) |! (es decir)]> <!-> <!-<! [endif]->

Esta es una declaración de formato condicional para el filtrado de filtrado permitido en HTML. A través del filtrado, podemos lograr algunos hacks CSS para diferentes versiones de IE. Esta parte del contenido se puede leer y estudiar en Paulirish.com.

Hay muchas soluciones para diagramas de PNG transparentes. Aquí hay algunos intentos de introducir el segmento de código JS para resolver PNG transparente a través de Modernizr. El código específico es el siguiente:

<scriptType = text/javascript> // <! [Cdata [
Modernizr.load ([[
{
Carga: 'js/yepnope.ie_prefix.js', // cargar yepnope es un complemento de prefijo
Complete: function () {
yepnope ([{
Carga: 'IELT8! JS/IE_PNG.JS', // El complemento solo se puede filtrar después de cargarlo normalmente (cargar ie_png.js para versiones por debajo de IE8)
Complete: function () {
ie_png.fix ('img');
}
}]);
}
}
]);
//]]> </script>

Este es un intento interesante.

3. Determine el soporte del navegador para CSS3 o HTML5

Esta parte es la característica básica de Modernizr. Usando estas características básicas, no solo podemos probar nuevas características de CSS3 o HTML5, sino que también nos aseguramos de dar indicaciones amistosas en entornos no respaldados. Eche un vistazo al siguiente código:

<scriptType = text/javascript> // <! [Cdata [
Modernizr.load ({
Prueba: Modernizr.csstransforms3d & & Modernizr.csstransitions, // juzga si el cliente actual admite variantes tridimensionales y transiciones de gradiente
Sí: ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'], // si está compatible con JS relacionado con la carga.
No: 'CSS/Fallback.css', // Otro Cargue los estilos relevantes utilizados para recordatorios amigables
devolución de llamada: function (url, resultado, clave) {// contenido de devolución de llamada
if (url === 'js/jQuery.hoverfold.js') {// Si la ruta del último archivo JS cargado es la misma, la aplicación
$ ('#grid'). Hoverfold ();
}
}
});
//]]> </script>

Este código se corta de un párrafo en el documento de presentación en los efectos de la miniatura 3D. Al analizar y experimentar los tutoriales producidos por el autor, no solo podemos aprender parte del uso de Modernizr, sino también experimentar algunos de los efectos poderosos y deslumbrantes de CSS3.

El contenido anterior aún está muy aproximadamente organizado, y el propósito es usarlo para aprender y comprender las características y los métodos de uso de Modernizr (Yepnope). Al mismo tiempo, también debemos mejorar el aprendizaje y la atención de CSS3 y HTML5.

Todo el texto ha terminado.