How to emulate CSS user preference media features #DevToolsTips

Опубликовано 14 июля 2022, 17:00

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

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

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

#DevToolsTips #Chrome #Developer