resources/src/mediawiki.skinning/accessibility.less

   1 /**
   2  * Respect users who prefer reduced motion.
   3  * Inspiration taken from sanitize.css
   4  * https://github.com/csstools/sanitize.css/blob/v13.0.0/reduce-motion.css,
   5  * itself based on collection at
   6  * https://github.com/jensimmons/cssremedy/issues/11
   7  *
   8  * Note, we also don't set `background-attachment: initial !important;` as
   9  * setting a background property changes the default rendering of unstyled
  10  * elements like `button`s and we don't feature `fixed` anywhere in deployed
  11  * skins or extensions.
  12  */
  13 /* stylelint-disable declaration-no-important, time-min-milliseconds, plugin/no-unsupported-browser-features */
  14 @media ( prefers-reduced-motion: reduce ) {
  15         *,
  16         ::before,
  17         ::after {
  18                 animation-delay: -0.01ms !important;
  19                 animation-duration: 0.01ms !important;
  20                 animation-iteration-count: 1 !important;
  21                 scroll-behavior: auto !important;
  22                 // Set to `0ms` even though it implicates not firing `transitionend` in certain browsers.
  23                 // Do not set this to non-zero value, as it results in infinite motion on iOS. See T308979.
  24                 transition-duration: 0ms !important;
  25         }
  26 }