How to emulate CSS user preference media features #DevToolsTips
Channel: Chrome for Developers
Date: 2022-07-14

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://goo.gle/3kqM2q3 
Emulate CSS media features with DevTools → https://goo.gle/devtools-emulate-css
Simulate mobile devices with Device Mode →  https://goo.gle/3PFIoGQ 
Emulate location and device orientation with Sensors tab  → https://goo.gle/3uZz60y 
Workshop: Build user-adaptive interfaces → https://goo.gle/3yTq46h

Questions? Tweet to us:
Jecelyn Yeen →  https://twitter.com/jecfish  
Chrome DevTools →  https://twitter.com/chromedevtools  

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

#DevToolsTips #Chrome #Developer