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
Adam Argyle
X GitHub

Las consultas de medios de CSS son una herramienta herramienta que te permite controlar el aspecto de tu sitio web o aplicación web en el dispositivo en el que se ven. Con las consultas de medios, puedes crear diferentes diseños para diferentes tamaños de pantalla, orientaciones y otros factores.

El update consulta de medios te ofrece una manera de adaptar la IU a la frecuencia de actualización de un dispositivo. El el atributo puede informar un valor de fast, slow o none que se relacione con la capacidades de diferentes dispositivos,

Navegadores compatibles

  • Chrome: 113
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Origen

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. Esta incluye computadoras de escritorio y la mayoría de los dispositivos móviles.

Puedes consultar el dispositivo y ver si tiene una frecuencia de actualización rápida para la renderización. el contenido y el estilo en consecuencia mientras se entrega una sola hoja de estilo.

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

Los lectores de libros electrónicos y los dispositivos como los sistemas de pago de baja energía pueden tener frecuencia de actualización. Saber que el dispositivo no puede procesar animaciones actualizaciones, lo que 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 papel impreso o pantallas de tinta electrónica que solo ofrecen un solo pase de renderización. Un resultado como este no se puede actualizar en absoluto y denominado none. Se puede consultar de la siguiente manera:

@media (update: none) {
  /* one time render like printed paper */
}

En el siguiente CodePen, verás una animación de desplazamiento progresivamente mejorada usando esta nueva consulta de medios de actualización:

Más recursos