CSS Responsive Design

Preference Media Queries

Written by Swapnil RajaPublished 30 Jul 2026

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.

PreviousContainer Queries NextFeature Queries