Consulta de mídia de atualização de CSS

Adapte a interface aos recursos de taxa de atualização da tela.

Adam Argyle

As consultas de mídia do CSS são uma ferramenta poderosa que permite controlar a aparência do seu site ou aplicativo da Web com base no dispositivo em que ele está sendo visualizado. Com as consultas de mídia, é possível criar layouts diferentes para tamanhos de tela, orientações e outros fatores.

A consulta de mídia update oferece uma maneira de adaptar a interface à taxa de atualização de um dispositivo. O recurso pode informar um valor de fast, slow ou none, que se relaciona aos recursos de diferentes dispositivos.

Compatibilidade com navegadores

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Origem

Dispositivos e taxa de atualização

A maioria dos dispositivos para os quais você projeta provavelmente tem uma taxa de atualização rápida. Isso inclui computadores e a maioria dos dispositivos móveis.

É possível consultar o dispositivo, conferir se ele tem uma taxa de atualização rápida para renderizar o conteúdo e estilizar de acordo com isso, ainda entregando uma única folha de estilos.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

Leitores de e-books e dispositivos como sistemas de pagamento de baixa potência podem ter uma taxa de atualização lenta. Saber que o dispositivo não pode processar animações ou atualizações frequentes significa que você pode economizar o uso da bateria ou atualizações de visualização com falhas.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

Por fim, há cenários como papel impresso ou telas de e-ink que podem oferecer apenas uma única passagem de renderização. Uma saída como essa não pode ser atualizada e é chamada de none. Ele pode ser consultado assim:

@media (update: none) {
  /* one time render like printed paper */
}

No CodePen a seguir, confira uma animação de passagem do cursor aprimorada progressivamente usando esta nova consulta de atualização de mídia:

Mais recursos