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 */ } }