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. 🤔
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 = falseto 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.