Syntax
@media (prefers-color-scheme: dark) { }
@media (prefers-reduced-motion: reduce) { }Examples
Automatic Dark Mode
Respecting the user's OS-level theme preference without needing a toggle.
:root {
--bg-color: white;
--text-color: black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
}
body {
background: var(--bg-color);
color: var(--text-color);
}Respecting Reduced Motion
Disabling or simplifying animations for users who have requested reduced motion.
.card {
animation: fadeInUp 0.5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.card {
animation: none; /* or a much shorter, simpler transition */
}
}Parameters and values
- prefers-color-scheme (light | dark): Detects the user's OS-level theme preference
- prefers-reduced-motion (no-preference | reduce): Detects whether the user has requested minimal animation
Best practices
- Support prefers-color-scheme as a baseline even in projects with a manual theme toggle, so the OS preference is respected on first visit
- Always wrap meaningful animations and auto-playing effects in a prefers-reduced-motion check - this genuinely matters for users with vestibular disorders
- Test both preferences using actual OS/browser settings, not just guessing, since behavior can be easy to overlook without deliberately checking
- Combine both queries with custom properties for a clean, maintainable way to swap entire sets of values based on user preference
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Specificity
When multiple CSS rules target the same element with conflicting declarations, specificity determines which one wins. It is calculated as a four-part value: inline styles, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors, compared in that order from most to least significant.Cascade Layers (@layer)
@layer lets you explicitly define the priority order between groups of CSS rules, independent of selector specificity. Styles in a layer declared later always beat styles in an earlier layer, regardless of how specific the earlier layer's selectors are - solving specificity conflicts between resets, frameworks, components, and overrides in a predictable, structured way.Custom Properties (CSS Variables)
Custom properties, written as --name, let you define reusable values directly in CSS, accessed with var(). Unlike Sass variables, they are live in the browser - they can be read and changed with JavaScript, and they respect the cascade, meaning their value can be different in different parts of the DOM.Media Queries
Media queries apply CSS conditionally based on characteristics of the device or viewport, most commonly width, forming the foundation of responsive design. They use the @media at-rule with a condition, and can be combined with and/or logic to test multiple conditions at once.
When multiple CSS rules target the same element with conflicting declarations, specificity determines which one wins. It is calculated as a four-part value: inline styles, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors, compared in that order from most to least significant.Cascade Layers (@layer)
@layer lets you explicitly define the priority order between groups of CSS rules, independent of selector specificity. Styles in a layer declared later always beat styles in an earlier layer, regardless of how specific the earlier layer's selectors are - solving specificity conflicts between resets, frameworks, components, and overrides in a predictable, structured way.Custom Properties (CSS Variables)
Custom properties, written as --name, let you define reusable values directly in CSS, accessed with var(). Unlike Sass variables, they are live in the browser - they can be read and changed with JavaScript, and they respect the cascade, meaning their value can be different in different parts of the DOM.Media Queries
Media queries apply CSS conditionally based on characteristics of the device or viewport, most commonly width, forming the foundation of responsive design. They use the @media at-rule with a condition, and can be combined with and/or logic to test multiple conditions at once.