 During development, you can use DevTools to emulate the user preference media features. Wait a minute, what are user preference media features? Let me make a call to Adam. Yo Jess, what's up? Hey Adam, we need you here. Can you tell us what are user preference media features? Oh totally, let me switch to my computer and I'll show you. So these are system accessibility options for you to make the device experience more yours. Light or dark theme, default font size, animation settings, or other user preferences you set from your operating system or your browser. So here's me in my operating system changing some of those user preferences. Here's me in the browser making some special adjustments just for it. A web page can adjust itself based on some of these preferences making not just the operating system feel like yours, but even web pages. Here's a web page adapting to the preference changes. DevTools has some rad tools to help developers and designers test and discover these opportunities to adapt. They're under a category in DevTools called emulation. It's already tedious to change my entire system preferences or browser preferences just to test my user experience, but add the fact that my device is only one device and can't represent the combinations that my visitors might be in. DevTools is critical here, offering the device mode and many other emulation tools to assist in stepping into the shoes of your users and seeing how your site adapts. This rendering tab is where DevTools allows toggling the user preferences, like the ones we discussed earlier, color scheme, forced colors, contrast, and reduced motion, and there's a few other great rendering-related features to test with too. But let's test a page's ability to adapt to light and dark preferences from here. This is much nicer than watching my entire system switch themes and my page. That was too much. But Jess, there's a new, even easier way to do this now. Do you want to show it off? Definitely. Did you all notice the new emulation icon in the styles pane? Let me zoom in to the styles pane. This is the button. Click on it and you'll have options to switch the themes right away. To turn off the emulation, just click on the same selection again and you are good to go. Very convenient, right? I love that. It put the theme switch right where I'm testing colors. Well, let's test reduced motion and here's that in action, being toggled over here in the rendering pane. Remember, reduced motion doesn't mean no motion. Crossfades and color animations are generally good to go. Here's contrast preferences in action. And here's forced color preferences in action. Lastly, here's reduced data preferences in action. CSS media queries let me code and design a user experience so visitors just get what they like automatically. And it's really fun to design for. Jess got some cool additions you want to add? Sure. You can use DevTools' run command to emulate these user preferences without even opening the rendering tab. Just type emulate, select the option, and you are all set. Ooh, nice one. Well, to learn more about user depth of emulation in general, go to web.dev.new-responsive. But hey Jess, I got to go. Sorry. Thanks, Adam. To learn more about emulating CSS features with DevTools, go to google.dev.devtools.emulate.css. That's all. See you for the next DevTools tips. Ciao.