How to emulate CSS user preference media features | DevTools Tips

You can use DevTools to emulate user preferences like device orientation, light/dark themes, color contrast, reduced motion and more. DevTools is your best friend in building user adaptive interfaces.

Learn now on today’s episode of DevTools Tips with Adam Argyle and Jecelyn Yeen.

Chapters:
0:00 - Intro
0:24 - What are user preference media features
1:13 - Why do we need DevTools?
1:34 - Simulate mobile devices with Device Mode and Sensors tab
1:44 - Render CSS media features with the Rendering tab
1:57 - Emulate light and dark themes
2:13 - Shortcuts to emulate light and dark themes
2:39 - Emulate reduced motion
2:53 - Emulate contrast preferences
3:00 - Emulate forced color preferences
3:08 - Emulate reduced data preferences
3:17 - Why build user adaptive interfaces
3:29 - Emulate user preferences with Run Command
3:44 - Learn more

Links:
New responsive → https://web.dev/new-responsive/
Emulate CSS media features with DevTools → https://goo.gle/devtools-emulate-css
Simulate mobile devices with Device Mode → https://developer.chrome.com/docs/devtools/device-mode/
Emulate location and device orientation with Sensors tab → https://developer.chrome.com/docs/devtools/#sensors
Workshop: Build user-adaptive interfaces → https://youtu.be/865olcAfwFg

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer