prefers-reduced-motion: A veces, menos movimiento es más

La consulta de medios prefers-reduced-motion detecta si el usuario solicitó al sistema operativo que minimice la cantidad de animación o movimiento que usa.

Thomas Steiner

No a todos les gustan las animaciones o transiciones decorativas, y algunos usuarios sufren mareos cuando se enfrentan a efectos de desplazamiento paralaje, efectos de zoom y mucho más. La consulta de medios prefers-reduced-motion de preferencia del usuario te permite diseñar una variante con movimiento reducido de tu sitio para los usuarios que expresaron esta preferencia.

Demasiado movimiento en la vida real y en la Web

El otro día, fui a patinar sobre hielo con mis hijos. Era un día hermoso, el sol brillaba y la pista de patinaje estaba repleta de gente ⛸. El único problema era que no me gusta estar rodeado de multitudes. Con tantos objetivos en movimiento, no logro concentrarme en nada y termino sintiéndome perdido y con una sensación de sobrecarga visual completa, casi como si estuviera mirando un hormiguero 🐜.

En ocasiones, lo mismo puede ocurrir en la Web: con anuncios parpadeantes, efectos de paralaje sofisticados, animaciones de revelación sorprendentes, videos de reproducción automática y mucho más, la Web a veces puede ser bastante abrumadora… Afortunadamente, a diferencia de la vida real, existe una solución para eso. La consulta de medios CSS prefers-reduced-motion permite a los desarrolladores crear una variante de una página para los usuarios que prefieren un movimiento reducido. Esto puede incluir desde abstenerse de tener videos con reproducción automática hasta inhabilitar ciertos efectos puramente decorativos o rediseñar por completo una página para ciertos usuarios.

Antes de profundizar en la función, permítanme dar un paso atrás y pensar para qué se usan las animaciones en la Web. Si quieres, también puedes omitir la información general y pasar directamente a los detalles técnicos.

Animación en la Web

A menudo, la animación se usa para proporcionar comentarios al usuario, por ejemplo, para informarle que se recibió una acción y que se está procesando. Por ejemplo, en un sitio web de compras, un producto podría animarse para "volar" hacia un carrito de compras virtual, que se muestra como un ícono en la esquina superior derecha del sitio.

Otro caso de uso implica el uso del movimiento para manipular la percepción del usuario con una combinación de pantallas de esqueleto, metadatos contextuales y vistas previas de imágenes de baja calidad para ocupar gran parte del tiempo del usuario y hacer que toda la experiencia se sienta más rápida. La idea es darle contexto al usuario sobre lo que se viene y, mientras tanto, cargar las cosas lo más rápido posible.

Por último, existen efectos decorativos, como degradados animados, desplazamiento con paralaje, videos de fondo y muchos otros. Si bien muchos usuarios disfrutan de estas animaciones, a otros no les gustan porque sienten que los distraen o los ralentizan. En el peor de los casos, los usuarios pueden incluso sufrir mareos por movimiento como si fuera una experiencia de la vida real, por lo que, para ellos, reducir las animaciones es una necesidad médica.

Trastorno del espectro vestibular desencadenado por el movimiento

Algunos usuarios experimentan distracción o náuseas por el contenido animado. Por ejemplo, las animaciones de desplazamiento pueden causar trastornos vestibulares cuando los elementos que no son el elemento principal asociado con el desplazamiento se mueven mucho. Por ejemplo, las animaciones de desplazamiento de paralaje pueden causar trastornos vestibulares porque los elementos de fondo se mueven a una velocidad diferente a la de los elementos en primer plano. Las reacciones por trastornos vestibulares (oído interno) incluyen mareos, náuseas y migrañas, y, a veces, requieren reposo en cama para recuperarse.

Cómo quitar el movimiento en los sistemas operativos

Muchos sistemas operativos tienen parámetros de configuración de accesibilidad para especificar una preferencia por el movimiento reducido desde hace mucho tiempo. En las siguientes capturas de pantalla, se muestran las preferencias Reducir movimiento de macOS Mojave y Quitar animaciones de Android Pie. Cuando se marcan, estas preferencias hacen que el sistema operativo no use efectos decorativos, como animaciones de inicio de apps. Las aplicaciones también pueden y deben respetar este parámetro de configuración, y quitar todas las animaciones innecesarias.

Cómo quitar el movimiento en la Web

Media Queries Level 5 también lleva la preferencia del usuario de movimiento reducido a la Web. Las consultas de medios permiten a los autores probar y consultar valores o funciones del agente de usuario o del dispositivo de visualización, independientemente del documento que se renderiza. La consulta de medios prefers-reduced-motion se usa para detectar si el usuario estableció una preferencia del sistema operativo para minimizar la cantidad de animación o movimiento que usa. Puede tomar dos valores posibles:

• no-preference: Indica que el usuario no estableció ninguna preferencia en el sistema operativo subyacente. Este valor de palabra clave se evalúa como false en el contexto booleano.
• reduce: Indica que el usuario estableció una preferencia del sistema operativo que indica que las interfaces deben minimizar el movimiento o la animación, preferentemente hasta el punto en que se elimine todo movimiento no esencial.

