📝 CSS-Tricks 251: Container Queries are the Future

View this newsletter on the web.

[Robin]: First up this week, Una Kravets wrote about how marvelous the future will be with container queries:

Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.

Why is that? Well, when it comes to CSS, the very small is disconnected from the very big. So it would be easy to make relatively large layout changes with grid and media queries, but smaller components are disconnected from that logic. Adding container queries makes smaller bits of UI more intelligent in a way that they now understand the context that they exist in. Or, as Una says much more eloquently:

One of the best features of container queries is the ability to separate micro layouts from macro layouts. You can style individual elements with container queries, creating nuanced micro layouts, and style entire page layouts with media queries, the macro layout. This creates a new level of control that enables even more responsive interfaces.

And with that, Una shows this pretty nifty example. Watch how the dates at the top of the calendar change their size in response to the width of their parent:

In this demo, Una showcases what makes container queries so very useful: improving small typographic details like font-size, line-height, and other properties. Perhaps that’s my own bias showing here as a font nerd, but websites will be able to be so much more typographically beautiful once container queries lands in browsers. Our toolbox gets so much bigger.

On that note, Max Böck wrote about how container queries can be applied to web components and argued that they’re so very helpful when combined together because they set up a clear separation of concerns:

That’s why Container Queries pair so well with CSS Grid. Grid defines a flexible layout from the outside, while container queries adapt whatever content sits inside it to the optimal size for the available space.

His demo for container queries is equally impressive here:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s