A New Layer of Responsiveness
For over a decade, "responsive design" has meant one thing: using @media queries and the viewport width to switch between mobile, tablet, and desktop layouts. That approach, while powerful, has always been a blunt instrument. It ties component styling to global page dimensions instead of letting components react to their own context.
The ecosystem is now shifting toward component-based design—and CSS is evolving to match. A new wave of capabilities is emerging that moves beyond the viewport to make interfaces responsive to user preferences, their containers, and even their physical form factors.
Designing Around User Preferences
User preference media features allow interfaces to align with how a person has already configured their operating system—making accessibility and personalization part of the core design rather than an afterthought.
These features include:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors
Reduced Motion Doesn't Mean No Motion
Users who enable reduced-motion settings are asking for fewer animations. But motion remains critical for conveying information online, so prefers-reduced-motion shouldn't result in a static page. Instead, establish a straightforward crossfade or minimal change as the baseline, then progressively enhance with richer motion—such as card flip animations—for users who haven't opted out.
Theming with Light and Dark
The prefers-color-scheme feature handles light and dark appearance. When you structure color tokens using CSS custom properties, applying a theme switch is as easy as overriding variables like backgroundColor or textOnPrimary inside the media query. Chrome DevTools offers emulation for testing these features without touching system settings.
Dark themes require more than inverting foreground and background. Desaturate colors to avoid visual vibration, and use lighter background shades rather than shadows to create depth—shadows don't read well in dark modes. The payoff matters: an Android study from 2018 measured up to a 60% power draw savings on AMOLED displays when dark mode was used at high brightness.
Component-Driven Layout with Container Queries
Container queries are one of the most significant shifts in responsive CSS in years. They replace the page-based, viewport-only approach with element-based styling: the component itself queries its parent container's size.
The @container at-rule works like @media but responds to the available space in a specific parent element.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
To use it, first apply containment to the parent element. Then write a @container query that applies child styles based on the inherited space, optionally using min-width or max-width to set thresholds. In the snippet above, the links hide and the time font shrinks once the container drops under 850px.
Perfect examples are card components, which commonly appear in sliders, grids, and sidebars. The flexibility is impossible with media queries alone.
For one demo floral commerce site, every product card—including the featured hero card, the previously-viewed column, and the card grid—is identical markup rendered across contexts. Container queries alone power the entire responsive experience, including the grid itself, using minmax columns to trigger card re-layouts when it shrinks below the minimum.
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Whenever the column space is at least 350px, the card switches to horizontal with display: flex. Below that, it stacks.
Pairing Macro and Micro Queries
Container queries excel at per-component, or micro, layout. A great demonstration is a calendar element: the day number, event margins, and typography adjust based on the width available to the widget’s parent. Then device-level resizing triggers a media query for whole-page, macro-level changes.
In this model, styles aren't strictly tied to global viewport sizes. Combining global media queries for overall layout and container queries for internal design is what makes the modern approach both scalable and precise.
Testing Container Queries Now
The demos are live behind Chrome Canary flags. Navigate to about://flags, enable #enable-container-queries, and you're ready. This unlocks support for the @container at-rule, sizing containment via inline-size and block-size, the LayoutNG Grid implementation, and DevTools helpers for inspection.
Scoping Styles in CSS
Container queries do not solve selector leak. The related @scope mechanism does just that—it lets you create encapsulated selectors natively, similar to what CSS Modules offer, without adjusting markup.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
With @scope, you define an upper boundary and optionally a lower boundary. Think of a "ring" of included selectors in between those bounds. For example, a tab design can receive the component styles, while the tab panel can be excluded from them—eliminating name collisions and odd cross-component interference.
Adapting to New Devices, Foldables Included
A change is also arriving in the form factors we design for. One emerging concern is the foldable or dual-screen device layout, and how to build an interface that doesn't land drawn across a crease.
Screen-spanning media queries give you explicit control via a pattern like @media (spanning: <type of fold>), updating custom variables such as --sidebar-width when the system recognizes the physical fold layout.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
This supports scenarios where a navigation rail fills the primary fold, leaving app content cleanly on the rest of the screen. Chrome DevTools emulation can simulate such devices for testing screen-spanning behavior.
The era of component-level responsiveness is still maturing, but foundational pieces are arriving now. New preference features respond to the user, container queries respond to layouts, and the platform is opening up for wearable, mixed-reality, and foldable environments. Responsive design is not redundant—it just found a wider canvas to be responsive to.
Responsive design's next shift
Container queries and scoped styles matter because they let you move beyond designing strictly for a flat screen. They make it possible to separate component styles from page-level layout, global styles and user styles, which in turn creates more resilient responsive systems.
That separation introduces distinct layers for designing experiences:
- Macro layouts continue to rely on page-based media queries, which can account for wider screen-spanning nuances.
- Micro layouts are handled directly on components with container queries.
- User preference media queries adapt the experience to each user's specific settings and needs.
This combination—macro layouts, micro layouts, user customization and form factor—is the new responsive design. It's a significant departure from the older model where the viewport was the primary variable. Each one of these changes on its own would represent a considerable shift in approach; together, they change the fundamental way responsive design is conceptualized.
These tools are available to experiment with now. As the design community leans into component-based styles and accounts for new device form factors, the opportunity is to build interfaces that are genuinely responsive to the user's context — not just their screen size.
Learn more with web.dev/learnCSS
For those looking to revisit the fundamentals or sharpen their skills, the web.dev team has launched a brand new, free CSS course and reference at web.dev/learnCSS.
