41

There is plenty of documentation around on how to use the prefers-reduced-motion media query in CSS.

This is great but now that I'm using prefers-reduced-motion in my CSS, I want to be able to test what using my site is like for someone that has this setting enabled. I can't find any information on how to do this though and I'm having difficulty finding this as a setting in browser settings.

Maybe this isn't a browser setting at all. Maybe this is something that is set at the Operating System level.

a_hardin
  • 4,991
  • 4
  • 32
  • 40
Daniel Tonon
  • 9,261
  • 5
  • 61
  • 64
  • 1
    it literally tells you within the article you referenced :-) – GrahamTheDev Jan 12 '20 at 23:29
  • 2
    'User Preferences' section right near the top of the article tells you for every OS, for some reason somebody thought it necessary to reference the exact same article in their answer and copy paste the same info :-P – GrahamTheDev Jan 12 '20 at 23:32
  • 1
    I'm an idiot for not seeing that ‍♂️ – Daniel Tonon Jan 12 '20 at 23:33
  • Happens to the best of us :) – TomTom Jan 12 '20 at 23:34
  • 1
    Hehe, easy to do bud, the annoying thing is that when you toggle it on and off you sometimes have to restart the browser to update changes (also on my Windows 10 machine sometimes you have to change the font size and click apply to update, some strange bug if you toggle it often). – GrahamTheDev Jan 13 '20 at 07:35
  • 1
    Does anybody have a way to set this from JavaScript? I want to be able to run my Cypress automated tests in CI while having this setting enabled, and there isn't an easy way to configure the CI environment to set it globally… – John Y Oct 19 '20 at 10:24
  • I don't think it is possible to do this from JS. It is best to rely on a class still I think since you can give the user the ability to toggle dark mode on and off. It will work well with unit testing as well then. The media query is good for determining what the default theme should be though. – Daniel Tonon Aug 06 '21 at 14:05

3 Answers3

36

Oh, I didn't see the "User Preferences" section in the mdn documentation. ‍♂️

For Firefox, the reduce request is honoured if:

  • In GTK/Gnome, if gtk-enable-animations is set to false. This is configurable via GNOME Tweaks (Appearance tab or General tab, depending on version).
    • Alternately, add gtk-enable-animations = false to the [Settings] block of the GTK 3 configuration file (~/.config/gtk-3.0/settings.ini).
  • In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
  • In Window 7 [& 8]: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
  • In macOS: System Preferences > Accessibility > Display > Reduce motion.
  • In iOS: Settings > General > Accessibility > Reduce Motion.
  • In Android 9+: Settings > Accessibility > Remove animations.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#User_Preferences

It says "for Firefox" however since this is a system setting at the OS level, this is likely how you change the setting for all browsers that support this media query.

Vitaly Zdanevich
  • 13,032
  • 8
  • 47
  • 81
Daniel Tonon
  • 9,261
  • 5
  • 61
  • 64
  • 11
    Wow! This is absolute insanity that the OS dictates the setting in the browser. They are two very different intents. I deliberately unchecked 'Show Animations in Windows' (a very long time ago) because I don't need Windows to animate everything and even though I thought I had a good graphics card - apparently I don't. I had no idea the system setting affected my browser until I visited https://animate.style/ That's a good test page to verify – Simon_Weaver Apr 16 '22 at 22:50
  • 1
    @Simon_Weaver it makes sense for it to use the os setting as the default for the browser. I'm surprised that browsers don't make it simple to switch though. In Firefox I think changing the browser theme let's you overide the dark-theme setting. I'm not sure if this affects websites or not though. – Daniel Tonon Apr 18 '22 at 03:24
  • 7
    I agree it makes sense to use the OS setting as the *default* initial value. However that's meaningless if there's no way in the browser to change it independently. The reason I turn Windows animation off is for productivity and annoyance factor. It's a completely different thing to browser animations. Windows should have two checkboxes - one for system and the other for browser. My astonishment comes mostly from the fact I had NO CLUE it was doing this. In iOS it's a different 'feeling' because Safari is so tied to the OS but again I want them to be distinct. – Simon_Weaver Apr 18 '22 at 06:22
  • 8
    In Firefox, you can open `about:config` and add `ui.prefersReducedMotion` as a Number and set it to `0` (no) or `1` (yes) to override the OS setting. Delete it and Firefox will honor the OS setting again. Changes take effect immediately. – ADTC Feb 08 '23 at 15:54
13

This should be an OS setting, I know in Mac OS it is under: System Preferences > Accessibility > Display > Reduce motion.

In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.

More info:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Also please note not all browsers support or honor the setting

TomTom
  • 1,113
  • 1
  • 10
  • 20
9

As per the other answers, this is an OS setting.

However, for testing, Chromium-based browsers allow you to temporarily change the setting from the developer tools:

To simulate the operating system's reduced motion setting, without having to change your operating system setting:

  1. Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu.

  2. Type reduced, to turn the simulation on and off. Select the Emulate CSS prefers-reduced-motion option, and then press Enter.

  3. Refresh the webpage and check whether your animations run.

Source: Microsoft Edge docs on "Simulate reduced motion" (but not specific to Edge).

just-max
  • 103
  • 2
  • 5
  • When I do this in Chrome, I see the command and there's a red button to the right of it labeled "Rendering..." Clicking on this line or the button, or pressing enter on the keyboard just closes this Command Menu. I can't tell if I've made a change. If I bring it up again I see the same red button. – chillywilly Oct 06 '22 at 19:09
  • 1
    Yes, the Command Menu just closes right away. Opening the command menu and searching again, the text has changed from "Emulate CSS prefers-reduced-motion" to "Do not emulate CSS prefers-reduced-motion", so that's one way to check. Also [this fiddle](https://jsfiddle.net/justmaxl/2cwqry3p) should show a check mark next to the currently active setting: – just-max Oct 07 '22 at 22:24
  • Thank you so much! I missed that change. – chillywilly Oct 07 '22 at 23:53