Change Details

**[[ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | prefers-reduced-motion ]]** media query sees [[ https://caniuse.com/#feat=prefers-reduced-motion | increasing operating system and browser support ]] and should be taken into account for all user-interface `transitions` and `animations` to address people with [[ http://a11yproject.com/posts/understanding-vestibular-disorders/ | vestibular disorder needs ]] (global estimation of [[ http://vestibular.org/understanding-vestibular-disorder | around 70 million people ]]). === Possible implementation paths - Adding a specific CSS class to `body` as core functionality when user hasn't set `@media screen and (prefers-reduced-motion: reduce)`; - Just relying on media query (as Less mixin) on every relatively big movement, mismatched direction or spatial distance animation/transition == Prior work This has been discussed before in context of - MobileFrontend T234570#5784464 - Vector T246419 and https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/599431/ on sidebar animation == External references - https://animate.style/ (see the section labeled "Don't disable the prefers-reduced-motion media query")

**[[ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | prefers-reduced-motion ]]** media query sees [[ https://caniuse.com/#feat=prefers-reduced-motion | increasing operating system and browser support ]] and should be taken into account for all user-interface `transitions` and `animations` to address people with [[ http://a11yproject.com/posts/understanding-vestibular-disorders/ | vestibular disorder needs ]] (global estimation of [[ http://vestibular.org/understanding-vestibular-disorder | around 70 million people ]]). === Possible implementation paths - Adding a core style module that is either loaded by default or as an opt-in for skins and by default by installer(?) - Adding a specific CSS class to `body` as core functionality when user hasn't set `@media screen and (prefers-reduced-motion: reduce)`; - Just relying on media query (as Less mixin) on every relatively big movement, mismatched direction or spatial distance animation/transition == Prior work This has been discussed before in context of - MobileFrontend T234570#5784464 - Vector T246419 and https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/599431/ on sidebar animation == External references - https://animate.style/ (see the section labeled "Don't disable the prefers-reduced-motion media query")

**[[ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | prefers-reduced-motion ]]** media query sees [[ https://caniuse.com/#feat=prefers-reduced-motion | increasing operating system and browser support ]] and should be taken into account for all user-interface `transitions` and `animations` to address people with [[ http://a11yproject.com/posts/understanding-vestibular-disorders/ | vestibular disorder needs ]] (global estimation of [[ http://vestibular.org/understanding-vestibular-disorder | around 70 million people ]]). === Possible implementation paths - Adding a core style module that is either loaded by default or as an opt-in for skins and by default by installer(?) - Adding a specific CSS class to `body` as core functionality when user hasn't set `@media screen and (prefers-reduced-motion: reduce)`; - Just relying on media query (as Less mixin) on every relatively big movement, mismatched direction or spatial distance animation/transition == Prior work This has been discussed before in context of - MobileFrontend T234570#5784464 - Vector T246419 and https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/599431/ on sidebar animation == External references - https://animate.style/ (see the section labeled "Don't disable the prefers-reduced-motion media query")