Recursos de mídia

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 designs de largura fixa ou layouts fluidos.

Tudo mudou com a introdução das consultas de mídia. Pela primeira vez, os designers podiam atender às necessidades das pessoas. Os designers poderiam ajustar os layouts para responder aos dispositivos das pessoas.

Lembre-se de que uma consulta de mídia inclui um tipo de mídia opcional e um recurso de mídia obrigatório. Não houve muitas mudanças nos tipos de mídia ao longo dos anos. Ainda há apenas quatro valores possíveis:

@media all
@media screen
@media print
@media speech

Já os recursos de mídia se expandiram muito. Agora os designers podem atender aos usuários além da metade, adaptando os designs para se ajustar a muito mais do que apenas o tamanho da tela.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

Dimensões da janela de visualização

As consultas de mídia mais populares na Web são as 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 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, eu gosto de usar min-width. Aplico estilos de layout de forma aditiva. Eu 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. Com min-height, é possível introduzir mais regras à medida que mais altura de viewport fica disponível. Por exemplo, você pode ter um elemento de cabeçalho que quer ancorar 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 aderência é 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. Ele 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 diferentes proporções pode sair do controle rapidamente. Se você não precisar desse nível de controle, o recurso de mídia orientation pode ser mais adequado às suas necessidades. Ele 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 mais usados para se referir à orientação de dispositivos móveis, o recurso de mídia orientation não é específico do dispositivo. Uma janela de navegador em tela cheia em um laptop típico terá um valor de orientation de landscape.

Telas

Telas diferentes têm densidades de pixels diferentes, medidas em dpi, pontos por polegada. É possível ajustar os estilos para diferentes densidades de pixel usando o recurso de mídia resolution. Assim como aspect-ratio, resolution tem 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 você nunca precise usar consultas de mídia resolution. A densidade de pixels geralmente é um problema apenas para imagens, e as imagens responsivas são uma maneira de lidar com a densidade de pixels diretamente no HTML.

Por outro lado, o CSS é onde você define 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 dos três valores: none, slow e fast.

Um valor de update de none significa que não há taxa de atualização. Por exemplo, não é possível atualizar uma página impressa.

Um valor de update de slow significa que a tela não pode ser atualizada rapidamente. Uma tela e-ink é um exemplo de tela com taxa de atualização lenta.

Um valor de update de fast significa que a tela é atualizada rápido o 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 aos recursos de hardware. No módulo sobre temas, você aprendeu a definir propriedades em um arquivo 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. O recurso de mídia display-mode correspondente permite personalizar seus estilos para essas diferentes opções.

Digamos que você tenha fornecido 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 mostrar um botão "Voltar" para esses usuários.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Cor

Há vários recursos de mídia para consultar os recursos de cores de um dispositivo. Se você quiser ajustar seus estilos para qualquer tela que só exiba 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 color correspondente.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Para telas coloridas, é possível escrever consultas com os recursos de mídia color-gamut, color-index ou dynamic-range. Todos eles informam detalhes específicos sobre os recursos de cores 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 de dynamic-range de high recebe um espaço de cor diferente usando a nova função color() do CSS.

.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. Consulte o módulo sobre interação para mais detalhes.

Preferências

Há uma variedade de consultas de mídia que permitem responder às preferências do usuário: prefers-color-scheme, prefers-contrast e prefers-reduced-motion. Consulte os módulos sobre temas e acessibilidade para mais detalhes.

É possível combinar recursos de mídia em uma consulta de mídia. Você pode definir o escopo dos estilos de animação para que eles sejam aplicados apenas se o dispositivo tiver uma taxa de atualização rápida e o usuário não tiver expressado uma 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 estão a caminho.

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 scripting permite ajustar o 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 com franquia para que você possa enviar recursos menores ou menos deles.

Outras propostas ainda estão sendo formuladas. No próximo e último módulo, você vai aprender sobre uma proposta de um recurso de mídia que processa diferentes configurações de tela.

Teste seu conhecimento

Teste seus conhecimentos sobre recursos de mídia

Uma consulta de mídia pode verificar um dispositivo com uma largura específica, como @media (width: 1024px)?

Verdadeiro
Uma largura específica só pode ser alcançada verificando simultaneamente a largura acima de 1023px e abaixo de 1025px.
Falso
min-width e max-width estão disponíveis.

Uma consulta de mídia pode verificar um dispositivo em um aspect-ratio específico, como @media (aspect-ratio: 4/3)?

Verdadeiro
A proporção única pode ser combinada.
Falso
Essa opção existe para aspect-ratio.

Quais são as consultas de mídia de cor válidas?

@media (color)
Corresponde a qualquer dispositivo colorido.
@media (monochrome)
Corresponde a qualquer dispositivo sem capacidade de cores.
@media (color-gamut: srgb)
Corresponde a dispositivos com capacidade de cor sRGB.
@media (min-color-index: 15000)
Combina com dispositivos com pelo menos 15 mil cores disponíveis.
@media (dynamic-range: high)
Corresponde a dispositivos com intervalos de cores em HD.

Quais das seguintes consultas de mídia de preferência do usuário são válidas?

@media (prefers-color-scheme: dark)
Corresponde ao modo escuro do sistema operacional do usuário.
@media (prefers-colors: high-definition)
Não é verdade.
@media (prefers-reduced-motion: reduce)
Corresponde ao momento em que o sistema operacional de um usuário está configurado para reduzir o movimento.
@media (prefers-contrast: more)
Corresponde quando o sistema operacional do usuário está definido para contrastes mais altos.
@media (prefers-site-speed: fast)
Não é verdade.