Suporte do IE8 para CSS Media Query

O IE8 não suporta a seguinte consulta de mídia CSS:

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

Caso contrário, qual é a maneira alternativa de escrever? O mesmo funciona bem no Firefox.

Algum problema com o código abaixo?

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

As versões do Internet Explorer anteriores ao IE9 não oferecem suporte a consultas de mídia .

Se você estiver procurando uma maneira de degradar o design para usuários do IE8, poderá achar útil o comentário condicional do IE. Usando isso, você pode especificar uma folha de estilos específica do IE 8/7/6 que substitui as regras anteriores.

Por exemplo:

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

Isso não permitirá um design responsivo no IE8, mas poderia ser uma solução mais simples e acessível do que usar um plug-in JS.

css3-mediaqueries-js é provavelmente o que você está procurando: esse script emula consultas de mídia. No entanto (no site do script), "não funciona em @importfolhas de estilo ed (que você não deve usar de qualquer maneira por motivos de desempenho). Também não escutará o atributo de mídia dos elementos <link>e <style>".

Na mesma linha, você tem o Respond.js mais simples , que permite apenas consultas de mídia min-widthe max-width.

A melhor solução que encontrei é o Respond.js, especialmente se sua principal preocupação é garantir que seu design responsivo funcione no IE8. É bem leve a 1kb quando min / gzipped e você pode garantir que apenas os clientes do IE8 o carreguem:

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

Também é o método recomendado se você estiver usando o bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

O IE8 (e versões inferiores) e o Firefox anteriores à 3.5 não suportam consulta de mídia. O Safari 3.2 suporta parcialmente.

Existem algumas soluções alternativas que usam JavaScript para adicionar suporte à consulta de mídia nesses navegadores. Tente esse:

Plug-in jQuery de consultas de mídia (lida apenas com largura máxima / mínima)

css3-mediaqueries-js - uma biblioteca que visa adicionar suporte a consultas de mídia a navegadores não compatíveis

Retirado da página do projeto css3mediaqueries.js.

Nota: Não funciona nas folhas de estilo @ import'ed (que você não deve usar de qualquer maneira por motivos de desempenho). Também não escutará o atributo de mídia do<link><style> elementos e .

Uma maneira fácil de usar o css3-mediaqueries-js é incluir o seguinte antes da tag do corpo de fechamento:

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

Resposta editada: O IE entende apenas a tela e a impressão como mídia de importação. Todos os outros CSS fornecidos junto com a declaração de importação fazem com que o IE8 ignore a declaração de importação. O navegador Geco, como o safari ou o mozilla, não teve esse problema.

As consultas de mídia não são suportadas no IE8 e abaixo.

Uma solução alternativa baseada em Javascript

Para adicionar suporte ao IE8, você pode usar uma das várias soluções JS. Por exemplo, o Respond pode ser adicionado para adicionar suporte à consulta de mídia para o IE8 apenas com o seguinte código:

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

CSS Mediaqueries é outra biblioteca que faz a mesma coisa. O código para adicionar essa biblioteca ao seu HTML seria idêntico:

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

A alternativa

Se você não gosta de uma solução baseada em JS, considere também adicionar uma folha de estilo IE <9 somente em que ajusta seu estilo específico ao IE <9. Para isso, você deve adicionar o seguinte HTML ao seu código:

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

Nota :

Tecnicamente, é mais uma alternativa: usar hacks CSS para direcionar o IE <9. Ele tem o mesmo impacto que uma folha de estilo IE <9 apenas, mas você não precisa de uma folha de estilo separada para isso. Porém, eu não recomendo esta opção, pois elas produzem código CSS inválido (que é apenas uma das várias razões pelas quais o uso de hacks CSS geralmente é desaprovado atualmente).

Antes do Internet Explorer 8, não havia suporte para consultas de mídia. Mas, dependendo do seu caso, você pode tentar usar comentários condicionais para atingir apenas o Internet Explorer 8 e versões inferiores. Você apenas precisa usar uma arquitetura de arquivos CSS adequada.

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

Eu usei @media \0screen {}e funciona bem para mim no REAL IE8.

O IE não adicionou suporte à consulta de mídia até o IE9. Então, com o IE8, você está sem sorte.