Utilizar consultas de média

As consultas de média permitem modificar um site ou aplicação de acordo com o tipo de dispositivo (ecrã ou impressora, por exemplo) ou características e parâmetros específicos (como a resolução de ecrã ou largura do viewport do navegador). Podem utilizar-se para:

Sintaxe

Consultas de média consistem num tipo de média e uma ou mais expressões envolvendo recursos de média. Note que estas consultas não são sensíveis a maiúsculas. Pode-se combinar várias consultas com operadores lógicos.

O resultado da consulta é verdadeiro se o tipo de média especificado na consulta de média encaixa com o tipo de dispositivo no qual o documento está a ser exibido e se todas as expressões na consulta de média forem verdadeiras.

Quando uma consulta de média é verdadeira, a folha de estilos correspondente é aplicada seguinto as regras normais de cascata.

Nota: Considere a etiqueta <link> com uma consulta de média. O ficheiro CSS que ela refere é descarregado mesmo que a consulta de média seja falsa; o conteúdo da folha não será aplicado até a consulta se tornar verdadeira.

Operadores lógicos

Você pode compor consultas de média complexas usando operadores lógicos, incluindo not, and, e only ; assim como combinar consultas de média numa lista separada por vírgulas, o que é equivalente a um operador "ou".

and

O operador and indica que a consulta é verdadeira se cada subconsulta que a compõe for verdadeira. Também pode juntar os tipos de média às funcionalidades de média. Tem maior precedência que a vírgula ("ou") e o not.

not

A palavra-chave not, nega o resultado de toda a consulta; por exemplo, "all and (not color)" é verdadeiro para dispositivos monocromáticos independentemente do tipo de média. É o operador com menor precedência depois da vírgula.

only

A palavra-chave only indica que só deve ser aplicado o estilo se a consulta inteira for verdadeira. Quando se utiliza este operador, é obrigatório especificar um tipo de média.

É útil para esconder folhas de estilo de navegadores antigos que não suportam consultas de média. Por exemplo, se não for utilizado only, navegadores antigos interpretam a consulta screen and (max-width: 500px) apenas como screen - ignoram o resto e aplicam o estilo em todos os ecrãs. 

Este operador não pode ser utilizado em conjunto com o not, e ambos têm a mesma precedência.

, (vírgula)

Cada subconsulta numa lista separada por vírgulas é avaliada isoladamente e e alguma  for verdadeira, a consulta composta é verdadeira. Por outras palavras, as vírgulas são equivalentes a um "ou-lógico".

Precedência dos operadores

  • As vírgulas têm a menor precedência;
  • only e not têm a mesma precedência;
  • and tem a maior precedência.

Os parênteses não podem ser utilizados para mudar esta precedência.

 

Pseudo BNF (para aqueles que gostam desde tipo de coisa)

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

Consultas de média não diferenciam maiúsculas de minúsculas. Consultas de média que envolvem tipos de média desconhecidos são sempre falsas.

Nota: Os parênteses são requisitados a volta de expressões; esquecer de usá-los é um erro.

Recursos de média

A maioria dos recursos de média pode ser prefixado com "min-" ou "max-" para expressar "maior ou igual a" ou "menor ou igual a". Isto evita usar os símbolos "<" e ">", que poderiam entrar em conflito com HTML e XML. Se você usar um recurso de média sem especificar um valor, a expressão é definida como verdadeira se o valor do recurso for diferente de zero.

Nota: Se um recurso de média não se aplica ao dispositivo no qual o navegador está sendo rodado, expressões envolvendo este recurso de média serão sempre falsas. Por exemplo, consultando a relação de aspecto de um dispositivo auditivo sempre resultará em falso.

color

Valor: <color>
média: visual
Aceita os prefixos min/max: sim

Indica o número de bits por componente de cor do dispositivo de saída. Se o dispositivo não é colorido, este valor é zero.

Nota: Se os componentes de cor tiverem diferentes de números de bits por componente de cor, o menor número é usado. Por exemplo, se uma tela usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo é considerado para usar 5 bits por componente de cor. Se o dispositivo usa cores indexadas, o número mínimo de bits por componente de cor na tabela de cores é usado.

Exemplos

Para aplicar uma folha de estilos a todos os dispositivos coloridos:

@media all and (color) { ... }

Para aplicar uma folha de estilos a dispositivos com no mínimo 4 bits por componente de cor:

@media all and (min-color: 4) { ... }

