Qual é a diferença entre "tela" e "única tela" nas consultas de mídia?


487

Qual é a diferença entre screene only screennas consultas de mídia?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

Por que somos obrigados a usar only screen? Ele screennão fornece informações suficientes para serem renderizadas apenas para a tela?

Eu já vi muitos sites responsivos usando qualquer uma dessas três maneiras diferentes:

@media screen and (max-width:632px)
@media (max-width:632px)
@media only screen and (max-width:632px)

Respostas:


543

Vamos detalhar seus exemplos um por um.

@media (max-width:632px)

Este está dizendo para uma janela com max-width632px que você deseja aplicar esses estilos. Nesse tamanho, você estaria falando de algo menor que uma tela de desktop na maioria dos casos.

@media screen and (max-width:632px)

Este está dizendo para um dispositivo com ae screenuma janela com max-width632px aplicar o estilo. Isso é quase idêntico ao acima, exceto que você está especificando, screenpor oposição aos outros tipos de mídia disponíveis, o outro mais comum print.

@media only screen and (max-width:632px)

Aqui está uma citação diretamente do W3C para explicar este.

A palavra-chave 'only' também pode ser usada para ocultar folhas de estilo de agentes de usuários mais antigos. Os agentes do usuário devem processar consultas de mídia começando com 'only' como se a palavra-chave 'only' não estivesse presente.

Como não existe um tipo de mídia como "somente", a folha de estilos deve ser ignorada pelos navegadores mais antigos.

Aqui está o link para essa citação que é mostrada no exemplo 9 nessa página.

Esperançosamente isso lança alguma luz sobre as consultas de mídia.

EDITAR:

Verifique @hybrids excelente resposta sobre como a onlypalavra-chave é realmente tratada.


24
Para quem estava procurando uma explicação melhor sobre por que a onlypalavra - chave oculta folhas de estilo de navegadores mais antigos, consulte a resposta @hybrid abaixo. Ele explica muito bem.
JMTyler #

1
A resposta do hybrid é boa, mas eu também gosto dessa resposta porque aborda consultas de mídia dentro do CSS em vez de abordar apenas o mediaatributo do linkelemento.
chharvey

2
que dispositivo não possui uma tela?
Kokodoko 28/03

3
@Kokodoko que não precisam de um. Mas, falando sério, impressoras e leitores de tela não têm necessariamente telas. Além disso, qualquer outra coisa atualmente ou no futuro que não se identifique screencomo algo listado nos outros tipos de mídia.
Matthew Green

1
O CSS do @Kokodoko existe para criar uma separação de preocupações entre conteúdo e apresentação. A apresentação abrange muito mais do que apenas o que pode ser visto na tela. É uma distinção importante a ter em mente, independentemente do que você possa estar projetando.
Matthew Green

231

O seguinte é dos documentos da Adobe .


A especificação de consultas de mídia também fornece a palavra-chave only, cujo objetivo é ocultar consultas de mídia de navegadores mais antigos. Assim not, a palavra-chave deve vir no início da declaração. Por exemplo:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Os navegadores que não reconhecem consultas de mídia esperam uma lista de tipos de mídia separados por vírgula, e a especificação diz que eles devem truncar cada valor imediatamente antes do primeiro caractere não alfanumérico que não é um hífen. Portanto, um navegador antigo deve interpretar o exemplo anterior como este:

media="only"

Como não existe apenas um tipo de mídia, a folha de estilo é ignorada. Da mesma forma, um navegador antigo deve interpretar

media="screen and (min-width: 401px) and (max-width: 600px)"

Como

media="screen"

Em outras palavras, deve aplicar as regras de estilo a todos os dispositivos de tela, mesmo que não saiba o que as consultas de mídia significam.

Infelizmente, o IE 6–8 falhou ao implementar a especificação corretamente.

Em vez de aplicar os estilos a todos os dispositivos de tela, ele ignora completamente a folha de estilos.

Apesar desse comportamento, ainda é recomendável prefixar as consultas de mídia apenas se você quiser ocultar os estilos de outros navegadores menos comuns.


