Suporte do IE8 para CSS Media Query

178

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);
testndtv
fonte
para aqueles que querem experimentar css em linha com a mídia e utilização responder (.min) Js trabalho respondem does not nesta situação - parece que funciona para arquivos .css
NoWomenNoCry

Respostas:

77

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.

Aaron
fonte
94
Não vejo como as folhas de estilo condicionais resolverão um problema de design responsivo.
James Westgate
8
Não entendo como essa solução resolveria o design responsivo no IE? O carregamento de uma folha de estilo diferente, dependendo do navegador, não tem nada a ver com o uso de propriedades de estilo diferentes, dependendo do tamanho do navegador, por exemplo.
21312 Klikerko
13
Eu acho que a resposta certa é que o IE8 não suporta consultas de mídia . Essa resposta meio que diz isso, mas não é totalmente clara à primeira vista. Independentemente disso, pensei que tivesse suporte e essa resposta me ajudou a entender o contrário.
Jason
54
É verdade que essa resposta não é uma solução responsiva, MAS para mim é uma enorme "MAS", o fato é que o IE8 não é usado no iPad ou em tablets Android. O IE8 pode ser usado em PCs XP / Vista, principalmente de 2003 a 2009, com telas com cerca de 1024px de largura. O Windows Mobile está no IE6 e o ​​Windows Pone no IE9 +. A verdadeira questão aqui é se perguntar se é realmente útil responder ao IE8.
Gregoire D.
16
@GregoireD. Sim, ele é. Porque existem pessoas que visualizam páginas da web com zoom. Na minha empresa, formatamos as páginas desde que o zoom 4x 4x 800x600, para maior acessibilidade. Isso cria uma tela com largura de 400 px. As consultas de mídia são realmente úteis para isso, apesar do navegador escolhido (e o IE8 está incluído).
Arkana
341

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.

Knu
fonte
7
Por que isso não é rotulado como a resposta? Perfeito para mim, obrigado. A propósito, você não deve usar consultas de importação de CSS devido à sobrecarga.
RichW
perfeito, exatamente o que eu estava procurando!
somdow 29/12/12
Obrigado!! Essa resposta e o respond.js me pouparam muito tempo tentando fazer uma solução alternativa para as mediaqueries no ie8.
Ingusmat
3
Nevermind -> os .js devem ser incluídos após os arquivos .css ... xD
kaljak
4
A resposta funcionou, mas o css3-mediaqueries não. Suponho que é porque o Respond é independente, mas o css3-mediaqueries depende de algumas funções do jQuery, como a detecção do agente do usuário, e essas funções foram preteridas e removidas (consulte os documentos do jQuery).
Anton Boritskiy
50

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

Brandon Pugh
fonte
14

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

Faraz Kelhini
fonte
Ok .. Acabei de incluir o css3-mediaqueries.js na minha página .. Ainda não funciona no IE .. ou seja, a consulta de mídia "@import url (" desktop.css ") não apenas na tela e (largura do dispositivo: 768px); " assim como "@import url (" desktop.css ") não é exibido na tela e (largura do dispositivo: 768px);"
Testevtv
Não tenho certeza se eu precisar fazer algo adicional como well..besides incluindo o script ..
testndtv
Observe que ele não funciona em css importados. tente isto: <link rel = "stylesheet" type = "text / css" media = "sem tela e (largura do dispositivo: 768px)" href = "desktop.css" />
Faraz Kelhini,
Oh, tudo bem. Eu entendo. Na verdade, nesse caso, pode não ajudar-me, como eu estou procurando algo sem fazer nada na page..ie apenas externamente na CSS ..
testndtv
Esse script googletrunk css3 js especifica que ele só funciona com a mediaquery sendo usada dentro da folha de estilo CSS, em vez de externamente, como 'only screen and ....'. Isso significa que você deve unificar suas folhas de estilo em uma e, dentro delas, fazer o que você queria fazer externamente: @media screen e (largura máxima: 980px) {
Capagris
11

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 .

Bayo
fonte
+1 por dizer que não funciona nas folhas de estilo @ import'ed! Economize muito tempo no meu tema filho WP.
Vinicius Garcia
8

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

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.

sra
fonte
Meu IE não está na compatibilidade mode..Also existe alguma outra alternativa para IE..Basically eu só quero para selecionar tudo, exceto um dispositivo 768px tela ..
testndtv
Também conforme discutido no link que você forneceu, tentei definir o doctype como <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // PT" " w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd "> ... Ainda não funciona ..
testndtv 24/04
1
Não sei se entendi direito. Você pode usar JavaScript para detectar a resolução da tela? Com CSS, não há outra maneira. Você tem certeza de que não tem nenhum erro relacionado com o que faz com que o mínimo seja substituído ou ignorado. Uma dica obtida é a barra de ferramentas do desenvolvedor is. Com isso você pode testar ao vivo, sem pagereloads
sra
A mudança para o modo quirk é muito rápida, você verificou isso? Isso também pode levar a resultados indesejados. O Quirkmode substituirá seu doctype. Também é prática deus para testar apenas o que você quer em um projeto super pequenas para enhure que não é um erro / resultado relacionado
sra
ok .. Aqui está como eu atualizei agora ... Eu tenho o common.css e dentro dele eu digo; ... tela @import url ("desktop.css"); @import url ("ipad.css") apenas tela e (largura do dispositivo: 768px); Não tenho certeza se essa abordagem está correta, mas funciona para desktop (IE / FF) e para iPad. Pode haver algum problema com essa abordagem?
Testevtv
6

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

John Slegers
fonte
5

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.

user1105491
fonte
4

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.

sgarbesi
fonte
As regras de estilo definidas no bloco em questão serão aplicadas apenas no IE8, e outros navegadores as ignorarão .
Luca
@Luca Além disso, ele não permite especificar uma largura mínima, largura máxima etc.
John Slegers
3

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

Boris Zbarsky
fonte