query example html css responsive-design internet-explorer-8 media-queries

html - example - Compatibilidad con IE8 para CSS Media Query



media query example (11)

¿IE8 no es compatible con la siguiente consulta de medios CSS?

@import url("desktop.css") screen and (min-width: 768px);

Si no, ¿cuál es la forma alternativa de escribir? Lo mismo funciona bien en Firefox.

¿Algún problema con el código a continuación?

@import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);

Antes de Internet Explorer 8 no había soporte para consultas de medios. Pero dependiendo de su caso, puede intentar usar comentarios condicionales para apuntar solo a Internet Explorer 8 y versiones anteriores. Solo tienes que usar una arquitectura de archivos CSS adecuada.

IE no agregó soporte de consulta de medios hasta IE9. Entonces con IE8 no tienes suerte.

La mejor solución que he encontrado es Respond.js especialmente si su principal preocupación es asegurarse de que su diseño receptivo funcione en IE8. Es bastante liviano a 1 kb cuando min / gzipped y puedes asegurarte de que solo los clientes IE8 lo carguen:

<!--[if lt IE 9]> <script src="respond.min.js"></script> <![endif]-->

También es el método recomendado si está utilizando el programa de arranque: http://getbootstrap.com/getting-started/#support-ie8-ie9

Las versiones de Internet Explorer anteriores a IE9 no admiten consultas de medios .

Si está buscando una manera de degradar el diseño para los usuarios de IE8, puede encontrar útiles los comentarios condicionales de IE. Al usar esto, puede especificar una hoja de estilo específica de IE 8/7/6 que sobrescribe las reglas anteriores.

Por ejemplo:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/> <![endif]-->

Esto no permitirá un diseño receptivo en IE8, pero podría ser una solución más simple y accesible que usar un plugin JS.

Respuesta editada: IE entiende solo la pantalla e imprime como medio de importación. El resto de CSS suministrado junto con la declaración de importación hace que IE8 ignore la instrucción de importación. El navegador Geco como safari o mozilla no tenía este problema.

Tomado de la página del proyecto css3mediaqueries.js

Nota: No funciona en @ styles''ets importados (que no deberías usar de todos modos por razones de rendimiento). Además, no escuchará el atributo de medios de los elementos <link> y <style> .

Una forma sencilla de utilizar css3-mediaqueries-js es incluir lo siguiente antes de la etiqueta de cierre del cuerpo:

<!-- css3-mediaqueries.js for IE less than 9 --> <!--[if lt IE 9]> <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script> <![endif]-->

css3-mediaqueries-js es probablemente lo que está buscando: este script emula consultas de medios. Sin embargo, (desde el sitio del script) "no funciona en @import ed stylesheets (que no debe usar de todos modos por razones de rendimiento). Tampoco escuchará el atributo de medios de los elementos <link> y <style> ".

En la misma línea, tiene el Respond.js más Respond.js , que solo permite consultas de medios de max-width min-width max-width .

Las consultas de medios no son compatibles en absoluto en IE8 y abajo.

Una solución basada en Javascript

Para agregar soporte para IE8, puede usar una de varias soluciones JS. Por ejemplo, se puede agregar Respond.js para agregar soporte de consulta de medios para IE8 solo con el siguiente código:

<!--[if lt IE 9]> <script src="respond.min.js"> </script> <![endif]-->

CSS Mediaqueries es otra biblioteca que hace lo mismo. El código para agregar esa biblioteca a su HTML sería idéntico:

<!--[if lt IE 9]> <script src="css3-mediaqueries.js"> </script> <![endif]-->

La alternativa

Si no te gusta una solución basada en JS, también deberías considerar agregar una hoja de estilos IE <9 únicamente donde ajustas tu estilo específico para IE <9. Para eso, debe agregar el siguiente código HTML a su código:

<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/> <![endif]-->

Nota :

Técnicamente es una alternativa más: usar hacks de CSS para apuntar a IE <9. Tiene el mismo impacto que una hoja de estilo IE <9, pero no necesita una hoja de estilo separada para eso. Sin embargo, no recomiendo esta opción, ya que producen código CSS no válido (que no es más que una de las varias razones por las cuales el uso de hacks de CSS generalmente está mal visto hoy).