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

La consulta de medios de preferencia-reduced-motion detecta si el usuario solicitó el sistema operativo para minimizar la cantidad de animación o movimiento que utiliza.

Thomas Steiner

No a todo el mundo le gustan las animaciones o transiciones decorativas, y algunos usuarios experimentan directamente el movimiento. mareos cuando se enfrentan al desplazamiento con paralaje, los efectos de zoom y más. El contenido multimedia de preferencias del usuario la búsqueda prefers-reduced-motion te permite diseñar una variante con reducción de movimiento de tu sitio para los usuarios que han expresado esta preferencia.

Navegadores compatibles

  • Chrome: 74.
  • Borde: 79.
  • Firefox: 63.
  • Safari: 10.1.

Origen

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, el sol brillaba y el hielo la pista de hielo estaba abarrotada de personas ⛸. El único problema es que no me manejo bien con las multitudes. De esta manera muchos objetivos en movimiento, no me concentro en nada y termino perdido y con la sensación de estar completo sobrecarga visual, casi como mirar a un hormiguero 🐜.

Un grupo de pies de personas patinando sobre hielo
Sobrecarga visual en la vida real.

En la Web, puede suceder lo mismo de vez en cuando: con anuncios revelar animaciones, videos de reproducción automática y más, la Web a veces puede resultar abrumadora... Afortunadamente, a diferencia de la vida real, hay 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, bueno, prefieren movimiento reducido. Esto puede consistir en evitar tener videos de reproducción automática o la inhabilitación de determinados efectos meramente decorativos, o el rediseño completo de una página para determinados usuarios;

Antes de sumergirme en la función, permítanme retroceder y pensar en qué se usan las animaciones. en la Web. Si quieres, también puedes omitir la información de referencia y pasar directamente a los detalles técnicos.

Animación en la Web

A menudo, las animaciones se usan para proporcionar comentarios a los usuarios, por ejemplo, para informarles que se recibió y se está procesando una acción. Por ejemplo, en un sitio web de compras, un producto podría estar animado para "volar" en un carrito de compras virtual, representado como un icono en la esquina superior derecha de del sitio.

Otro caso de uso involucra el uso del movimiento para hackear la percepción de los usuarios mediante una combinación de pantallas estructurales, metadatos contextuales y vistas previas de imágenes de baja calidad para ocupan mucho tiempo del usuario y hacen que toda la experiencia se sienta más rápida. La idea es ofrecer contexto al usuario sobre lo que viene y mientras tanto, cargar las cosas lo más rápido posible.

Por último, hay efectos decorativos, como gradientes animados, desplazamiento con paralaje, videos y muchos más. Si bien muchos usuarios disfrutan de esas animaciones, a otros no les gustan porque si se sienten distraídos o ralentizados por ellos. En el peor de los casos, los usuarios pueden, incluso, sufrir de movimiento como si fuera una experiencia de la vida real, así que para estos usuarios reducir las animaciones es una salud por necesidad.

Trastorno del espectro vestibular provocado por el movimiento

Experiencia de algunos usuarios distracciones o náuseas provenientes del contenido animado. Por ejemplo, las animaciones de desplazamiento pueden causar trastornos vestibulares cuando los elementos que no sean el asociado con el desplazamiento se mueven mucho. Por ejemplo, animaciones de desplazamiento con paralaje. puede causar trastornos vestibulares porque los elementos en segundo plano se mueven a una velocidad diferente a la del primer plano o de terceros. Las reacciones al trastorno vestibular (oído interno) incluyen mareos, náuseas y migraña. dolores de cabeza y, a veces, requerir reposo en cama para recuperarse.

Quita el movimiento en los sistemas operativos

Muchos sistemas operativos tienen parámetros de configuración de accesibilidad para especificar una preferencia por la reducción durante mucho tiempo. En las siguientes capturas de pantalla, se muestra la preferencia Reduce motion de macOS Mojave y Preferencia de Quitar animaciones de Android Pie. Si se marcan, estas preferencias hacen que se ejecute no use efectos decorativos, como animaciones de lanzamiento de apps. Las aplicaciones por sí mismas pueden y también debe respetar esta configuración y quitar todas las animaciones innecesarias.

La pantalla de configuración de macOS con la opción para reducir el movimiento casilla de verificación marcada.
La pantalla de configuración de Android con la opción para quitar animaciones casilla de verificación marcada.

Quita movimiento en la Web

