Respecting reduced motion
Turn on "Reduce motion" (Windows: Settings → Accessibility → Visual effects → Animation effects off; macOS: Accessibility → Display → Reduce motion), or emulate it in DevTools' Rendering panel, then run again.
Media queries can also ask about the person and their device: prefers-color-scheme (light or dark), prefers-reduced-motion, prefers-contrast, and hover/pointer (mouse or touch), so your page respects settings people have already chosen in their operating system.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a page dark-mode aware: light by default, and in dark mode the background #0f172a, text #e2e8f0 and links #93c5fd. Make form controls match too.
A hero image zooms slowly forever with animation: zoom 20s linear infinite. Make it stay still for people who prefer reduced motion.
Give buttons a minimum height of 44px on touch screens and a darker background on hover only for devices that can hover.
Explain it without notes
How do you build a dark mode that follows the system setting? Mention color-scheme.
What is prefers-reduced-motion for, and what should you change when it is reduce?
What's the difference between hover/pointer and any-hover/any-pointer?
What is forced colours mode, and what can break in it?
Preview
Console
Nothing logged yet.