Adapte sua interface aos recursos da taxa de atualização da tela.
As consultas de mídia CSS são uma ferramenta eficiente que permite controlar a aparência do seu site ou app da Web com base no dispositivo em que ele está sendo visualizado. Com consultas de mídia, é possível criar diferentes layouts para diferentes 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 está relacionado aos
recursos de diferentes dispositivos.
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 conteúdo e definir o estilo de acordo com isso, mantendo uma única folha de estilo.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
Os e-readers e dispositivos, como sistemas de pagamento de baixa potência, podem ter uma taxa de atualização lenta. Saber que o dispositivo não processa animações ou atualizações frequentes significa que você pode economizar bateria ou atualizar falhas de visualização na tela.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Por fim, há cenários como papel impresso ou telas de tinta eletrônica que podem oferecer apenas uma única passagem de renderização. Uma saída como essa não pode ser atualizada e é
chamada de none. É possível fazer a consulta assim:
@media (update: none) {
/* one time render like printed paper */
}
No CodePen abaixo, confira uma animação de passar o cursor aprimorada progressivamente usando esta nova consulta de mídia de atualização: