DevTools Tips: How to emulate CSS user preference media features with DevTools

User preference media features give you the ability to style web experiences that align with the user’s own specific preferences and needs. In other words, preference media features allow you to adapt your user experiences to your user’s expectations.

You can enhance the user experience of your website by taking the following three steps:

1. Discover the possibilities. Learn all the user preference media features.
2. Style your web experiences. Implement, for example, color, layout, and element size changes based on the preferences.
3. Test the UI. In DevTools, emulate the preferences and test how your website behaves.

DevTools supports a variety of emulation options. To help you avoid searching for and adjusting system and browser settings, all the emulation options reside in one place—under the Rendering tab in DevTools.

The emulation options of the user’s preferences include but are not limited to:

• prefers-color scheme—light or dark color scheme
• prefers-contrast—lower or higher contrast
• prefers-reduced-motion—minimize motion or not
• prefers-reduced-data—consume less traffic or not

For a comprehensive list of all emulation options, see Emulate CSS media features.

To discover more effects you can apply using the Rendering tab, see the Rendering tab overview.

Additionally, with DevTools, your testing capabilities aren’t limited to the single device you’re working on. You can Simulate mobile devices with Device Mode.