Cómo trabajar con la consulta de medios desde contextos de CSS y JavaScript

Al igual que con todas las consultas de medios, prefers-reduced-motion se puede verificar desde un contexto de CSS y desde un contexto de JavaScript.

Para ilustrar ambos, supongamos que tengo un botón de registro importante en el que quiero que el usuario haga clic. Podría definir una animación de "vibración" que llame la atención, pero, como buen ciudadano de la Web, solo la reproduciré para los usuarios que acepten explícitamente las animaciones, pero no para todos los demás, que pueden ser usuarios que inhabilitaron las animaciones o usuarios en navegadores que no comprenden la consulta de medios.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

Para ilustrar cómo trabajar con prefers-reduced-motion con JavaScript, imagina que definí una animación compleja con la API de Web Animations. Si bien el navegador activará las reglas de CSS de forma dinámica cuando cambie la preferencia del usuario, en el caso de las animaciones de JavaScript, debo detectar los cambios por mi cuenta y, luego, detener manualmente las animaciones que podrían estar en curso (o reiniciarlas si el usuario me lo permite):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Ten en cuenta que los paréntesis alrededor de la consulta de medios real son obligatorios:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

Cómo trabajar con la consulta de medios de contextos de <picture>

Un caso de uso interesante es hacer que la reproducción de un AVIF, WebP o GIF animados dependa del atributo media. Si (prefers-reduced-motion: no-preference) se evalúa como true, es seguro mostrar la versión animada; de lo contrario, se muestra la versión estática:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Puedes ver el siguiente ejemplo. Intenta activar o desactivar las preferencias de movimiento de tu dispositivo para ver la diferencia.

Descubre las preferencias del usuario en el momento de la solicitud

El encabezado de sugerencia del cliente Sec-CH-Prefers-Reduced-Motion permite que los sitios obtengan las preferencias de movimiento del usuario de forma opcional en el momento de la solicitud, lo que permite que los servidores inserten el CSS correcto por motivos de rendimiento.

Demostración

Creé una pequeña demostración basada en los increíbles 🐈 gatos de estado HTTP de Rogério Vicente. Primero, tómate un momento para apreciar el chiste. Es muy gracioso, así que esperaré. Ahora que volviste, permíteme presentarte la demostración. Cuando te desplazas, cada gato de estado HTTP aparece alternativamente desde el lado derecho o izquierdo. Es una animación fluida de 60 FPS, pero, como se mencionó antes, a algunos usuarios puede no gustarles o incluso causarles mareos, por lo que la demostración está programada para respetar prefers-reduced-motion. Esto incluso funciona de forma dinámica, por lo que los usuarios pueden cambiar sus preferencias sobre la marcha, sin necesidad de volver a cargar la página. Si un usuario prefiere el movimiento reducido, las animaciones de revelación no necesarias desaparecen y solo queda el movimiento de desplazamiento normal. En el siguiente video, se muestra la demostración en acción:

Conclusiones

Respetar las preferencias del usuario es fundamental para los sitios web modernos, y los navegadores exponen cada vez más funciones para permitir que los desarrolladores web lo hagan. Otro ejemplo lanzado es prefers-color-scheme, que detecta si el usuario prefiere un esquema de color claro u oscuro. Puedes leer todo sobre prefers-color-scheme en mi artículo Hello Darkness, My Old Friend 🌒.

El Grupo de trabajo de CSS está estandarizando más consultas de medios de preferencias del usuario, como prefers-reduced-transparency (detecta si el usuario prefiere una transparencia reducida), prefers-contrast (detecta si el usuario solicitó al sistema que aumente o disminuya la cantidad de contraste entre colores adyacentes) y inverted-colors (detecta si el usuario prefiere colores invertidos).

(Bonus) Cómo forzar el movimiento reducido en todos los sitios web

No todos los sitios usarán prefers-reduced-motion, o tal vez no lo suficiente para tu gusto. Si, por algún motivo, quieres detener el movimiento en todos los sitios web, puedes hacerlo. Una forma de hacerlo es insertar una hoja de estilo con el siguiente CSS en cada página web que visites. Existen varias extensiones del navegador (úsalas bajo tu propia responsabilidad) que permiten hacer esto.

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

La forma en que funciona es que el CSS anterior anula las duraciones de todas las animaciones y transiciones a un tiempo tan corto que ya no se notan. Dado que algunos sitios web dependen de que se ejecute una animación para funcionar correctamente (quizás porque un determinado paso depende del disparo del evento animationend), el enfoque más radical de animation: none !important; no funcionaría. Incluso el truco anterior no garantiza que se realice correctamente en todos los sitios web (por ejemplo, no puede detener el movimiento que se inició con la API de Web Animations), así que asegúrate de desactivarlo cuando notes que se interrumpe.

Recursos

• Último borrador del editor de la especificación de Media Queries Level 5
• prefers-reduced-motion en Estado de la plataforma Chrome
• prefers-reduced-motion Error de Chromium.
• Blink Publicación de intención de implementación.

Agradecimientos

Un gran agradecimiento a Stephen McGruer, quien implementó prefers-reduced-motion en Chrome y, junto con Rob Dodson, también revisó este documento.