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

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

Adam Argyle
Adam Argyle
X GitHub

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 esteja relacionado às capacidades 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 terá 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 com falhas de visualização.

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

Por fim, há cenários como telas de papel impresso ou telas eletrônicas que podem oferecer apenas uma única passagem de renderização. Saídas como essa não podem ser atualizadas e são chamadas de none. Ele pode ser consultado assim:

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

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

Mais recursos