CSS Responsive Design
Preference Media Queries
Respect motion, contrast, color-scheme, transparency, and input preferences exposed by the user agent. The examples respond to reduced motion, increased contrast, color schemes, transparency, hover capability, and coarse or fine pointers.
User-preference media features expose choices made in the operating system or browser. Input media features describe available interaction capabilities without identifying a device type.
Responsive design should adapt to people as well as dimensions. Large motion may make an interface unusable, low-contrast decoration may disappear for someone requesting more contrast, and hover-only controls fail on a coarse pointer. These queries allow CSS to preserve the same task while changing presentation and interaction feedback. This topic also connects with CSS Media Queries and Accessible CSS.
Responsive design includes user settings
Example
css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-contrast: more) {
.button { border-width: 2px; }
}Reduced motion does not always mean no motion. Remove large movement and looping effects while preserving feedback that helps users understand a change.
Input capability queries
Example
css
@media (hover: hover) and (pointer: fine) {
.menu__item:hover { background: #eef2ff; }
}
@media (any-pointer: coarse) {
.icon-button { min-width: 2.75rem; min-height: 2.75rem; }
}Do not infer a device category from pointer features. Convertible devices can expose several input methods, which is why any-pointer and any-hover exist.
Preference Media Features
| Media feature | Detects | Example |
|---|---|---|
| prefers-reduced-motion | A request to reduce non-essential motion. | (prefers-reduced-motion: reduce) |
| prefers-color-scheme | A light or dark color preference. | (prefers-color-scheme: dark) |
| prefers-contrast | A request for more or less contrast. | (prefers-contrast: more) |
| forced-colors | An active forced-color palette. | (forced-colors: active) |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preference Media Queries example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-contrast: more) {
.button { border-width: 2px; }
}
@media (hover: hover) and (pointer: fine) {
.menu__item:hover { background: #eef2ff; }
}
@media (any-pointer: coarse) {
.icon-button { min-width: 2.75rem; min-height: 2.75rem; }
}
</style>
</head>
<body>
<main><nav class="menu"><button class="menu__item">Hover-capable menu item</button></nav><button class="icon-button" aria-label="Save">★</button><p>Emulate reduced motion or increased contrast in developer tools.</p></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| prefers-reduced-motion | 74 | 79 | 63 | 10.1 |
| prefers-contrast | 96 | 96 | 101 | 14.1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Responsive CSS should adapt to user preferences and input capabilities as well as screen size.
Treat the queried preference as an instruction, not a demographic assumption. Keep essential status visible in every mode, test the alternatives through browser emulation and real settings, and remember that a device may expose more than one pointer or hover capability.