Seguindo alguma das sintaxes apresentadas anteriormente, é possível especificar o uso de estilos separados por arquivo ou blocos dentro do mesmo arquivo usando um
ou vários dos parâmetros a seguir. Importante ressaltar que a maioria dos parâmetros pode ser prefixado commin-oumax-, que representam, respectivamente, “maior ou igual a” e “menor que ou igual a” (assim como foi mostrado no exemplo anterior).
Vamos ver alguns desses parâmetros:
aspect-ratio
• Valor: <proporção> • Media: visual, tátil • Aceita min/max: sim
Descreve a proporção da área de exibição do browser usado. O valor é composto de dois números inteiros positivos, separados por um caractere de barra (“/”). Isso representa a proporção de pixels na horizontal (primeiro termo) para pixels na ver- tical (segundo termo).
Por exemplo, para aplicar regras com a janela do navegador em widescreen de proporção 16:9:
@media screen and (aspect-ratio: 16/9) { [...]
}
color
• Valor: <cor> • Media: visual
• Aceita min/max: sim
Indica o número de bits por componente de cor do dispositivo. Se ele não é um dispositivo de cor, o valor é igual a 0. Se os componentes de cor têm diferentes números de bits, o menor número é usado. Por exemplo, se um display utiliza 5 bits para azul e vermelho e 6 bits para verde, o dispositivo vai usar 5 bits. Se o dispositivo usa cores indexadas, o número mínimo de bits por componente de cor na tabela de cores é usado.
@media all and (color) { [...]
}
Ou, para estilos que somente serão aplicados em dispositivos com, pelo menos, 4 bits de cor:
@media all and (min-color: 4) { [...]
}
Ou ainda com no máximo 16 bits de cores:
@media (max-color: 16) { [...] } color-index • Valor: <inteiro> • Media: visual
• Aceita min/max: sim
Descreve o número de entradas na tabela de cores do dispositivo. Se o dispositivo não possuir tabela de cores, então o valor é 0.
Por exemplo, para especificar que algumas regras serão aplicadas a todos devices com cores indexadas:
@media all and (color-index) { [...]
}
Dispositivos com, pelo menos, 2 cores indexadas:
@media (min-color-index: 2) { [...]
}
Ou incorporar uma folha de estilos para, somente, dispositivos com menos de 256 cores indexadas:
<link rel="stylesheet" media="all and (max-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
device-aspect-ratio
• Valor: <proporção> • Media: visual, tátil • Aceita min/max: sim
Descreve a proporção do display do dispositivo. O valor é composto de dois nú- meros inteiros positivos, separados por um caractere de barra (“/”). Isso representa a proporção de pixels na horizontal (primeiro termo) para pixels na vertical (segundo termo).
Por exemplo, para aplicar regras em dispositivos widescreen:
@media screen and (device-aspect-ratio: 16/9),
screen and (device-aspect-ratio: 16/10) { [...]
}
device-height
• Valor: <comprimento> • Media: visual, tátil • Aceita min/max: sim
Descreve a altura, em pixels, do display do aparelho. Para meios contínuos, é a altura da tela; para meios paginados, é a altura do tamanho da folha de cada página. Por exemplo, aplicar uma folha de estilo a um documento quando visualizado numa tela menor que 480px de altura:
<link rel="stylesheet" media="screen and (max-device-height: 379px)" href="style.css">
device-width
• Valor: <comprimento> • Media: visual, tátil • Aceita min/max: sim
Descreve a largura, em pixels, do display do aparelho. Para meios contínuos, é a largura da tela; para meios paginados, é a largura do tamanho da folha de cada página. Obviamente, <comprimento> não pode ser um valor negativo.
Por exemplo, aplicar uma folha de estilo a um documento quando visualizado numa tela menor que 800px de largura:
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="style.css">
grid
• Valor: <inteiro> • Media: todas
• Aceita min/max: não
Determina se se trata de um dispositivo de grade ou um dispositivo de mapa de bits (bitmap). Se o dispositivo é baseado em grade (tal como um terminal TTY ou um visor do telefone, com apenas uma fonte), o valor é 1; caso contrário, é 0.
Por exemplo, para aplicar algumas regras a todos dispositivos assim:
@media (grid) { [...] }
Para aplicar um estilo em dispositivos móveis com display de 15 caracteres ou menos:
@media handheld and (grid) and (max-width: 15em) { [...]
Note que a unidade “em” tem um significado especial para dispositivos assim, já que a largura exata de um “em” não pode ser determinada, assume-se que 1em é a largura de uma célula da grade horizontal e a altura de uma célula vertical.
height
• Valor: <comprimento> • Media: visual, tátil • Aceita min/max: sim
Altura, em pixels, da janela do navegador sendo usado. Para meios contínuos, é a altura da viewport, incluindo o tamanho da barra de rolagem; para meios paginados, é a largura da “page box” da impressora. <comprimento> não pode ser um valor negativo.
Por exemplo, especificar algumas regras CSS para dispositivos com a altura da janela do browser em 300px:
@media screen and @media (height: 300px) { [...]
}
Ou com a altura menor que 600px:
@media screen and @media (max-height: 599px) { [...]
}
monochrome
• Valor: <inteiro> • Media: visual
• Aceita min/max: sim
Indica o número de bits por pixel em dispositivos monocromáticos (escala de cinza). Se o dispositivo não for monocromático, o valor é zero.
@media all and (monochrome) { [...]
}
Para aplicar estilos em qualquer dispositivo monocromático com, pelo menos, 2 bits por pixel:
@media all and (min-monochrome: 2) { [...]
}
orientation
• Valor: landscape | portrait • Media: visual
• Aceita min/max: não
Indica se o dispositivo está em modo “paisagem” (tela é mais larga que alta) ou “retrato” (tela é mais alta que larga).
Então, para se aplicar regras para dispositivos que estão no modo “paisagem”, basta usar:
@media all and (orientation:landscape) { [...]
}
resolution
• Valor: <resolução> • Media: bitmap • Aceita min/max: sim
Trata sobre a resolução (densidade de pixels) do dispositivo, que pode ser especi- ficada em pontos por polegada (dpi) ou pontos por centímetro (dpcm). Por exemplo:
@media (resolution: 72dpi) { [...] } @media (min-resolution: 118dpcm) { [...] }
Uma<resolução>sem algum dos prefixos “min-” ou “max-” nunca vai atuar em devices com pixels não-quadrados (non-square pixels).
scan
• Valor: progressive | interlace • Media: tv
• Aceita min/max: no
Trata sobre o processo de escaneamento que um dispositivo do tipo “TV” pode fazer. Por exemplo, para aplicar uma folha de estilo apenas para televisões com es- caneamento progressivo:
@media tv and (scan: progressive) { [...]
}
width
• Valor: <comprimento> • Media: visual, tátil • Aceita min/max: sim
Largura, em pixels, da janela do navegador sendo usado. Para meios contínuos, é a largura da viewport, incluindo o tamanho da barra de rolagem; para meios pagi- nados, é a largura da “page box” da impressora. <comprimento> não pode ser um valor negativo.
Por exemplo, especificar algumas regras CSS para dispositivos com a largura da janela do browser em 640px:
@media screen and @media (width: 640px) { [...]
}
Ou com a largura menor que 768px:
@media screen and @media (max-width: 767px) { [...]
}