El nivel 5 de las consultas de medios reduce el movimiento de los usuarios en la Web. Las consultas de medios permiten a los autores probar y consultar valores o funciones del usuario-agente o el dispositivo de visualización, independientemente del documento que se renderiza. La consulta de medios Se está usando prefers-reduced-motion para detectar si el usuario configuró una preferencia de sistema operativo para minimizar la cantidad de animaciones y el movimiento que usa. Puede adoptar dos valores posibles:

  • no-preference: Indica que el usuario no tiene preferencia en el sistema operativo subyacente. en un sistema de archivos. Este valor de palabra clave se evalúa como false en el contexto booleano.
  • reduce: Indica que el usuario estableció una preferencia de sistema operativo que indica lo siguiente: interfaces debería minimizar el movimiento o la animación, preferentemente hasta el punto en que se quita el movimiento.

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 a partir de un Contexto de JavaScript.

Para ilustrar ambos, supón que tengo un botón de registro importante en el que quiero que el usuario haga clic. me podrías definir una "vibración" que llame la atención pero como buen ciudadano de la Web, solo jugaré para los usuarios que están explícitamente aceptables, pero no para todos los demás, que pueden ser usuarios que inhabilitaron las animaciones o que utilizaron 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 tengo definió una animación compleja con el API de Web Animations Mientras que las reglas CSS se activará dinámicamente por el navegador cuando cambie la preferencia del usuario, para JavaScript animaciones que debo detectar los cambios por mi cuenta y, luego, detener de forma manual las imágenes animaciones (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:

Qué no debes hacer
window.matchMedia('prefers-reduced-motion: reduce');
Qué debes hacer
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 de la atributo media. Si (prefers-reduced-motion: no-preference) se evalúa como true, es seguro mostrará la versión animada; de lo contrario, mostrará 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.

El famoso gato Nyan.

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 opcionalmente en el momento de la solicitud. lo que les permite a los servidores intercalar el CSS correcto por motivos de rendimiento.

Demostración

Creé una demostración basada en el increíble 🐈 Estado de HTTP gatos. Primero, tómate un momento para apreciar la broma, es gracioso y esperaré. Ahora que regresaste, presentaré el demostración. Cuando te desplazas, cada cat de estado HTTP aparece alternadamente desde el lado derecho o izquierdo. Tiene una velocidad mantecosa de 60 FPS pero, como ya lo mencioné, a algunos usuarios puede que no les guste o incluso se mareen. la demostración está programada para respetar prefers-reduced-motion. Esto incluso funciona de manera dinámica, por lo que los usuarios pueden cambiar sus preferencias sobre la marcha, no es necesario volver a cargar la página. Si un usuario prefiere un movimiento reducido, el Las animaciones de revelación innecesarias desaparecen y solo queda el movimiento de desplazamiento normal. El La siguiente presentación en pantalla muestra la demostración en acción:

Video del Demostración de prefers-reduced-motion aplicación

Conclusiones

Respetar las preferencias del usuario es clave para los sitios web modernos, y los navegadores exponen cada vez más que les permiten a los desarrolladores web hacerlo. Otro ejemplo lanzado es prefers-color-scheme, que detecta si el usuario prefiere un esquema de colores claro u oscuro. Puedes leer todo sobre prefers-color-scheme en mi artículo Hola Oscuridad, Mi Antiguo amigo count.

El Grupo de trabajo de CSS está estandarizando más consultas de medios de las preferencias de los usuarios, como prefers-reduced-transparency (detecta si el usuario prefiere una transparencia reducida) prefers-contrast (detecta si el usuario ha solicitado al sistema que aumente o disminuya la cantidad de contraste entre los 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 hacer Esto sucede es insertar una hoja de estilo con el siguiente CSS en cada página web que visites. Hay son varios extensiones del navegador en el mercado (¡úsalos bajo tu responsabilidad!) que te permitan 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 la duración de todas las animaciones y transiciones. a un período tan corto que ya no son perceptibles. Como algunos sitios web dependen de una animación para funcionar correctamente (tal vez porque un paso determinado depende de la activación de la evento animationend), el enfoque animation: none !important; más radical no funcionaría. Incluso el truco anterior garantiza el éxito en todos los sitios web (por ejemplo, no se puede detener la imagen si se inicia con el API de Web Animations), así que asegúrate de y desactívalo cuando notes alguna falla.

Agradecimientos

Un reconocimiento masivo a Stephen McGruer, quien implementó prefers-reduced-motion en Chrome y, junto con Rob Dodson, también revisó este documento. Hero image de Hannah Cauhepe en Unsplash.