Utilizar consultas de média

O CSS 3 aumenta o suporte a folhas de estilo dependentes de mídia deixando-as mais precisamente marcadas. Uma consulta de mídia consiste em um tipo de mídia e em último caso uma expressão que limita o escopo das folhas de estilo usando recursos de mídia, tais como largura, altura e cor. Consultas de mídia deixam a apresentação do conteúdo adaptar-se a uma faixa específica de dispositivos de saída sem ter que mudar o conteúdo.

Sintaxe

Consultas de média consistem num tipo de média e uma ou mais expressões envolvendo recursos de mídia, que decide entre verdadeiro ou falso. 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á sendo 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.

Operadores lógicos

Você pode compor consultas de mídia complexas usando operadores locais, incluindo not, and, e only.

Além disso, você pode combinar múltiplas consultas de mídia em uma lista separada por vírgulas; se qualquer das consultas de mídia da lista for verdadeira, a folha de estilos associada é aplicada. Isto é equivalente ao operador lógico "or".

A palavra-chave not, nega o resultado para a consulta; "all and (not color)" é verdadeiro para dispositivos monocromáticos independente do tipo de mídia, por exemplo.

A palavra-chave only esconderá folhas de estilos de navegadores antigos que não suportem consultas de mídia:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

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 conflitar com o HTML e o XML. Se você usa 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="https://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: progressive | interlace
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="https://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.