@media (prefers-reduced-motion) {/* responsive animation */}

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 */}

Por Kseso ✎ 0
prefers-reduced-motion

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:

  1. Se inscribe en el grupo de las "queries" relativas a las preferencias del usuario.
  2. El desarrollador puede servir animaciones en función de la capacidad del dispositivo y su configuración por el usuario.
  3. 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:

Origen del vídeo: https://webkit.org/blog/

La misma página para prefers-reduced-motion activado:

Origen del vídeo: https://webkit.org/blog/

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

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 Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap