A New Era of Responsive Design: Unpacking CSS Container Queries
The last few months have seen a raft of exciting new features added to the web platform, and there’s one in particular that web developers have been longing for since the term “Responsive Web Design” was coined by Ethan Marcotte back in 2010… container queries.
What are Container Queries?
Until recently, how content responds and reflows (making it “responsive”) has been based on the size of the screen — more specifically, the viewport. This allowed us to adjust layouts to adapt to all manner of screens, from smart watches to ultra-wide monitors and 5K TVs. Container queries, on the other hand, allow elements to adapt based on the size of their container in the interface, not just the size of the screen.
Why Container Queries Matter
For website owners, this means more flexibility and less headache in designing web pages that look great on all devices. The effect of container queries has been possible in the past, but involved a lot of extra work and code. Now, it’s built right into CSS.
But where container queries really shine is in building design systems (What is a design system?), like the one we created for the NZ Institute of Management. A component library built with container queries allows for more flexible, reusable and more easily-maintainable components, and a more consistent user experience across devices.
CSS container queries also offer some performance benefits over traditional viewport-based media queries, as they allow for more targeted styling and help to avoid unnecessary style recalculations.
Let’s take a look at how the magic happens.
The Nitty-Gritty of Container Queries
How Do Container Queries Work?
Here’s a simple example. Let’s say you have a card component and it needs to have a different layout depending on its size. With container queries, you can write CSS that says something like: “If this card is wider than 500px, change the layout and make the text inside it larger.”
Content Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
While flipping the layout from vertical to horizontal has always been straight-forward, container queries make it much simpler to change other aspects of the component, such as padding, colours and typography. It’s like giving your website components a brain to decide how they should look based on their surroundings, not just the whole screen.
Implementing Container Queries
To use container queries, you’ll need a container to query against. This involves setting a contain property on an element. Then, you can write your container query much like you’d write a media query, but it’s scoped to that container.
Here’s a basic example:
.card {
container-type: inline-size;
container-name: card-layout;
/* Or the shorthand:
contain: card-layout / inline-size;
*/
}
@container card-layout (width > 300px) {
/* Styles for when the card is wider than 300px */
font-size: 2em;
}
But Can I Use Them?
Container queries are still pretty new but browser support is excellent — they’re now supported in all major browsers. They can be safely used in production today, provided there are fallbacks for older browsers where needed.
Wrapping It Up
CSS container queries are revolutionising how we approach responsive design. Using container queries when building a website or application translates to a more fluid user experience and design systems that are more flexible, reusable, and code that’s easier to maintain.