Modernizr con Respond.js

Question

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, es mi entendimiento de que cuando la agrupación Modernizr con Respond.js, no se requiere ninguna otra codificación o pruebas de compatibilidad con consultas de medios en IE8 y por debajo. 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, ¿cree que esta es la manera más eficaz para lograr apoyo a preguntas de los medios en IE8 y por debajo? 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 me gustaría separar los dos guiones, ¿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 decido separar las dos secuencias de comandos y el uso de Modernizr para cargar responderá si necesitaba que me he encontrado los dos siguientes técnicas:

<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 la el segundo bloquea IE8, pero solo necesita volver a escribir. ¿Qué técnica recomendarías?

Gracias por toda la ayuda.

Answer 1

En primer lugar, tengo entendido que al agrupar Modernizr con Respond.js, no se requieren otras codificaciones o pruebas para el soporte de consultas de medios en IE8 y versiones posteriores. En otras palabras, cuando Respond.js se incluye con Modernizr me basta con cargar Modernizr en mi fuente para obtener Respond.js activo. ¿Correcto?

Bueno, necesita al menos algunas consultas de medios CSS3 para comenzar. Respond.js es básicamente una implementación de JavaScript de consultas de medios para navegadores que no los admiten (por ejemplo, IE menos de 8). Sólo asegúrese de que la referencia a Respond.js se produce después de las consultas de los medios de CSS3 (link).

Así que, sí, suponiendo que tiene Respond.js incluido con Modernizr a partir de una compilación personalizada o lo que sea, y que se carga después de su CSS3, está todo bien. Además, Modernizr necesita un poco más de configuración en el de su HTML (link)

En segundo lugar, ¿cree que esto es la forma más eficiente para lograr apoyo a preguntas de los medios en IE8 y por debajo? 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 doesn't come with support for browsers without media queries fuera de la caja. 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.

En tercer lugar, me gustaría ir con el método Modernizr. Me gusta usar cosas nuevas, todo el JavaScript extra se mete en el camino.

Answer 2

La nueva versión de Responder incluye algunas pruebas de características para que no necesite Modernizr o Yepnope.

Aquí está la revisión: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

incluido el polyfill window.matchMedia externamente desde la función principal respond.js. El código fuente de este relleno está aquí, https://github.com/paulirish/matchMedia.js, e incluirlo listo para usar facilitará la actualización, y permite una compresión de archivos más pequeña para aquellos que ya lo incluyen a través de Modernizr o de otra forma (si es así, 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.

Answer 3

las pruebas de función puede estar en la más reciente lib como tkane2000 dice ... Sólo quería mencionar que probablemente podría hacerlo a través de Modernizr también:

<script> 
    Modernizr.load({ 
    test: Modernizr.mq('only all'), 
    nope: 'js/respond.min.js' 
    }); 
    </script> 

el cartel original tiene creo consulta de medios de verificación no válido '(sólo todo) '... 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.