@media (prefers-reduced-motion) {/* responsive animation */} 25.5.17
Introducción a las novedades del nuevo documento CSS Media Queries Level 5 con especial atención a la query sobre las preferencias del usuario prefers-reduced-motion y su uso para tener animaciones responsive.
@media (prefers-reduced-motion) {/* responsive animation */}
El nuevo documento Media Queries Level 5
del 25 de Mayo de 2017 y con estatus Editor’s Draft
introduce las siguientes novedades para la regla @media ():
- light-level: para actuar en función de la luminosidad del ambiente (en dispositivos que cuenten con detector para ello).
- scripting: consultar si los lenguajes de secuencias de comandos, como JavaScript, están soportados en el documento actual.
- Medias queries de autor: Para utilizar la misma @media reiteradamente (similar a las
custom properties
:@custom-media --mi-media-query (max-width: 30em); @media (--mi-media-query) { /* declaraciones CSS */ } @media (--mi-media-query) and (script) { /* declaraciones especiales para cuando además la query 'script' devuelva 'sí'*/ }
- inverted-colors: para el caso de que el dispositivo muestre el documento con los colores invertidos.
- prefers-reduced-motion: detectar si el sistema se ha configurado para minimizar las animaciones o movimientos en el documento.
La primera novedad de las anteriores, light-level no me extiendo pues ya estaba incluida en el documento de nivel 4 [ver post] y además hace un tiempo que le dediqué en exclusiva el post Light-level: una @media query Css para el control de la luminosidad y sus cambios
.
scripting y las @media queries de autor
así como inverted-colors es demasiado pronto (creo) para jugar con ellas y además no encierran mayor secreto o trascendencia en su uso y resultado final.
prefers-reduced-motion = animaciones "responsive"
Sin embargo la @media (prefers-reduced-motion) sí que merece una mirada más a fondo por varios motivos:
- Se inscribe en el grupo de las "queries" relativas a las preferencias del usuario.
- El desarrollador puede servir animaciones en función de la capacidad del dispositivo y su configuración por el usuario.
- Ya es soportada por Webkit
De la "query" prefers-reduced-motion dice el documento que puede ser usada en CSS en una regla @media o en javascript mediante window.matchMedia() para servir animaciones alternativas (o ninguna) y evitar problemas al usuario derivados del movimiento.
Las transformaciones, animaciones, efecto "paralla"... (ya sean vía CSS, Js o cualquier otra) están muy bien y aportan mucho excepto cuando suponen un problema para el usuario que las sufre. De hecho no es nueva la discusión sobre su incidencia en la accesibilidad del documento y en la experiencia del usuario.
Debido a los problemas que pueden ocasionar a un usuario determinado el movimiento de los elementos en una página, iOS 7 y macOS dan la posibilidad al usuario de deshabilitar los efectos parallax y movimientos (animaciones) (cómo hacerlo en iOS y en macOS)
De hecho Apple en sus web ya sirve diferentes efectos en función de la configuración de prefers-reduced-motion:
Efecto zoom y blur:
La misma página para prefers-reduced-motion activado:
Un pen obra de Eric Bailey que usa @media (prefers-reduced-motion)
See the Pen Reduce Motion Media Query Example by Eric Bailey (@ericwbailey) on CodePen.
Y para quienes no puedan ver en funcionamiento esta nueva query el vídeo:
Más información sobre prefers-reduced-motion
- Webkit blog: Responsive Design for Motion
- CSS Media Queries Level 5, User Preferences
- WWDC 2016: Auditing your Apps for Accessibility
- GDC 2015: Designing to Minimize Simulation Sickness in VR Games
- CSS Tricks: An Introduction to the Reduced Motion Media Query
- A List Apart: Designing Safer Web Animation For Motion Sensitivity
- WCAG 2.0, Guideline 2.3: Avoid Content Known to Cause Seizures
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso