Soporte de IE8 para CSS Media Query

178

¿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);
html css responsive-design internet-explorer-8 media-queries testndtv
fuente
para aquellos que quieran probar css en línea con medios y usar responder (.min) .js respond no funciona en esta situación, parece que funciona para archivos
.css

Respuestas:

77

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.

Aaron
fuente
94
No veo cómo las hojas de estilo condicionales resolverán un problema de diseño receptivo.
James Westgate
8
No entiendo cómo resolvería esta solución el diseño receptivo en IE. Cargar diferentes hojas de estilo dependiendo del navegador no tuvo nada que ver con el uso de diferentes propiedades de estilo dependiendo del tamaño del navegador, por ejemplo.
Klikerko
13
Creo que la respuesta correcta es que IE8 no admite consultas de medios . Esta respuesta dice eso, pero no está del todo claro a primera vista. De todos modos, pensé que tenía apoyo y esta respuesta me ayudó a darme cuenta de lo contrario.
Jason
54
Es cierto que esta respuesta no es una solución receptiva PERO y para mí es un gran "PERO", el hecho es que IE8 no se usa en iPad o tabletas Android. IE8 podría usarse en PC con XP / Vista principalmente desde 2003 a 2009, pantallas principalmente de alrededor de 1024px de ancho. Windows Mobile está bajo IE6 y Windows Pone bajo IE9 +. La verdadera pregunta aquí es preguntarse si hacer que responder a IE8 sea realmente útil.
Gregoire D.
16
@GregoireD. Sí lo es. Porque hay personas que ven páginas web con zoom. En mi empresa, formateamos las páginas desde 4x zoom en 800x600, para accesibilidad. Eso hace una pantalla como 400px de ancho. Las consultas de medios son realmente útiles para eso, a pesar del navegador que elija (e IE8 está incluido).
Arkana
341

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.

Knu
fuente
77
¿Por qué no se etiqueta esto como la respuesta? Perfecto para mi gracias. Por cierto, no deberías usar las consultas de importación de CSS debido a la sobrecarga.
RichW
perfecto, exactamente lo que estaba buscando!
Somdow
¡¡Gracias!! Esta respuesta, y respond.js, me ahorraron un montón de tiempo tratando de hacer una solución para mediaqueries en ie8.
Ingusmat el
3
no importa -> el .js debe incluirse después de los archivos
.css
44
La respuesta funcionó, pero css3-mediaqueries no. Supongo que se debe a que Respond es autónomo, pero css3-mediaqueries se basa en algunas funciones de jQuery, como la detección de agente de usuario, y estas funciones se desaprobaron y se eliminaron (consulte los documentos de jQuery).
Anton Boritskiy
50

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

Brandon Pugh
fuente
14

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

Faraz Kelhini
fuente
Ok ... acabo de incluir css3-mediaqueries.js en mi página ... todavía no funciona en IE ... es decir, la consulta de medios "@import url (" desktop.css ") no solo la pantalla y (ancho del dispositivo: 768px); " así como "@import url (" desktop.css ") no screen y (device-width: 768px);"
testndtv
No estoy seguro si tengo que hacer algo adicional como well..besides incluyendo el guión ..
testndtv
Tenga en cuenta que no funciona en CSS importado. intente esto: <link rel = "stylesheet" type = "text / css" media = "not screen and (device-width: 768px)" href = "desktop.css" />
Faraz Kelhini el
Oh, ok, ya veo. En realidad, en ese caso, puede que no me ayude, ya que estoy buscando algo sin hacer nada en la página ... es decir, solo externamente en el CSS ...
#
Ese script googletrunk css3 js especifica que solo funciona con mediaquery que se usa dentro de la hoja de estilo CSS, en lugar de externamente, como 'solo pantalla y ...'. Esto significa que tiene que unificar sus hojas de estilo en una y dentro de ellas hacer lo que quería hacer externamente: @media screen y (max-width: 980px) {
Capagris
11

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>.

Bayo
fuente
¡+1 por decirme que no funciona en las hojas de estilo @ import'ed! Ahórreme mucho tiempo en mi tema infantil WP.
Vinicius Garcia
8

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]-->
Ben C
fuente
6

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.

sra
fuente
Mi IE no está en la compatibilidad mode..Also ¿hay alguna otra alternativa para IE..Basically sólo desea seleccionar todo excepto un dispositivo de pantalla de 768px ..
testndtv
Además, como se discutió en el enlace que proporcionó, intenté configurar el doctype como <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // ES" " w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd "> ... Todavía no funciona ..
testndtv
1
No estoy seguro si te entendí bien. ¿Puede usar JavaScript para detectar la resolución de la pantalla? Con CSS no hay otra manera. ¿Estás seguro de que no tienes ningún error relacionado con el que causa que el mínimo sea anulado o ignorado? Una sugerencia es la barra de herramientas para desarrolladores. Con esto se puede probar en directo y sin pagereloads
SRA
El cambio al modo peculiar es muy rápido, ¿lo comprobaste? Eso también puede conducir a resultados no deseados. Quirkmode sobrescribirá su doctype. También es una práctica Dios para probar justo lo que quieres en un super pequeño proyecto para enhure que no es un error de / resultado relacionado
SRA
ok .. Así es como lo actualicé ahora ... tengo common.css y dentro de él digo; ... @import url ("desktop.css") pantalla; @import url ("ipad.css") solo pantalla y (ancho del dispositivo: 768px); No estoy seguro de si este enfoque es correcto, pero funciona para escritorio (IE / FF) y para iPad. ¿Puede haber algún problema con este enfoque?
testndtv
6

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).

John Slegers
fuente
5

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.

usuario1105491
fuente
3

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

Boris Zbarsky
fuente