Recursos de mídia

Resumo de todas as maneiras como os recursos de mídia permitem responder 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 usavam para acessar seu site. Designers tinham que fazer suposições. Essas suposições foram codificadas em designs de largura fixa ou layouts líquidos.

Tudo isso mudou com a introdução das consultas de mídia. Pela primeira vez, designers conseguiam encontrar pessoas no meio do caminho. Os designers poderiam ajustar os layouts para responder aos dispositivos das pessoas.

Lembre-se, 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, tiveram uma grande expansão. Agora, designers podem encontrar usuários além da metade, adaptando designs para que caibam muito mais do que apenas o tamanho da tela.

Compatibilidade com navegadores

• 1
• 12
• 1
• 3

Origem

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 aqui, você tem a opção de escolher. 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 min-width. Eu aplico estilos de layout de forma aditiva. Apresento novas regras de layout em cada ponto de interrupção em vez de desfazer as regras anteriores.

Essa abordagem aditiva também funciona para altura. Com min-height, é possível introduzir mais regras à medida que a altura da janela de visualização aumenta. Por exemplo, você pode ter um elemento de cabeçalho que 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;
  }
}

Escolher 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 caso você queira 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.
}

Oferecer estilos diferentes para proporções distintas pode rapidamente 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 o termo "retrato" e "paisagem" são 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 do navegador em tela cheia em um laptop comum terá um valor de orientation de landscape.

Telas

Telas diferentes têm densidades de pixel diferentes, medidas em dpi, pontos por polegada. É possível ajustar seus estilos para diferentes densidades de pixel usando o recurso de mídia resolution. Assim como aspect-ratio, a resolution vem em três variedades: mínima, máxima e exata.

@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 no HTML.

Por outro lado, é no CSS que você define as animações e transições. Você pode 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.

Um valor update de none significa que não há taxa de atualização. Por exemplo, uma página impressa não pode ser atualizada.

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

Um valor update de fast significa que a tela será 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 aos recursos de hardware. No módulo de aplicação de temas, você viu como 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. O recurso de mídia display-mode correspondente permite que você personalize 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, o site será iniciado sem nenhuma interface do navegador. Você pode decidir exibir um botão "Voltar" para esses usuários.

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

Cor

Existem inúmeros recursos de mídia para consultar as capacidades de cor de um dispositivo. Se você quiser ajustar os estilos de 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 color correspondente.

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

Para telas coloridas, você pode criar consultas com os recursos de mídia color-gamut, color-index ou dynamic-range. Todos eles informam detalhes específicos sobre as capacidades 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 cores 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. Consulte 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. Consulte os módulos sobre temas e acessibilidade para mais detalhes.

Você pode combinar recursos de mídia em uma consulta de mídia. É possível definir o escopo dos estilos de animação para que 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

Outros recursos de mídia serão lançados em breve.

Os recursos de mídia forced-colors e inverted-colors informam se o dispositivo está usando uma paleta de cores restrita ou invertida.

Um recurso de mídia do 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 limitada para enviar recursos menores ou menos.

Outras propostas ainda estão sendo formuladas. No próximo e último módulo, você vai conhecer uma proposta para 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)?

Verdadeiro

Para definir uma largura específica, verifique simultaneamente a largura acima de 1023px e abaixo de 1025px.

Falso

min-width e max-width são os valores disponíveis.

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

Verdadeiro

Exclusivo para proporção, uma única proporção pode ser correspondida.

Falso

Essa opção existe para aspect-ratio.

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

@media (color)

Combina com qualquer dispositivo colorido.

@media (monochrome)

Compatível com qualquer dispositivo sem recursos de cor.

@media (color-gamut: srgb)

Corresponde a dispositivos com o recurso de cor sRGB.

@media (min-color-index: 15000)

Corresponde a dispositivos com pelo menos 15 mil cores disponíveis.

@media (dynamic-range: high)

Corresponde a dispositivos com suporte a variações de cores em alta definição.

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

@media (prefers-color-scheme: dark)

Corresponde quando um usuário tem o sistema operacional definido para o modo escuro.

@media (prefers-colors: high-definition)

Não é real.

@media (prefers-reduced-motion: reduce)

Corresponde quando um usuário tem o sistema operacional configurado para reduzir o movimento.

@media (prefers-contrast: more)

Corresponde quando um usuário tem o sistema operacional definido para contrastes mais altos.

@media (prefers-site-speed: fast)

Não é real.