DevTools Tips hero logo

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

Published on

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 Rendering tab.

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.

Published on Improve article


An Update On Chrome’s Web Framework Funding for 2022


What's New In DevTools (Chrome 104)

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.