Before we get into some topics in the advent calendar, we need to learn about a browser feature. Therefore, I have changed the order of my planned topics on debugging a bit to have this one earlier.

In some of my next blog posts, I will talk about some CSS features, that can benefit certain people using your website. Almost 5 years ago, I had a blog post on how to “Recude motion on a website for better accessibility“. In this blog post, I’ve explained how you can change the settings in Windows 10 or Android 9, to simulate the reduced motion preference. But you might use a different operating system (like I use Manjaro Linux for work), where there is no quick setting, or you want to quickly toggle the setting. Fortunately, some browsers have such a toggle for you.

Setting preferences in Chrome

In Chrome (and other browsers based on the Chromium project like Edge) you can find most settings by clicking on the three vertical dots in the top right, then you choose “More tools” and open the “Rendering” tools:

This opens up another panel in the development tools. If you scroll down a bit, you will find these settings, you can use to simulate different preferences. In this example, I am setting prefers-reduced-motion to reduce:

The only downside with this setting: as soon as you close the developer tool, the setting would reset to its default value. If you want to test a site with more vertical space available (since the two panels use a lot of height), I would suggest detaching the developer tools from the browser window.

We will need these settings in upcoming topics. But there are more options to simulate settings that will change the behavior and look of your site. If you want to quickly display your site with a dark color scheme, you don’t have to change your operating system to a dark color scheme or open up the rendering settings. Instead, you will find a nice toggle in the “Styles” section. Click on the “paint brush” icon and switch to the color scheme you want to test.

Unfortuantey, just as with the rendering panel, the color scheme will switch back to the default value, as soon as you close the development tools.

Setting preferences in Edge

Even though Edge is based on Chromium and many development tool look exactly the same, you will not find the “More tools > Rendering” panel in Edge. Instead, you open up the dev tools first. On panels like “Elements” you will see the “Console” and “Issues” int the lower part. Here, you click on the “+” icon and choose the “Rendering Quick View”. It looks very similar to Chrome once opened.

You also have a quick toggle for the colors scheme in Edge with a “paint brush” icon, just as in Chrome.

Setting preferences in Firefox

In Firefox, the settings are not easily available. They are also located in different places. If you want to set the prefers-reduced-motion, you have to navigate to the URL about:config, then search for ui.prefersReducedMotion, add a boolean value and set it to false. For prefers-reduced-transparency however, you would search for layout.css.prefers-reduced-transparency.enabled and set this to true. That’s all very inconsistent and annoyingly not all in one place.

If we want to toggle the color scheme, we are more lucky. Firefox offers two buttons. With the “sun icon”, you can enforce the light color mode and with the “waxing crescent moon icon”, you can enforce the dark color mode.

Toggling one of them disables the other one. If you disable both, the default will be taken.

Bonus: faster toggle of preferences in Chromium browsers

I can’t tell you how to change the preferences in Safari, since I don’t use a Mac (or a simulates Safari often enough). But I have a nice little bonus tip for you. If you want to quickly change one of these preferences, you can use the “Run command” feature in Chromium browsers.

While the dev tools are open, hit “CTRL + SHIFT + P” (or “Command + Shift + P” on a Mac) and then search for a preference to toggle:

I haven’t found an equivalent feature in Firefox, but maybe one of you know it?

Conclusion

When developing a website that behaves or renders differently, depending on preferences set in the operating system, you should always test this. But you don’t have to change the settings of your operating system. Browser usually have options to emulate those.

If any of you knows better options for these settings in Firefox or an extension that would allow you to switch those more easily, please share your tips in the comments.