Media Queries in Times of @container

With container queries now on the horizon - will we need media queries at all? Is there a future where we build responsive interfaces completely without them?

Ethan, who coined the term responsive web design over a decade ago, has recently said that media-query-less layouts are certainly within bounds:

Can we consider a flexible layout to be “responsive” if it doesn’t use any media queries, but only uses container queries? [...] I’d be inclined to answer: yes, absolutely.

Over at CSS-Tricks, Chris had similar thoughts. He issued a challenge to examine how and where media queries are used today, and if they will still be necessary going forward:

A common refrain, from me included, has been that if we had container queries we’d use them for the vast majority of what we use media queries for today. The challenge is: look through your CSS codebase now with fresh eyes knowing how the @container queries currently work. Does that refrain hold up?

Fair enough.
I took the bait and had a look at some of my projects - and yes, most of what I use @media for today can probably be accomplished by @container at some point. Nevertheless, I came up with a few scenarios where I think media queries will still be necessary.


For page layout

While container queries can theoretically be used to control any element, they really shine when applied to reusable, independent components. The canonical example is a card component: a self-contained piece of UI you can put anywhere.

Page layouts, on the other hand, are better suited for media queries in my opinion. Page layouts are usually at the very top level of the DOM, not nested in another container. I’ve never encountered a case where the main page layout had to adapt to any other context than the viewport.

