Respond
1.4.2
Copyright 2011: Scott Jehl, scottjehl.com
Licenciado bajo la licencia MIT.
El objetivo de este script es proporcionar un script rápido y liviano (3kb minificado / 1kb comprimido con gzip) para permitir diseños web responsivos en navegadores que no admiten consultas de medios CSS3, en particular, Internet Explorer 8 y versiones anteriores. Está escrito de tal manera que probablemente también parcheará el soporte para otros navegadores no compatibles (más información al respecto pronto).
Si no está familiarizado con los conceptos que rodean el diseño web adaptable, puede leer aquí y también aquí.
Página de demostración (los colores cambian para mostrar que las consultas de medios funcionan)
@media screen and ( min-width : 480 px ){
/** ...styles for 480px and up go here **/
}Haga referencia al script respond.min.js (1kb min/gzipped) después de todo su CSS (cuanto antes se ejecute, mayores serán las posibilidades de que los usuarios de IE no vean un destello de contenido no multimedia)
Abre Internet Explorer y levanta los puños con alegría
Respond.js funciona solicitando una copia original de su CSS a través de AJAX, por lo que si aloja sus hojas de estilo en un CDN (o un subdominio), necesitará configurar un proxy local para solicitar el CSS para los navegadores IE antiguos. Las versiones anteriores recomendaban un enfoque de dominio x obsoleto, pero es preferible un proxy local (por razones de rendimiento y seguridad) a intentar solucionar las limitaciones entre dominios.
Algunas notas a tener en cuenta:
El enfoque de este script es intencionalmente muy limitado: solo las consultas de medios de ancho mínimo y máximo y todos los tipos de medios (pantalla, impresión, etc.) se traducen a navegadores no compatibles. Quería mantener las cosas simples en cuanto a tamaño de archivo, mantenimiento y rendimiento, por lo que intencionalmente limité el soporte a consultas que son esenciales para crear un diseño responsivo (primero para dispositivos móviles). En el futuro, es posible que modifique un poco las cosas para incluir un gancho para parchear funciones adicionales de consulta de medios. ¡Estad atentos!
Los navegadores que admiten de forma nativa consultas de medios CSS3 no pueden ejecutar este script lo más rápido posible. Al probar la compatibilidad, todos los demás navegadores se someten a una prueba rápida para determinar si admiten consultas de medios o no antes de proceder a ejecutar el script. Esta prueba ahora se incluye por separado en la parte superior y utiliza el polyfill de window.matchMedia que se encuentra aquí: https://github.com/paulirish/matchMedia.js. Si ya está incluyendo este polyfill a través de Modernizr o de otro modo, no dude en eliminar esa parte.
Este script no se basa en ningún otro script o marco (aparte del polyfill matchMedia incluido) y está optimizado para entrega móvil (~1kb de tamaño total min/gzip)
Como puedes imaginar, esta implementación es bastante tonta en lo que respecta a las reglas de análisis de CSS. Esto es bueno, porque le permite funcionar muy rápido, pero su holgura también puede provocar un comportamiento inesperado. Por ejemplo: si incluye una consulta de medios completa en un comentario con la intención de deshabilitar sus reglas, probablemente encontrará que esas reglas terminarán habilitadas en navegadores que no admiten consultas de medios.
Respond.js no analiza CSS al que se hace referencia a través de @import, ni funciona con consultas de medios dentro de elementos de estilo, ya que esos estilos no se pueden volver a solicitar para su análisis.
Debido a restricciones de seguridad, es posible que algunos navegadores no permitan que este script funcione en las URL file:// (porque utiliza xmlHttpRequest). Ejecútelo en un servidor web.
Si la solicitud del archivo CSS que incluye un estilo específico de MQ está detrás de una redirección, Respond.js fallará silenciosamente. Los archivos CSS deben responder con un estado 200.
Actualmente, se admiten atributos de medios en elementos de vínculo, pero solo si la hoja de estilo vinculada no contiene consultas de medios. Si contiene consultas, el atributo de medios se ignorará y las consultas internas se analizarán normalmente. En otras palabras, las declaraciones @media en CSS tienen prioridad.
Según se informa, si los archivos CSS están codificados en UTF-8 con Byte-Order-Mark (BOM), no funcionarán con Respond.js en IE7 o IE8. Anotado en el número 97
ADVERTENCIA: Incluir reglas @font-face dentro de una consulta de medios hará que IE7 e IE8 se cuelguen durante la carga. Para solucionar este problema, coloque las reglas @font-face al aire libre, como hermanas de otras consultas de medios.
Si tiene más de 32 hojas de estilo referenciadas, IE arrojará un error, Invalid procedure call or argument . Concatene su CSS y el problema debería desaparecer.
Los mapas fuente Sass/SCSS no son compatibles; @media -sass-debug-info romperá respond.js. Anotado en el número 148
Internet Explorer 9 admite consultas de medios css3, pero no dentro de marcos cuando el CSS que contiene la consulta de medios está en un archivo externo (esto parece ser un error en IE9; consulte https://stackoverflow.com/questions/10316247/media-queries) -falla-dentro-ie9-iframe). Consulte esta confirmación para solucionarlo si tiene este problema. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
Las consultas de medios anidadas no son compatibles
Básicamente, el script recorre el CSS al que se hace referencia en la página y ejecuta una o dos expresiones regulares en su contenido para encontrar consultas de medios y sus bloques de CSS asociados. En Internet Explorer, es imposible recuperar el contenido de la hoja de estilo en su estado previamente analizado (lo que en IE 8- significa que sus consultas de medios se eliminan del texto), por lo que Respond.js vuelve a solicitar los archivos CSS usando Ajax y analiza la respuesta de texto desde allí. Asegúrese de configurar el almacenamiento en caché de sus archivos CSS correctamente para que esta nueva solicitud no vaya al servidor, sino que llegue al caché de su navegador.
A partir de ahí, cada bloque de consulta de medios se agrega al encabezado en orden mediante elementos de estilo, y esos elementos de estilo se habilitan y deshabilitan (léase: se agregan y eliminan del DOM) dependiendo de cómo se compara su ancho mínimo/máximo con el ancho del navegador. El atributo multimedia de los elementos de estilo coincidirá con el de la consulta en CSS, por lo que podría ser "pantalla", "proyector" o lo que quieras. Cualquier ruta relativa contenida en el CSS tendrá el prefijo href de su hoja de estilo, por lo que las rutas de las imágenes se dirigirán a su destino adecuado.
Claro, un par:
Este no es el único script de polirelleno CSS3 Media Query que existe; pero puede que sea el más rápido.
Si está buscando una compatibilidad más sólida con CSS3 Media Query, puede consultar https://code.google.com/p/css3-mediaqueries-js/. En las pruebas, descubrí que el script es notablemente lento al representar diseños responsivos complejos (tanto en tamaño como en rendimiento), pero realmente admite muchas más funciones de consulta de medios que este script. ¡Un gran saludo para los autores! :)
