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.
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.
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](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/throng-feet-ice-skating-57c271f1a5c82.jpg?authuser=7&hl=es-419)
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.](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/a-screenshot-the-macos-s-02f7529755e96.png?authuser=7&hl=es-419)
![La pantalla de configuración de Android con la opción para quitar animaciones casilla de verificación marcada.](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/a-screenshot-the-android-94061601243dd.png?authuser=7&hl=es-419)
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 comofalse
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:
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 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.
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:
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.
Vínculos relacionados
- Último borrador del editor del Nivel 5 de las búsquedas de medios específica.
prefers-reduced-motion
activado Estado de la plataforma Chrome.prefers-reduced-motion
Error de Chromium.- Parpadeo Intención de implementar la publicación.
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.