Responsive Component Design with CSS Container Queries
Everything is in flux. Modern web design has to account for a seemingly endless array of different screen sizes. With @media queries, you can style elements based on features of the browser viewport, e.g, the screen's width.
But what if you want to create reusable components that are responsive to the container they're placed in? For example, a news card that can span the whole width of the website or fit into a narrow column on the side. We can do that now!
With CSS Container Queries we can design responsive, reusable components that adapt to the available space. With the recent release of Firefox 110, the feature is now supported by all major browsers. This is a total game changer! Let's see how it works.
Photo: © Pixabay / pexels.com
Query the Size of Containers
Container queries allow us to apply styles to elements based on the size of their container rather than the viewport. The feature is defined in the CSS Module CSS Containment Module Level 3. The document states:
While media queries provide a method to query aspects of the user agent or device environment that a document is being displayed in (such as viewport dimensions or user preferences), container queries allow testing aspects of elements within the document (such as box dimensions or computed styles).
We can query different size container features like width, height or inline-size. The specification also includes container style queries, but those aren't supported by browsers yet.
To style a component based on its parent size, we need to set containment on the parent element with the container-type CSS property. It's recommended to also name the container using container-name. Here's an example:
.news-card {
container-type: inline-size;
container-name: news-card;
}
You can also set the type and name simultaneously with the container shorthand property:
.news-card {
container: news-card / inline-size;
}
Now we can query the container with the @container CSS at-rule and apply some conditional styling. For example, if the container's width is below a certain threshold:
@container news-card (max-width: 25rem) {
.card-image {
flex-basis: 100%;
}
}
Demo: Responsive News Card
I've created a simple demo on Codepen that shows a news card component. If enough space is available, the card lays out its content horizontally. If the container's width falls below a certain threshold, the text is moved below the image.
Further Reading
There's a lot more to learn about container queries. Check out the following guides and examples:
- “CSS container queries are finally here”, by Ahmad Shadeed
- “Early Days of Container Style Queries”, by Geoff Graham
- “Use the Right Container Query Syntax”, by Miriam Suzanne
- “Day 56: container queries”, by Manuel Matuzović
- “Container queries land in stable browsers”, by Una Kravets
Conclusion
I'm super excited about CSS container queries! Yet, I've barely scratched the surface of all the possible use cases. My goal is to use the feature in more and more projects and contiuously improve my understanding of it.
In my opinion, one thing is certain: Container queries will change the way we write CSS for good. What ideas and use cases have you already implemented with the feature?
Posted on