Adapta tu IU a las capacidades de frecuencia de actualización de la pantalla.
Las consultas de medios de CSS son una herramienta potente que te permite controlar el aspecto de tu sitio web o app web en función del dispositivo en el que se vea. Con las consultas de medios, puedes crear diferentes diseños para distintos tamaños de pantalla, orientaciones y otros factores.
La consulta de medios update te brinda una manera de adaptar la IU a la frecuencia de actualización de un dispositivo. La función puede informar un valor de fast, slow o none que se relaciona con las capacidades de diferentes dispositivos.
Dispositivos y frecuencia de actualización
Es probable que la mayoría de los dispositivos para los que diseñas tengan una frecuencia de actualización rápida. Se incluyen las computadoras de escritorio y la mayoría de los dispositivos móviles.
Puedes consultar el dispositivo, comprobar si tiene una frecuencia de actualización rápida para renderizar contenido y aplicar el diseño correspondiente sin dejar de entregar una sola hoja de estilo.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
Los dispositivos electrónicos y los dispositivos, como los sistemas de pago de bajo consumo, pueden tener una frecuencia de actualización lenta. Saber que el dispositivo no puede controlar animaciones ni actualizaciones frecuentes significa que puedes ahorrar el uso de batería o ver actualizaciones defectuosas.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Por último, hay situaciones, como pantallas de papel impreso o tinta electrónica, que solo pueden ofrecer un solo pase de renderización. Este resultado no se puede actualizar y se denomina none. Se puede consultar de la siguiente manera:
@media (update: none) {
/* one time render like printed paper */
}
En el siguiente CodePen, observa una animación de desplazamiento mejorada progresivamente con esta nueva consulta de medios de actualización: