Um resumo de todas as maneiras como os recursos de mídia permitem que você responda a dispositivos e preferências.
O design responsivo não seria possível sem as consultas de mídia. Antes das consultas de mídia, não havia como saber que tipo de dispositivo as pessoas estavam usando para visitar seu site. Os designers tiveram que fazer suposições. Essas suposições foram codificadas em projetos com largura fixa ou layouts líquidos.
Tudo isso mudou com o lançamento das consultas de mídia. Pela primeira vez, os designers podiam encontrar pessoas na metade do caminho. Os designers podiam ajustar os layouts para responder aos dispositivos das pessoas.
Lembre-se de que uma consulta de mídia compreende um tipo de mídia opcional e um recurso de mídia obrigatório. Não houve muita mudança nos tipos de mídia ao longo dos anos. Ainda há apenas quatro valores possíveis:
@media all
@media screen
@media print
@media speech
Os recursos de mídia, por outro lado, cresceram bastante. Agora, os designers podem atender aos usuários além da metade, adaptando os designs para se adequarem muito mais do que apenas o tamanho da tela.
Dimensões da janela de visualização
De longe, as consultas de mídia mais populares na Web são aquelas que lidam com a largura da janela de visualização. Mas mesmo assim você tem uma escolha. Você pode usar o recurso de mídia max-width para aplicar estilos abaixo de uma determinada largura ou usar o recurso de mídia min-width para aplicar estilos acima de uma determinada largura.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Pessoalmente, gosto de usar o min-width. aplico estilos de layout de maneira aditiva. Apresento novas regras de layout em cada ponto de interrupção em vez de desfazer regras anteriores.
Essa abordagem aditiva também funciona para altura. Usando min-height, você pode introduzir mais regras à medida que mais alturas da janela de visualização são disponibilizadas. Por exemplo, é possível ter um elemento de cabeçalho que você quer fixar na parte de cima da janela do navegador se houver espaço vertical suficiente.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Mas você pode usar o recurso de mídia max-height, se preferir. Aqui, o cabeçalho é ancorado por padrão, mas a adesão é removida se não houver espaço vertical suficiente.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
A escolha entre os prefixos min- e max- não se aplica apenas a width e height. O recurso de mídia aspect-ratio oferece a mesma opção. Ela também oferece uma versão sem prefixo se você quiser aplicar estilos em uma proporção exata de largura para altura.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
Fornecer estilos diferentes para proporções distintas pode sair do controle. Se você não precisa desse nível de controle, o recurso de mídia orientation pode atender melhor às suas necessidades. Ela tem dois valores possíveis: portrait ou landscape.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
Embora os termos "retrato" e "paisagem" sejam usados com mais frequência para se referir à orientação dos dispositivos móveis, o recurso de mídia orientation não é específico do dispositivo. Uma janela do navegador em tela cheia em um laptop comum tem um valor orientation de landscape.
Telas
Telas diferentes têm densidades de pixel distintas, medidas em dpi, pontos por polegada. É possível ajustar os estilos para diferentes densidades de pixel usando o recurso de mídia resolution. Como aspect-ratio, resolution vem em três variedades: mínimo, máximo e exato.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
Talvez nunca seja necessário usar consultas de mídia resolution. A densidade de pixels geralmente é um problema apenas para imagens, e as imagens responsivas são uma forma de lidar com a densidade de pixels diretamente em HTML.
Por outro lado, é no CSS que você define suas animações e transições. É possível ajustar essas animações e transições para responder a diferentes taxas de atualização usando o recurso de mídia update. Esse recurso de mídia informa um destes três valores: none, slow e fast.
O valor none de update significa que não há taxa de atualização. Uma página impressa, por exemplo, não pode ser atualizada.
Um valor update de slow significa que a tela não pode ser atualizada rapidamente. Uma tela de tinta eletrônica é um exemplo de tela com taxa de atualização lenta.
Um valor update de fast significa que a tela é atualizada com rapidez suficiente para processar animações e transições.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Nem todos os aspectos da tela estão relacionados às capacidades de hardware. No módulo de aplicação de temas, você aprendeu a definir propriedades em um arquivo de manifesto de app da Web. Uma dessas propriedades é chamada de display, e você pode atribuir a ela um valor de fullscreen, standalone, minimum-ui ou browser. Com o recurso de mídia correspondente display-mode, você pode personalizar seus estilos para essas diferentes opções.
Digamos que você enviou um valor display de standalone no manifesto do app da Web. Se alguém adicionar seu site à tela inicial, ele será iniciado sem nenhuma interface do navegador. Você pode exibir um botão "Voltar" para esses usuários.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Cor
Existem vários recursos de mídia para consultar as capacidades de cor de um dispositivo. Se você quiser ajustar os estilos para qualquer tela que gere apenas tons de cinza, use o recurso de mídia monochrome sem nenhum valor.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Há um recurso de mídia correspondente color.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
Para telas coloridas, você pode escrever consultas com os recursos de mídia color-gamut, color-index ou dynamic-range. Todos eles relatam detalhes específicos sobre os recursos de cor da tela.
Neste exemplo, os valores de cor são atualizados em resposta ao recurso de mídia dynamic-range, que informa a combinação de brilho máximo, profundidade de cor e taxa de contraste da tela. Os valores possíveis são standard ou high. Uma tela de alta definição que informa um valor dynamic-range de high recebe um espaço de cor diferente usando a nova função CSS color().
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
Interação
Os recursos de mídia também podem informar o tipo de mecanismo de entrada usado para interagir com seu site: hover, any-hover, pointer e any-pointer. Veja o módulo sobre interação para mais detalhes.
Preferências
Há várias consultas de mídia que permitem responder às preferências do usuário: prefers-color-scheme, prefers-contrast e prefers-reduced-motion. Veja os módulos sobre temas e acessibilidade para mais detalhes.
É possível combinar recursos de mídia em uma consulta de mídia. É possível definir o escopo dos seus estilos de animação para que eles sejam aplicados somente se o dispositivo tiver uma taxa de atualização rápida e o usuário não tiver expressado preferência por movimento reduzido.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Mais recursos de mídia
Mais recursos de mídia serão lançados em breve.
Os recursos de mídia forced-colors e inverted-colors informam se um dispositivo está usando uma paleta de cores restrita ou invertida.
Um recurso de mídia do scripting permite que você ajuste seu CSS com base na disponibilidade do JavaScript.
Um recurso de mídia chamado prefers-reduced-data permite que os usuários especifiquem que estão em uma conexão limitada para que você possa enviar recursos menores ou menos.
Outras propostas ainda estão sendo formuladas. No próximo e último módulo, você vai aprender sobre a proposta de um recurso de mídia que lida com diferentes configurações de tela.
Teste seu conhecimento
Teste seus conhecimentos sobre recursos de mídia
Uma consulta de mídia pode procurar um dispositivo com uma largura específica, como @media (width: 1024px)?
1023px e abaixo de 1025px.min-width e max-width são os que estão disponíveis.Uma consulta de mídia pode procurar um dispositivo em uma aspect-ratio específica, como @media (aspect-ratio: 4/3)?
aspect-ratio.Quais são as consultas de mídia de cores válidas?
@media (color)@media (monochrome)@media (color-gamut: srgb)@media (min-color-index: 15000)@media (dynamic-range: high)Quais das seguintes consultas de mídia de preferência do usuário são válidas?
@media (prefers-color-scheme: dark)@media (prefers-colors: high-definition)@media (prefers-reduced-motion: reduce)@media (prefers-contrast: more)@media (prefers-site-speed: fast)