Então, usando

media="only screen and (min-width: 401px)"

e

media="screen and (min-width: 401px)"

terá o mesmo efeito no IE6-8: ambos impedirão que esses estilos sejam usados. No entanto, eles ainda serão baixados.

Além disso, em navegadores que suportam consultas de mídia CSS3, ambas as versões carregam os estilos se a largura da janela de exibição for maior que 401pxe o tipo de mídia for tela.

Não tenho certeza de quais navegadores que não suportam consultas de mídia CSS3 precisariam da onlyversão

media="only screen and (min-width: 401px)" 

em oposição a

media="screen and (min-width: 401px)"

para garantir que não seja interpretado como

media="screen"

Seria um bom teste para alguém com acesso a um laboratório de dispositivos.


3
Portanto, se estamos falando sobre consultas de mídia em arquivos CSS, podemos soltar "apenas", porque navegadores mais antigos não entendem as consultas de mídia, não é?
1234ru 29/07

Resposta boa e muito lúcida. Obrigado!
Alexander Suraphel 13/10/2015

O link compartilhado foi realmente útil. Obrigado
Raphael

De acordo com a minha experiência, "only" está funcionando conforme o esperado no Symbian OS (antigos telefones touch da Nokia). Eu usei muito porque o navegador era muito ruim no suporte ao CSS3, mas ainda era capaz de lidar com "somente" e "largura mínima / máxima" nas consultas de mídia corretamente.
Peter Knut

@PeterKnut Por que você está suportando dispositivos tão antigos? Genuinamente curioso.
Prometheus

41

Para criar estilos para muitos smartphones com telas menores, você pode escrever:

@media screen and (max-width:480px) {  } 

Para impedir que navegadores mais antigos vejam uma folha de estilo de telefone para iPhone ou Android, você pode escrever:

@media only screen and (max-width: 480px;) {  } 

Leia este artigo para mais http://webdesign.about.com/od/css3/a/css3-media-queries.htm


3
Ainda não estou muito claro sobre isso. Também atualizei minha pergunta. Você pode dar algum exemplo?
Jitendra Vyas

4
E se você usar a abordagem Mobile First? Portanto, primeiro temos o CSS móvel e, em seguida, usamos largura mínima para segmentar sites maiores. Não devemos usar a onlypalavra - chave nesse contexto, certo?
Ashitaka

Essa resposta foi muito fácil de entender! :) O único é apenas para impedir que versões mais antigas, como IE 6 ou opera 5 ou 6, carreguem os dados que devem ser apresentados para Android ou Chrome 30 ou IE 10 .. Resposta excelente sandeep :) merece +1
Afzaal Ahmad Zeeshan

16

Responder por @hybrid é bastante informativo, exceto que não explica o objetivo mencionado por @ashitaka "E se você usar a abordagem Mobile First? Portanto, primeiro temos o CSS para dispositivos móveis e depois usamos largura mínima para segmentar sites maiores. Não devemos usar a única palavra-chave nesse contexto, certo? "

Deseja acrescentar aqui que o objetivo é simplesmente impedir que navegadores não compatíveis usem esse estilo de Outro dispositivo como se fosse iniciado na "tela" sem que o leve para a tela onde, como se fosse iniciado no estilo "somente", será ignorado.

Respondendo a ashitaka, considere este exemplo

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

Se não usarmos "somente", ele ainda funcionará, pois o estilo da área de trabalho também será usado para encontrar estilos do Android, mas com sobrecarga desnecessária. Nesse caso, se um navegador não for compatível, ele retornará à segunda folha de estilo, ignorando a primeira.


1
@media screen and (max-width:480px) {  } 

screenaqui é para definir o tamanho da tela da consulta de mídia. Por exemplo, a largura máxima da área de exibição é 480px. Portanto, está especificando a tela em oposição aos outros tipos de mídia disponíveis.

@media only screen and (max-width: 480px;) {  } 

only screen aqui é usado para impedir que navegadores mais antigos que não suportam consultas de mídia com recursos de mídia apliquem os estilos especificados.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.