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

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

Adam Argyle

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

A update a consulta de mídia oferece uma maneira de adaptar a interface à taxa de atualização de um dispositivo. A atributo pode informar um valor de fast, slow ou none, que está relacionado ao recursos de vários 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.

Você pode consultar o dispositivo e conferir se ele tem uma taxa de atualização rápida para renderização conteúdo e estilo de acordo com ele, sem deixar de entregar uma única folha de estilo.

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

e-readers e dispositivos como sistemas de pagamento de baixa potência, podem apresentar lentidão e a taxa de atualização. Saber que o dispositivo não consegue lidar com animações ou atualizações, significa que você pode economizar o uso da bateria ou atualizações de visualização com defeito.

@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 apenas oferecer uma única passagem de renderização. Uma saída como essa não pode ser atualizada e é conhecido como none. Ela pode ser consultada da seguinte forma:

@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

• Nível 4 das consultas de mídia CSS
• Atualizar consulta de mídia no MDN