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 procesar animaciones ni actualizaciones frecuentes, te permite ahorrar batería o actualizaciones de vista defectuosas.

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

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

Más recursos

• Consultas de medios de CSS nivel 4
• Actualiza una consulta de medios en MDN