La consulta de medios prefers-reduced-motion detecta si el usuario solicitó que el sistema operativo minimice la cantidad de animación o movimiento que utiliza.
No a todo el mundo le gustan las transiciones o las animaciones decorativas, y algunos usuarios experimentan mareos de movimiento cuando se enfrentan al desplazamiento con paralaje, los efectos de zoom, etcétera. La consulta de medios de preferencia del usuario prefers-reduced-motion te permite diseñar una variante con reducción de movimiento de tu sitio para los usuarios que expresaron esta preferencia.
Demasiado movimiento en la vida real y en la Web
El otro día, patiné sobre hielo con mis hijos. Era un día hermoso, brillaba el sol y la pista de hielo estaba llena de gente ⛸. El único problema es que no me manejo bien con las multitudes. Con tantos objetivos en movimiento, no me concentro en nada y termino perdido y con una sensación de sobrecarga visual absoluta, casi como mirar a un hormiguero 🐜.
En ocasiones, lo mismo puede suceder en la Web: con anuncios intermitentes, efectos de paralaje sofisticados, animaciones reveladoras sorprendentes, videos con reproducción automática, etc., a veces la Web puede resultar abrumadora... Afortunadamente, a diferencia de lo que ocurre en la vida real, existe una solución para eso. La consulta de medios de CSS prefers-reduced-motion permite a los desarrolladores crear una variante de una página para los usuarios que prefieren el movimiento reducido. Esto incluye cualquier cosa, desde evitar tener videos de reproducción automática hasta inhabilitar ciertos efectos meramente decorativos, o rediseñar por completo una página para ciertos usuarios.
Antes de sumergirnos en esta función, repasemos y pensemos para qué se usan las animaciones en la Web. Si lo deseas, también puedes omitir la información general y pasar directamente a los detalles técnicos que se muestran a continuación.
Animación en la Web
A menudo, las animaciones se usan para proporcionarle comentarios al usuario, por ejemplo, para informarle que se recibió y se está procesando una acción. Por ejemplo, en un sitio web de compras, se puede animar un producto para que "vuele" a un carrito de compras virtual, representado como un ícono en la esquina superior derecha del sitio.
Otro caso de uso consiste en usar el movimiento para hackear 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 mucho tiempo del usuario y hacer que toda la experiencia se sienta más rápida. La idea es brindarle al usuario contexto sobre lo que viene y, mientras tanto, cargar los elementos lo más rápido posible.
Por último, hay efectos decorativos, como gradientes animados, desplazamiento con paralaje, videos de fondo y muchos más. Si bien muchos usuarios disfrutan de esas animaciones, a algunos no les gustan porque se distraen o ralentizan. En el peor de los casos, los usuarios pueden incluso padecer mareos como si fuera en una experiencia real, por lo que reducir las animaciones es una necesidad médica.
Trastorno del espectro vestibular provocado por el movimiento
Algunos usuarios experimentan distracción o náuseas debido al contenido animado. Por ejemplo, las animaciones de desplazamiento pueden causar trastornos vestibulares cuando los elementos que no son el principal asociado con el desplazamiento se mueven mucho. Por ejemplo, las animaciones de desplazamiento con paralaje pueden causar trastornos vestibulares porque los elementos en segundo plano se mueven a una velocidad diferente que los elementos en primer plano. Las reacciones del trastorno vestibular (oído interno) incluyen mareos, náuseas y migrañas que, a veces, requieren reposo para recuperarse.
Quita el movimiento en los sistemas operativos
Muchos sistemas operativos han tenido parámetros de configuración de accesibilidad para especificar una preferencia por el movimiento reducido durante mucho tiempo. En las siguientes capturas de pantalla, se muestran las preferencias Reduce move de macOS Mojave y Quitar animaciones de Android Pie. Cuando se marca esta opción, estas preferencias hacen que el sistema operativo no use efectos decorativos, como animaciones de inicio de apps. Las aplicaciones en sí pueden y deben respetar esta configuración, además de quitar todas las animaciones innecesarias.
Quita movimiento en la Web
El nivel de consultas de medios 5 también lleva a la Web la preferencia del usuario con movimiento reducido. Las consultas de medios permiten a los autores probar y consultar valores o funciones del usuario-agente 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 adoptar dos valores posibles:
no-preference: Indica que el usuario no tiene preferencia en el sistema operativo subyacente. Este valor de palabra clave se evalúa comofalseen el contexto booleano.reduce: Indica que el usuario estableció una preferencia de sistema operativo que indica que las interfaces deben minimizar el movimiento o la animación, preferentemente hasta el punto en que se quitan todos los movimientos no esenciales.
Trabaja 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 un contexto de JavaScript.
Para ilustrar ambos, digamos 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 tienen aprobación explícita con las animaciones, pero no para todos los demás, que pueden ser usuarios que inhabilitaron las animaciones o usuarios que utilizan 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, imaginemos que definí una animación compleja con la API de Web Animations. Si bien el navegador activará dinámicamente las reglas de CSS cuando cambie la preferencia del usuario, para las animaciones de JavaScript, debo escuchar los cambios y, luego, detener manualmente las animaciones que podrían estar en tránsito (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 que encierran la consulta de medios real son obligatorios:
window.matchMedia('prefers-reduced-motion: reduce');
window.matchMedia('(prefers-reduced-motion: reduce)');
Trabaja con la consulta de medios desde contextos <picture>
Un caso de uso interesante es hacer que la reproducción de un AVIF, WebP o GIF animado 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, 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. Prueba 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 sugerencias 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 intercalen el CSS correcto por motivos de rendimiento.
Demostración
Creé una pequeña demostración basada en los increíbles 🐈 HTTP status cats de Rogério Vicente. Primero, tómate un momento para apreciar la broma, es graciosa y esperaré. Ahora que regresaste, permíteme presentar la demostración. Cuando te desplazas hacia abajo, cada gato de estado HTTP aparece de forma alternada desde el lado derecho o izquierdo. Es una animación fluida de 60 FPS, pero, como se describió anteriormente, es posible que a algunos usuarios no les guste o incluso se mareen, 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 un movimiento reducido, las animaciones de revelación no necesarias desaparecen y solo se deja el movimiento de desplazamiento normal. La siguiente presentación en pantalla muestra la demostración en acción:
prefers-reduced-motion
Conclusiones
Respetar las preferencias del usuario es clave en los sitios web modernos, y los navegadores exponen cada vez más funciones para que los desarrolladores web puedan hacerlo. Otro ejemplo lanzado es prefers-color-scheme, que detecta si el usuario prefiere un esquema de colores claro u oscuro. Puedes leer toda la información sobre
prefers-color-scheme en mi artículo Hello Darkness, My Old Friend {9/}.
Actualmente, 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ó que el sistema aumente o disminuya la cantidad de contraste entre colores adyacentes) y inverted-colors (detecta si el usuario prefiere colores invertidos).
(Contenido adicional) Cómo forzar el movimiento reducido en todos los sitios web
No todos los sitios usarán prefers-reduced-motion, o es posible que no sean lo suficientemente significativas para tus gustos.
Si tú, por cualquier motivo, deseas 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 (que puedes usar bajo tu responsabilidad) que permiten hacerlo.
@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;
}
}
Esto funciona porque el CSS anterior anula las duraciones de todas las animaciones y transiciones a un tiempo tan corto que ya no son perceptibles. Como algunos sitios web dependen de que se ejecute una animación para funcionar correctamente (quizás porque un paso determinado depende de la activación del evento animationend), el enfoque animation: none !important; más radical no funcionaría. Incluso el hackeo anterior no garantiza que tenga éxito en todos los sitios web (por ejemplo, no puede detener el movimiento que se inició a través de la API de Web Animations), así que asegúrate de desactivarlo cuando observes una falla.
Vínculos relacionados
- Es el borrador más reciente del editor de la especificación de nivel 5 de consultas de medios.
prefers-reduced-motionen el estado de la plataforma Chrome.prefers-reduced-motionError de Chromium.- Blink Intent to Implement delivery.
Agradecimientos
Gracias a Stephen McGruer, quien implementó prefers-reduced-motion en Chrome y, junto con Rob Dodson, también revisó este artículo.
Hero image de Hannah Cauhepe en Unsplash.