[html] Compatibilidad con IE8 para CSS Media Query


Answers

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 .

Question

¿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);






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



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







Related