Soporte de IE8 para CSS Media Query

¿IE8 no admite 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);

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

Si está buscando una forma de degradar el diseño para los usuarios de IE8, puede encontrar útiles los comentarios condicionales de IE. Con 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 complemento JS.

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 las @importhojas de estilo ed (que no debe usar de todos modos por razones de rendimiento). Tampoco escuchará el atributo multimedia de los elementos <link>y <style>".

En el mismo sentido, tiene el Respond.js más simple , que permite consultas solo min-widthy de max-widthmedios.

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 ligero a 1kb cuando min / gzipped y puede asegurarse de que solo los clientes de IE8 lo carguen:

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

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

IE8 (y versiones inferiores) y Firefox anteriores a 3.5 no admiten consultas de medios. Safari 3.2 lo admite parcialmente.

Hay algunas soluciones alternativas que usan JavaScript para agregar soporte de consultas de medios a estos navegadores. Prueba estos:

Plugin jQuery de Consultas de medios (solo trata con ancho máximo / mínimo)

css3-mediaqueries-js: una biblioteca que tiene como objetivo agregar soporte de consultas de medios a navegadores no compatibles

Tomado de la página del proyecto css3mediaqueries.js.

Nota: No funciona en las hojas de estilo @ import'ed (que no debe usar de todos modos por razones de rendimiento). Tampoco escuchará el atributo multimedia de los elementos <link>y <style>.

Una manera fácil de usar 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]-->

Respuesta editada: IE entiende solo la pantalla y la impresión como medios de importación. Todos los demás CSS suministrados junto con la declaración de importación hacen que IE8 ignore la declaración de importación. El navegador Geco como safari o mozilla no tenía este problema.

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

Una solución basada en Javascript

Para agregar soporte para IE8, puede usar una de varias soluciones JS. Por ejemplo, Respond puede agregarse para agregar soporte de consultas 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 le gusta una solución basada en JS, también debe considerar agregar una hoja de estilo solo IE <9 donde ajuste su estilo específico a IE <9. Para eso, debe agregar el siguiente 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 CSS para apuntar a IE <9. Tiene el mismo impacto que una hoja de estilo de IE <9 solamente, pero no necesita una hoja de estilo separada para eso. Sin embargo, no recomiendo esta opción, ya que producen un código CSS no válido (que es solo una de varias razones por las cuales el uso de hacks CSS generalmente está mal visto hoy).

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 inferiores. Solo tiene que usar una arquitectura de archivos CSS adecuada.

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Solía @media \0screen {}y funciona bien para mí en REAL IE8.

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