What is Reduced Motion Media Query?

Navigation
3

I recently saw that there is a Reduced Motion Media Query concept in CSS that seems to be a response to animation settings in the client browser and is used in code primarily by query prefers-reduced-motion .

  • What exactly is prefers-reduced-motion ?
  • How can we use it in an application?
  • What is the support of this function in browsers?
  • How can I enable the reduced motion option in browsers?
asked by anonymous 25.09.2018 / 13:47

1 answer

3

* First I need to clarify about the Animation Reduction Preferences. *

Apparently when Apple did an updade from iOS to version 7 in 2013 it had a negative feedback from several people showing vertigo and hand being using the new version of the Operating System of the apple brand . This problem was apparently due to some people having a disturbance of the Vestibular System when using the company's new OS which came with various animations, zoom and blur effects in screen transitions etc ... As soon as you realized this, Apple updated the platform with an option to decrease or remove the native animations of the system. So today, including in Windows, you can enter the system settings and "turn off" the visual animations case if you feel more comfortable without them.

Nowlet'stalkaboutCSS

OnceexplainedabouttheUserPreferencesintheOperationalSystem,wewillseewhatisprefers-reduced-motion

  

Theprefers-reduced-motionCSSmediafeatureisusedtodetectifthe  userhasrequestedthatthesystemminimizetheamountofanimationor  motionituses.

Theprefers-reduced-motionCSSfeatureisusedtodetectwhethertheuserhasrequestedthatthesystemminimizetheamountofanimationormovementituses.

no-preference

Indicatesthattheuserhasnotmadeanyknownpreferenceforthesystem.

reduce

Indicatesthattheuserhasnotifiedthesystemthattheypreferaninterfacethatminimizestheamountofmovementoranimation,preferablytothepointwhereanynon-essentialmovementisremoved.

InthisCSSwehaveasimpleanimation,butiftheuserhassetintheirOSthatwantstoreduceoreliminatetheanimationsofthescreenthe@media(prefers-reduced-motion:reduce)willsettheanimationtonullnone.SojustforuserswhoexplicitlydefinethattheydonotwantanimationintheOS,CSSwillusethatruletoremoveanimationfromthebrowserscreen.

.animation{-webkit-animation:vibrate0.3slinearinfiniteboth;animation:vibrate0.3slinearinfiniteboth;}@media(prefers-reduced-motion:reduce){/*paraquemdefiniureduziranimaçãooanimationénone*/.animation{animation:none;-webkit-animation:none;}}

Source: link

Browser Support:

According to Caniuse, browser support is still very restricted. Even though iOs and Windows already have this option in the Operating System, the browser must also support this property so that the user can see an Animation Reduction also in the browser: link

UXvsDyslexiavs.ADHD

Whenmakingyouranimationsalwaystakeintoaccountthatuserswithproblemsofattentiondeficit,dyslexiaorevenepicalycanhaveabadexperienceofuseiftheyfeeluncomfortablewithexcessivemovementsonthescreen.Ifpossible,useprefers-reduced-motiontorespectUserPreferencesstatedbyusers.On-screenmovementscantaketheuser'sattentionbyshiftingthefocusfromthecontenttothemovingobject,animationfeaturesshouldalwaysbeweighted.ArticleinNielsenonthesubject: link

Resource consumption

Currently I do not have style support, but in a simple test I noticed that if the Browser is not supported the @media/prefers-reduced-motion is simply ignored by the browser. Without being able to do a performance test I did not see changes in FPS or memory consumption for example ...

Image with feature enabled reduce and no-preference

    
25.09.2018 / 15:25
Return all data from the first to the last day of the month with mysql What is the difference between function declarations (React)?