Consulta de medios de la actualización de CSS

Adapta tu IU a las capacidades de frecuencia de actualización de la pantalla.

Adam Argyle

Las consultas de medios de CSS son una herramienta potente que te permite controlar la apariencia de tu sitio web o app web según el dispositivo en el que se visualiza. Con las consultas de medios, puedes crear diferentes diseños para diferentes tamaños de pantalla, orientaciones y otros factores.

La consulta de medios update te brinda una forma 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. Esto incluye computadoras de escritorio y la mayoría de los dispositivos móviles.

Puedes consultar el dispositivo, ver si tiene una frecuencia de actualización rápida para renderizar contenido y aplicarle diseño según corresponda sin dejar de entregar un solo diseño de página.

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

Es posible que los lectores electrónicos y los dispositivos como los sistemas de pago de baja potencia tengan una frecuencia de actualización lenta. Saber que el dispositivo no puede controlar la animación ni las actualizaciones frecuentes significa que puedes ahorrar el uso de batería o las actualizaciones de vista defectuosas.

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

Por último, hay situaciones como el papel impreso o las pantallas de tinta electrónica que solo pueden ofrecer un solo pase de renderización. Los resultados como este no se pueden actualizar y se denominan 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 de forma progresiva con esta nueva consulta de medios de actualización:

Más recursos

• Consultas de medios de CSS nivel 4
• Actualiza la consulta de contenido multimedia en MDN