.layout {
display: grid;
}
@media (min-width: 60em) {
.layout {
grid-template-rows: 4rem 1fr auto;
grid-template-columns: 25% 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
}

For global tokens

Another good usecase for media queries is to set global design tokens, like spacing or font-sizes. With CSS custom properties it’s now much easier to have fine-grain control over global styles for different devices.

For example, you might want to have bigger text and more whitespace on a large TV than you want for a mobile screen. A larger screen means the user’s head will be physically farther away.

It only makes sense to use a media query there - since the reason for the change is the size of the device itself, not the width of any specific element.

:root {
/* Font Sizes */
--font-size-headline-l: 1.875rem;
--font-size-headline-m: 1.75rem;
--font-size-headline-s: 1.5rem;
--font-size-copy-l: 1.125rem;
--font-size-copy-s: 0.875rem;

/* Global Spacing */
--spacing-x: 1rem;
--spacing-y: 1rem;
}
@media (min-width: 48em) {
:root {
--font-size-headline-l: 2.5rem;
--font-size-headline-m: 2rem;
--font-size-headline-s: 1.75rem;
--font-size-copy-l: 1.25rem;
--font-size-copy-s: 1rem;

--spacing-x: 2rem;
--spacing-y: 2rem;
}
}

For user preference and actual “media” queries

Screen dimensions are not the only things we can detect with media queries. The Media Queries Level 4 Spec (with Level 5 currently a working draft) lists many different queries related to user preference, like:

  • prefers-reduced-motion
  • prefers-contrast
  • prefers-reduced-transparency
  • prefers-color-scheme
  • inverted-colors
  • and others

We can use these to better tailor an experience to the current user’s specific needs.

Other media queries allow for micro-optimizations based on a device’s input method (i.e. touch or mouse):

/* fine pointers (mouse) can hit smaller checkboxes */
@media (pointer: fine) {
input[type="checkbox"] {
width: 1rem;
height: 1rem;
border-width: 1px;
border-color: blue;
}
}

/* coarse pointers (touch) need larger hit areas */
@media (pointer: coarse) {
input[type="checkbox"] {
width: 2rem;
height: 2rem;
border-width: 2px;
}
}

Finally, there are actual “media type” queries like @media print that won’t go anywhere. And there are experimental ideas being discussed for new media queries, like this one for “foldable” devices:

Samsung Galaxy Fold Z
:root {
--sidebar-width: 5rem;
}
/* if there's a single, vertical fold in the device's screen,
expand the sidebar width to cover the entire left side. */

@media (spanning: single-fold-vertical) {
:root {
--sidebar-width: env(fold-left);
}
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}

BTW: You can read more about this in "The new responsive: Web design in a component-driven world" by Una Kravets.

For fixed-to-window stuff

Components that are taken out of the normal document flow don’t have to care about their containers. Some UI elements are fixed to the viewport itself, usually oriented along an edge of the screen.

Have a look at Twitter’s “Messages” tab at the bottom of the screen for example. Its relevant container is the window, so it makes sense to use a media query here and only apply position: fixed at some breakpoint.

For heights

The current implementation of @container only allows querying the width of an element (its “inline” axis), not its height.

👉 Update: Miriam tells me that it is possible to query the height of containers, provided they are defined as size rather than inline-size. The exact value name of this is still in flux at the time of writing.

Style adjustments in relation to width are probably the primary use case for most UI elements anyway, but there are still cases where screen height is an issue. Here’s an example from a “hero image” component:

.hero {
display:flex;
flex-direction: column;
height: 100vh;
}
/* if the screen is really tall, don't fill all of it */
@media (min-height: 60em) {
.hero {
height: 75vh;
}
}

Mix Container Queries and Media Queries

While I think container queries will eventually replace most “low level” responsive logic, there are still a lot of good usecases for trusty media queries.

A combination of both techniques will probably be the best way forward. @media can handle the big picture stuff, user preferences and global styles; @container will take care of all the micro-adjustments in the components themselves.

A perfect team!

Webmentions

What’s this?
  1. Nicolas Hoizey
    We also still need media queries for the `sizes` attribute of responsive images.
  2. Brad Frost
    This is fantastic! Although "There’s rarely ever more than one main layout on a page" Have you _seen_ my clients?!
  3. Benoit Marchant
    aren’t media queries riot componen’s container query?
Show All Webmentions (55)
  1. Max Böck
    😅 haha ah right, the marketing pages I was thinking about classic top-level header/content/footer stuff... But "content" can ofc contain 600 teaser sections with some carousels sprinkled in
  2. Manuel Matuzović
    Any day Max publishes an article (about CSS) is a good day. He has answers to the question “With container queries now on the horizon - will we need media queries at all?” mxb.dev/blog/media-que…
  3. Max Böck
    🙌
  4. Hidde
    Excellent post, Max!
  5. Max Böck
    Thanks Hidde! 🙌
  6. Sara Soueidan
    I love this! And 100% agreed on all terms. Page layout and global design tokens are my main reasons to say media queries aren't going away soon. Also, I use Grid and Flexbox for some component layouts, so I also don't think I'll use CQs for every component layout need.
  7. Max Böck
    Thanks Sara! Yeah "intrinsic" layouts like smart grids are my favorite solution to all of this. Simple and elegant. 💯
  8. Absolutely agree.
  9. Smashing Magazine
    So, will we need media queries at all in the future? Probably yes: – @container will replace most low level responsive logic. – @media for big picture stuf, user prefs and global styles. – @container for micro-adjustments of the components. mxb.dev/blog/media-que… by @mxbck
  10. Saptak Sengupta
    This was a great read. Very well detailed and covers evrything. 100% agree with this!
  11. Ana Travas
    Media Queries in Times of @container mxb.dev/blog/media-que…
  12. Rafał Grabie
    Top story: Media Queries in Times of @container | Max Böck mxb.dev/blog/media-que…, see more tweetedtimes.com/v/21215?s=tnp
  13. Yes. And probably.
  14. Franz Unterkoffer
    Good Post. Thank you Max!
  15. This is a great article on what will become @/container, & where we still need @/media.
  16. Ethan Marcotte
    Really liked this post by @mxbck, which I read as a handy reminder that it’s not media queries OR container queries—they’ll be most effective when used in concert, for the tasks they’re each designed for. mxb.dev/blog/media-que…
  17. Media Queries in Times of @container | Max Böck mxb.dev/blog/media-que…
  18. Matt Wilcox
    Media queries != responsive design. Responsive design is having elements adapt to context. That's all. Media queries were just one tool to achieve that. All we had was a hammer. But the hammer is not the craft. mxb.dev/blog/media-que…
  19. Roberto De Santis
    Top story: Media Queries in Times of @container | Max Böck mxb.dev/blog/media-que…, see more tweetedtimes.com/helikopterdsgn…
  20. EJCSoftwareSolutions
    Top story: Media Queries in Times of @container | Max Böck mxb.dev/blog/media-que…, see more tweetedtimes.com/helikopterdsgn…
  21. Focus Mobility
    Top story: Media Queries in Times of @container | Max Böck mxb.dev/blog/media-que…, see more tweetedtimes.com/helikopterdsgn…
  22. Luis Orduz
  23. Fresh Frontend Links
    Media Queries in Times of @container mxb.dev/blog/media-que…
  24. Angel Arrieta
    Hi 👋 @mxbck Is compatibility for the all browsers ?
  25. Max Böck
    if you're asking about support for container queries - no browser supports them yet. they are an experimental feature currently only implemented in "Chrome Canary", the unstable version of Chrome.
  26. Friday Front-End
    Media Queries in Times of @container, by @mxbck mxb.dev/blog/media-que…
  27. Leo
    #CSS Media queries in times of @container mxb.dev/blog/media-que…
  28. Rafa Garcés
    Para después de la mudanza
  29. Stef Walter
    #CSS Media Queries in Times of @\container by @mxbck, aka "can we do responsive web design only using container queries". TLDNR you could but there's still a lot of @\media that can help with layout, toekns, user preferences for example for the big picture mxb.dev/blog/media-que…
  30. FullStack Bulletin
    Media Queries in Times of container mxb.dev/blog/media-que…
  31. Silvestar Bistrović
    Max Böck tries to figure out will we need media queries at all with container queries on the horizon. mxb.dev/blog/media-que… via @mxbck
  32. Feedpushr feeds.
    Media Queries in Times of @container mxb.dev/blog/media-que…
  33. VisionSnap
    Media Queries in Times of @container CSS Tricks mxb.dev/blog/media-que…
  34. COMMENTSENSE
    Media Queries in Times of @container | Max Böck mxb.dev/blog/media-que…
  35. Wolfie🐺
  36. Etim*
  37. Richard Carlier
    Media Queries in Times of @container | With container queries now on the horizon - will we need media queries at all? Is there a future where we build responsive interfaces completely without them? #css #mediaQuery #container mxb.dev/blog/media-que…
  38. i've never understood why web devs ask questions like this. "will we still need X / can we stop using X now that we have Y?" when X and Y do two different things and it was never intended to be a replacement grid doesn't replace flex at-container doesn't replace at-media
  39. this is not a dig at @mxbck but at anyone with the mindset that any new css feature is necessarily a total replacement of some other
  40. Max Böck
    I agree! Perhaps the tweet is abit misleading. The post is more about figuring out which usecases are better suited for CQ and which for @/media.
  41. yup, it's very helpful. it just reminds me of web devs with that certain mindset and posts like this seem necessary to clear things up (in addition to helping people who are just overwhelmed by the different options and tools)
  42. Jon Kantner
    With container queries on the rise, @mxbck questions the need for media queries, which I think are still too relevant. mxb.dev/blog/media-que… #CSS
  43. Speckyboy
    Media Queries in Times of container mxb.dev/blog/media-que…