Retour au cours

Lesson 90: Accessibility Media Queries (Dark Mode, Reduced Motion)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

90. Accessibility Media Queries

Modern CSS allows you to cater to user preferences set in their operating system, enhancing accessibility.

1. prefers-color-scheme (Dark Mode)

This query checks if the user has requested light or dark themes in their OS settings. This is essential for respecting user comfort.

css /* Default (Light Mode) styles */ body { background-color: white; color: black; }

/* Dark Mode Styles / @media (prefers-color-scheme: dark) { body { background-color: #121212; / Very dark gray / color: #f0f0f0; / Off-white text */ } a { color: lightblue; } }

2. prefers-reduced-motion

Some users suffer from motion sickness or distraction caused by excessive parallax, scrolling effects, or large animations. This query allows you to disable or simplify animations for those users.

css /* Default complex animation */ .spinner { animation: spin 3s infinite linear; }

/* Simplified styles for users who prefer less movement / @media (prefers-reduced-motion: reduce) { .spinner { animation: none; / Disable the animation / transition: none; / Disable transitions */ } }