javascript - passiveeventlisteners - Modernizr con Respond.js
polyfill js (3)
En primer lugar, tengo entendido que al agrupar Modernizr con Respond.js, no se requieren otras codificaciones o pruebas para el soporte de consultas multimedia en IE8 y versiones posteriores. En otras palabras, cuando Respond.js se incluye con Modernizr, simplemente tengo que cargar Modernizr en mi fuente para activar Respond.js. ¿Correcto?
Bueno, necesitas al menos algunas consultas de medios CSS3 para comenzar. Respond.js es esencialmente solo una implementación de JavaScript de consultas de medios para navegadores que no los admiten (por ejemplo, IE menos de 8). Solo asegúrese de que la referencia a Respond.js viene después de sus consultas de medios CSS3 ( link ).
Entonces, sí, suponiendo que tienes Respond.js incluido con Modernizr a partir de una compilación personalizada o lo que sea, y que se carga después de tu CSS3, estás bien. Además, Modernizr necesita más configuración en el HTML ( link )
En segundo lugar, ¿crees que esta es la forma más eficiente de lograr soporte para consultas de medios en IE8 y abajo? Básicamente, incluiría un script Modernizr más grande que el necesario para navegadores que ya admitan consultas de medios. ¿No sería más eficiente separar los dos scripts y solo cargar Respond.js si falla una prueba para consultas de medios?
Modernizr no viene con soporte para navegadores sin consultas de medios listas para usar. Debe agregarlo en una compilación personalizada. Entonces, sí, creo que es inteligente incluir siempre responder. Minificada, la biblioteca solo agrega un poco más de 3kb, y tenerlo incluido en el archivo Modernizr no agregará otra solicitud GET. Yo diría que simplemente lo dejé allí para estar preparado para todo.
Tercero, iría con el método Modernizr. Me gusta usar cosas nuevas, todo el JavaScript extra se mete en el camino.
Estoy evaluando cuidadosamente la mejor manera de utilizar Modernizr y Respond.js para un diseño receptivo y tengo un par de preguntas para la comunidad.
En primer lugar, tengo entendido que al agrupar Modernizr con Respond.js, no se requieren otras codificaciones o pruebas para el soporte de consultas multimedia en IE8 y versiones posteriores. En otras palabras, cuando Respond.js se incluye con Modernizr, simplemente tengo que cargar Modernizr en mi fuente para activar Respond.js. ¿Correcto?
En segundo lugar, ¿crees que esta es la forma más eficiente de lograr soporte para consultas de medios en IE8 y abajo? Básicamente, incluiría un script Modernizr más grande que el necesario para navegadores que ya admitan consultas de medios. ¿No sería más eficiente separar los dos scripts y solo cargar Respond.js si falla una prueba para consultas de medios?
En tercer lugar, si quisiera separar los dos scripts, ¿cuál cree que es la mejor manera de cargar Respond.js si es necesario? Una opción sería usar un comentario condicional específico de IE para cargar Responder. Otra opción es usar yepnope y Modernizr para probar el soporte de consulta de medios y cargar Responder si es necesario. Que sería más eficiente y a prueba de fallas.
Por último, si elijo separar las dos secuencias de comandos y uso Modernizr para cargar Responder si es necesario, he encontrado las dos técnicas siguientes:
<script>
yepnope({
test : Modernizr.mq(''(only all)''),
nope : [''js/libs/respond.min.js'']
});
</script>
O
<script>Modernizr.mq(''(min-width:0)'') || document.write(''<script src="js/libs/respond.min.js"><//script>'')</script>
He encontrado que el segundo falla IE8, pero solo necesita volver a escribir. ¿Qué técnica recomendarías?
Gracias por toda la ayuda.
¡La nueva versión de Respond incluye algunas pruebas de características para que no necesites Modernizr o Yepnope!
Aquí está la revisión: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2
incluido el plugin window.matchMedia externamente desde la función principal respon.js. El código fuente de este polyfill está aquí https://github.com/paulirish/matchMedia.js , e incluirlo listo para usar hará que las cosas sean más fáciles de mantener actualizadas, y permitirá una compresión de archivos más pequeña para aquellos que ya incluyen a través de Modernizr o de otra manera (si lo está, puede eliminarlo de Respond.js).
Además, debe tener en cuenta que el uso de yepnope.js podría causar un retraso en el que vea los estilos de consulta no multimedia antes de que los estilos de consulta de medios sean analizados y aplicados. La recomendación es que coloque responder.js en el encabezado para evitar esto tanto como sea posible, aunque también es bueno mantener los archivos js en el pie de página tan ajustados a usted.
Las pruebas de características pueden estar en una versión más nueva, como dice tkane2000 ... Solo quería mencionar que probablemente también pueda hacerlo a través de Modernizr:
<script>
Modernizr.load({
test: Modernizr.mq(''only all''),
nope: ''js/respond.min.js''
});
</script>
El póster original tiene una verificación de consulta de medios inválida ''(solamente todos)'' ... No debería haber ningún paréntesis basado en algunas cosas que leo. Una vez que eliminé los parens, responder.js parece estar incluido apropiadamente.