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.

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

• CSS Media Queries Level 4
• Atualização da consulta de mídia no MDN