Recursos de mídia

O design responsivo não seria possível sem as consultas de mídia. Antes das media queries, não havia como saber que tipo de dispositivo as pessoas estavam usando para visitar seu site. Os designers precisavam fazer suposições. Essas proposições foram codificadas em designs de largura fixa ou layouts fluidos.

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

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

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

Dimensões da janela de visualização

De longe, as consultas de mídia mais usadas na Web são as que lidam com a largura da janela de visualização. Mas mesmo aqui, 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, gosto de usar o min-width. Aplico estilos de layout de forma aditiva. Introduzo novas regras de layout em cada ponto de interrupção em vez de desfazer as anteriores.

Essa abordagem aditiva também funciona para altura. Usando min-height, é possível introduzir mais regras à medida que mais altura da janela de visualização fica disponível. Por exemplo, talvez você queira fixar um elemento de cabeçalho na parte de cima da janela do navegador se houver espaço vertical suficiente.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Mas, se preferir, use o recurso de mídia max-height. Aqui, o cabeçalho é ancorado por padrão, mas a fixaçã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. 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.
}

Oferecer estilos diferentes para proporções diferentes pode sair do controle rapidamente. Se você não precisar desse nível de controle refinado, o recurso de mídia orientation pode ser mais adequado. 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 usados com mais frequência para se referir à orientação de dispositivos móveis, o recurso de mídia orientation não é específico para dispositivos. Uma janela do navegador em tela cheia em um laptop comum terá um valor orientation de landscape.

Telas

Telas diferentes têm densidades de pixel 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 em HTML.

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

Um valor update de none 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 uma taxa de atualização lenta.

Um valor update de fast significa que a tela é atualizada rápido o suficiente para lidar com 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 do 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.

Suponha que você tenha fornecido um valor display de standalone no manifesto do seu app da Web. Se alguém adicionar seu site à tela inicial, ele será aberto sem interface do navegador. Você pode decidir 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 as capacidades de cor de um dispositivo. Se você quiser ajustar seus estilos para qualquer tela que só mostre 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 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. Consulte o módulo sobre interação para mais detalhes.

Consultas de preferências do usuário

Com o CSS, você pode colaborar com os usuários para garantir que eles acessem seu conteúdo da maneira mais adequada. Nesta lição, você aprendeu a aplicar diferentes CSSs com base nas dimensões e nos recursos do dispositivo do usuário. Mas também é possível aplicar CSSs diferentes com base nas configurações do usuário.

Modo claro e escuro

Você pode responder à preferência do usuário por um tema claro ou escuro. Muitos usuários definem isso como uma preferência do sistema.

Definir o esquema de cores para elementos da interface do usuário

O navegador fornece cores padrão para elementos como barras de rolagem e formulários. Você pode especificar se quer usar um tema claro para pessoas com color-scheme: light ou um tema escuro com color-scheme: dark. Você também pode especificar que a página é compatível com os dois usando color-scheme: light dark. É possível definir isso no elemento :root ou html para definir o esquema de toda a página ou substituir para elementos específicos.

Você também pode definir uma tag meta para color-scheme e definir o esquema de uma página antes que os estilos sejam carregados. Se você definir color-scheme: normal em um elemento da página, ele vai usar o valor color-scheme definido nessa metatag.

<meta name="color-scheme" content="dark light">

prefers-color-scheme recurso de mídia

Você também pode definir estilos personalizados em resposta ao tema de cores preferido de um usuário com uma consulta de mídia para prefers-color-scheme.

light-dark

Se você estiver oferecendo aos usuários a opção de escolher entre um tema claro e um escuro, talvez seja muito detalhado definir cada cor dentro de uma consulta de mídia. light-dark() permite especificar os dois em uma única propriedade.

Para ativar esse recurso, defina color-scheme: light dark no elemento ou em um dos ancestrais dele. Primeiro, defina uma cor para usar no modo claro e outra para usar no modo escuro.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Se a preferência do sistema de um usuário estiver definida para solicitar o modo claro, o cabeçalho será preto. Se a preferência for o modo escuro, o cabeçalho será branco.

Preferências de contraste

Seus usuários podem achar mais fácil ler conteúdo com contraste alto ou baixo e podem configurar o sistema para substituir seu tema pelo que funciona melhor para eles. Sua função é garantir que o site ainda funcione bem com as preferências deles.

Você deve se lembrar do módulo em cascata, em que os estilos de usuário local !important podem substituir os estilos criados que uma página da Web oferece. Isso permite que os usuários usem estilos que funcionam melhor para eles.

Cores forçadas

O Windows oferece "Temas de contraste" que os usuários podem selecionar para substituir os temas de um site. Esses temas geralmente têm alto contraste e podem estar no modo claro ou escuro. Em CSS, isso é chamado de cores forçadas, e, na maioria dos casos, seu site vai se comportar como esperado nesse modo. Botões, links, entradas e outros conteúdos vão usar as cores do tema.

Às vezes, é necessário ajustar os estilos, por exemplo, se você estiver usando elementos de maneiras não padrão. Você pode usar a consulta de mídia @media (forced-colors: active) para aplicar estilos quando um usuário ativa as cores forçadas.

Em alguns casos, os estilos de um site são essenciais para entender o conteúdo em si, por exemplo, um seletor de cores ou um gráfico com uma legenda de cores. É possível definir forced-color-adjust: none; em um elemento para desativar o modo de cores forçadas. Desative apenas em elementos específicos e verifique se o conteúdo ainda está acessível no modo de cores forçadas.

Alto contraste

Alguns usuários também podem configurar o sistema para solicitar maior contraste. É possível ajustar os estilos na resposta com a consulta de mídia prefers-contrast: more.

Movimento reduzido

Você pode responder à preferência de um usuário por movimento reduzido com a consulta de mídia prefers-reduced-motion. Isso geralmente é usado para fornecer animações alternativas que evitam movimentos bruscos que podem ser gatilhos para pessoas com epilepsia, distúrbios vestibulares ou sensibilidade a enxaqueca. Leia mais em Considerações ao trabalhar com animação.

Roteiro

Seus usuários podem acessar seu site com o JavaScript desativado, e você pode ajustar o CSS para que eles ainda possam acessar seu conteúdo usando a consulta de mídia scripting.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Teste seu conhecimento

Teste seus conhecimentos sobre recursos de mídia