New CSS Media Query Features You Should Know
Beyond min-width and max-width: modern media queries now cover user preferences, interaction capabilities, display quality, and more. Here's the complete modern media query toolkit.
UIXplor Team
July 10, 2026 · 11 min read
01Media Queries Have Grown Up
When most developers think of media queries, they think of `@media (min-width: 768px)`. But the modern media query specification is a rich language for querying the user's environment, preferences, and capabilities.
In the last three years, the CSS Working Group shipped a wave of new media features that move responsive design from a layout concern into a broader UX concern. You can now query whether the user prefers reduced motion, whether they're on a touch device, whether their display supports high-resolution color — and adjust your UI accordingly.
02Range Syntax: Width Between Two Values
The new range syntax makes breakpoint queries more readable:
/* Old syntax */
@media (min-width: 768px) and (max-width: 1024px) { ... }
/* New range syntax */
@media (768px <= width <= 1024px) { ... }
/* Even simpler */
@media (width >= 768px) { ... }
@media (width < 480px) { ... }This syntax works for any numeric media feature including `height`, `resolution`, and `aspect-ratio`. It's supported in Chrome 104+, Firefox 63+, and Safari 16.4+.
03prefers-reduced-motion
The most important media query for accessibility. Some users have vestibular disorders, epilepsy, or other conditions that make heavy animation harmful.
/* Default: full animation */
.hero-title {
animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
.hero-title {
animation: none;
}
/* Or provide a minimal alternative */
.hero-title {
animation: fadeIn 0.1s ease;
}
}The value `no-preference` indicates the user hasn't expressed a preference. Most implementations approach this as: write animations by default, then strip them for `reduce`.
This is not optional. WCAG 2.1 Success Criterion 2.3.3 requires that motion animation triggered by interaction can be disabled — and `prefers-reduced-motion` is the CSS mechanism for that.
04prefers-color-scheme
:root {
--bg: #ffffff;
--text: #0a0a0a;
--card: #f8f8f8;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0a0a0f;
--text: #ffffff;
--card: rgba(255,255,255,0.04);
}
}Modern implementation best practice: define your design tokens as CSS custom properties and override them in the media query. This approach works seamlessly with JavaScript-based theme switching — you can override the preference-based tokens with a `.light` or `.dark` class on `<html>`.
/* User preference baseline */
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
}
/* JavaScript override takes precedence */
:root.force-light { color-scheme: light; }
:root.force-dark { color-scheme: dark; }05prefers-contrast
/* Standard styling */
.button {
background: rgba(99, 102, 241, 0.9);
color: white;
}
/* Enhanced contrast for users who need it */
@media (prefers-contrast: more) {
.button {
background: #4338ca; /* Fully opaque, higher contrast */
outline: 2px solid #fff; /* Visible border */
}
}
/* Reduced contrast for users who prefer it */
@media (prefers-contrast: less) {
.button {
background: rgba(99, 102, 241, 0.6);
}
}Values are `more`, `less`, `forced`, and `no-preference`. This is particularly important for users with low vision or photosensitivity.
06hover and pointer: Touch-Aware Queries
These queries detect the user's primary input mechanism.
/* Hover-capable device (mouse, trackpad) */
@media (hover: hover) {
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
}
/* Fine pointer (mouse) — enable small interactive targets */
@media (pointer: fine) {
.custom-checkbox {
width: 16px;
height: 16px;
}
}
/* Coarse pointer (touch) — require larger targets */
@media (pointer: coarse) {
.custom-checkbox {
width: 44px;
height: 44px;
}
}The `hover: none` value is especially important: don't apply hover effects that serve as the *only* interactive signal on touch devices. Use `(hover: hover)` to gate hover-only interactions.
07display-mode: PWA-Aware Styling
/* Standalone (PWA installed mode — no browser chrome) */
@media (display-mode: standalone) {
.app-header {
padding-top: env(safe-area-inset-top);
}
/* Hide browser-native UI hints */
.install-banner {
display: none;
}
}
/* Minimal-UI (some browser chrome visible) */
@media (display-mode: minimal-ui) {
.nav-bar { display: block; }
}This lets you tailor the UI for users who have installed your site as a PWA — hiding install prompts, adjusting padding for safe areas, and adapting navigation.
08Browser Support Summary
Feature Chrome Firefox Safari Range syntax 104+ 63+ 16.4+ prefers-reduced-motion 74+ 63+ 10.1+ prefers-color-scheme 76+ 67+ 12.1+ prefers-contrast 96+ 101+ 14.1+ hover / pointer 38+ 64+ 9+ display-mode 46+ 47+ 13+
All of these features are broadly safe for production use.
09FAQ
Does `prefers-reduced-motion` affect CSS transitions too? Yes. Any transition or animation — including `transition` on properties like `transform`, `opacity`, and `background` — should be suppressed or shortened for `prefers-reduced-motion: reduce`.
Can JavaScript detect these preferences too? Yes: `window.matchMedia('(prefers-color-scheme: dark)').matches` returns a boolean. You can also add event listeners to respond to live changes.
What is `forced-colors` media query? It detects Windows High Contrast Mode. When forced-colors is active, the OS overrides your CSS colors with high-contrast system colors. Test your UI with Windows High Contrast Mode enabled.
Is `prefers-reduced-transparency` a thing? Yes. It's in the spec (Chrome 118+) and signals the user prefers less transparency — relevant for glassmorphism and backdrop-filter effects.
Related UI Components
Related Articles