color-index

Valor: integer
média: visual
Aceita os prefixos min/max: sim

Indica o número de entradas na tabela de cor para o dispositivo de saída.

Exemplos

Para indicar que uma folha de estilos deve ser aplicada a todos os dispositivos usando cores indexadas, você pode fazer:

@media all and (color-index) { ... }

Para aplicar uma folha de estilos a dispositivos de cores indexadas com no mínimo 256 cores:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

device-aspect-ratio

Valor: integer / integer
média: visual, tactile
Aceita os prefixos min/max: sim

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste em dois positivos inteiros (integer) separados por um caractére barra ("/"). Isto representa o número de pixels horizontais sobre o número de pixels verticais.

Exemplo

O que vem a seguir selecionar uma folha de estilos especial para uso em dispositivos de tela comprida (widescreen):

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

Isto seleciona o estilo quando a relação de aspecto for 16:9 ou 16:10.

device-height

Valor: <length>
média: visual, tactile
Aceita os prefixos min/max: sim

Descreve a altura do dispositivo de saída (sendo a tela ou página inteira, ao invés de somente a área de renderização, como a janela do documento).

Exemplo

Para aplicar uma folha de estilos a um documento quando exibido em uma tela que for mais fina do que 800 pixels, você pode usar isto:

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

device-width

Valor: <length>
média: visual, tactile
Aceita os prefixos min/max: sim

Descreve a largura do dispositivo de saída (sendo a tela ou a página inteira, ao invés de somente a área de renderização, como a janela do documento).

grid

Valor: integer
média: all
Aceita os prefixos min/max: não

Determina Determines se o dispositivo de saída é um dispositivo grid ou um dispositivo bitmap. Se o dispositivo for baseado em grid (tal como um terminal tty ou uma tela de celular com somente uma fonte), o valor é 1. Caso contrário é zero.

Nota: Gecko (e consequentemente o Firefox) não suporta dispositivos grid atualmente, então este recurso de média não é suportado.

Exemplo

Para aplicar um estilo a dispositivos de mão com uma tela de 15 caracteres ou mais estreito:

@media handheld and (grid) and (max-width: 15em) { ... }
Nota: A unidade "em" tem um uso especial em dispositivos grid; desde que a largura exata de um "em" não pôde ser determinada, 1em é assumido como a largura de uma célula grid horizontal, e a altura de uma célula vertical.

height

Valor: <length>
média: visual, tactile
Aceita os prefixos min/max: sim

O recurso de média height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura da viewport ou da caixa de páginas em uma impressora).

Nota: Quando o usuário redimenciona a janela, o Firefox substituirá as folhas de estilos como for apropriado, baseado em consultas de média usando os recursos de média width e height.

monochrome

Valor: integer
média: visual
Aceita os prefixos min/max: sim

Indica o número de bits por pixel em um dispositivo monocromático (escala de cinza). Se o dispositivo não for monocromático, o valor do dispositivo é 0.

Exemplos

Para aplicar uma folha de estilos para todos os dispositivos monocromáticos:

@media all and (monochrome) { ... }

Para aplicar uma folha de estilos para dispositivos monocromáticos com no mínimo 8 bits por pixel:

@media all and (min-monochrome: 8) { ... }

orientation

Valor: landscape | portrait
média: visual
Aceita os prefixos min/max: não

Indica se o dispositivo está em modo paisagem (a exibição é mais larga do que alta) ou retrato (a exibição é mais alta do que larga).

Exemplo

Para aplicar uma folha de estilos somente na orientação retrato:

@media all and (orientation: portrait) { ... }

resolution

Valor: <resolution>
média: bitmap
Aceita os prefixos min/max: sim

Indica a resolução (densidade de pixels) do dispositivo de saída. A resolução pode ser especificada tanto em pontos por polegada (dpi) quanto pontos por centímetro (dpcm).

Exemplo

Para aplicar uma folha de estilos a dispositivos com no mínimo 300 pontos por polegada de resolução:

@media print and (min-resolution: 300dpi) { ... }

scan

Valor: progressiveinterlace
média: tv
Aceita os prefixos min/max: não

Descreve o processo de escaneamento de dispositivos de saída de televisão.

Nota: Gecko (e consequentemente o Firefox) não suportam o tipo de média tv atualmente, então este recurso de média não é suportado.

Exemplo

Para aplicar uma folha de estilos somente para televisões com escaneamento progressivo:

@media tv and (scan: progressive) { ... }

width

Valor: <length>
média: visual, tactile
Aceita os prefixos min/max: sim

O recurso de média width descreve a largura da superfície de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de páginas em uma impressora).

Nota: Quando o usuário redimensiona a janela, o Firefox substituirá a folha de estilo como apropriado, baseado nas consultas de média usando os recursos de média width e height.

Exemplos

Se você desejar espeficar uma folha de estilos para dispositivos de mão, ou dispositivos de tela com uma largura maior do que 20em, você pode usar esta folha de estilos:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

Este recurso de média especifica uma folha de estilos que deve ser aplicada a médias impressas mais largas do que 8.5 polegadas:

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />

Este recurso especifica uma folha de estilos que é usável quando a viewport estiver entre 500 e 800 pixels de largura:

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

Características de média específicas da Mozilla

A Mozilla oferece várias características de média específicas para o Gecko. Algumas delas podem ser propostas como características oficiais de média.

-moz-images-in-menus

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se o dispositivo permitir às imagens, aparecer nos menus, recebe 1; caso contrário, o valor é 0.

Isto corresponde às pseudo classes :-moz-system-metric(images-in-menus) do CSS.

-moz-mac-graphite-theme

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se o usuário configurou o dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência azul padrão, ou não for no Mac OS X, o valor é 0.

Isto corresponde às pseudo classes :-moz-system-metric(mac-graphite-theme) do CSS.

-moz-maemo-classic

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se o usuário está usando o Maemo com o tema original, o valor é 1; se estiver usando o novo tema "Fremantle", o valor é 0.

Isto corresponde às pseudo classes :-moz-system-metric(maemo-classic) do CSS.

-moz-scrollbar-end-backward

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se a interface do dispositivo do usuário exibe um botão de seta para trás ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.

Isto corresponde às pseudo classes :-moz-system-metric(scrollbar-end-backward) do CSS.

-moz-scrollbar-end-forward

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se a interface do dispositivo do usuário exibe um botão de seta para frente ao fim da barra de rolagem, o valor é 1. Caso contrário é 0.

Isto corresponde às pseudo classes :-moz-system-metric(scrollbar-end-forward) do CSS.

-moz-scrollbar-start-backward

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se a interface do dispositivo do usuário exibe uma seta para trás no início da barra de rolagem, o valor é 1. Caso contrário é 0.

Isto corresponde às pseudo classes :-moz-system-metric(scrollbar-start-backward) do CSS.

-moz-scrollbar-start-forward

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se a interface do dispositivo do usuário exibe uma seta para frente no início da barra de rolagem, o valor é 1. Caso contrário é 0.

Isto corresponde às pseudo classes :-moz-system-metric(scrollbar-start-forward) do CSS.

-moz-scrollbar-thumb-proportional

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se a interface do dispositivo do usuário exibe a barra de rolagem proporcionalmente (isto é, tamanho baseado na porcentagem do documento que está visível), o valor é 1. Caso contrário é 0.

Isto corresponde às pseudo classes :-moz-system-metric(scrollbar-thumb-proportional) do CSS.

-moz-touch-enabled

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se o dispositivo suporta eventos de toque (para um tela sensível ao toque), o valor é 1. Caso contrário é 0.

Isto corresponde às pseudo classes :-moz-system-metric(touch-enabled) do CSS.

Exemplo

Você pode usar isso para renderizar seus botões ligeiramente maiores, por exemplo, se o usuário estiver em um dispositivo com tela sensível ao toque, para torná-lo mais amigável aos dedos.

-moz-windows-classic

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se o usuário estiver usando o Windows, sem tema (no modo clássico ao invés de usar "uxtheme"), o valor é 1; caso contrário é 0.

Isto corresponde às pseudo classes :-moz-system-metric(windows-classic) do CSS.

-moz-windows-compositor

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se o usuário estiver usando o Windows com o compositor DWM, o valor é 1; caso contrário é 0.

Isto corresponde às pseudo classes :-moz-system-metric(windows-compositor) do CSS.

-moz-windows-default-theme

Valor: inteiro
média: visual
Aceita os prefixos min/max: não

Se o usuário está correntemente usando um dos temas do Windows (Luna, Royale, Zune ou Aero (incluindo o Vista Basic, Vista Advanced e o Aero Glass), o valor 1. Caso contrário é 0.

Veja também