Container queries don’t exist today but a lot of web developers have been arguing in their favor lately. At first, the idea sounds relatively simple: whereas media queries allow us to make style changes based on the width of the browser, container queries would allow us to make style updates when the width of an element’s parent changes.
That’s an important distinction to make and would likely solve a ton of daily problems for most web developers, especially those working on large design systems with components that are designed to be used without any context of the elements around them.
Zach Leatherman walks us through the history of container queries to date and how calls for their support started:
Container Queries are an often requested feature of the web platform. It has become almost cliché to mention it when talking about problems we’d like the web platform to solve. Container Queries would go a long way toward helping web developers do their jobs better and its omission is a huge limitation when developing component-based code for the web.
I’ve found in my work on a big ol’ design system that media queries just don’t cut it anymore when it comes to making components because our team frequently needs to change the styles of an element based on the width of the parent element. So, my hot take on this subject is that, after CSS Grid, container queries are the next big piece of the web design layout puzzle.
As Ethan Marcotte wrote on the subject some time ago:
Speaking just for myself, I know container queries would revolutionize my design practice, and better prepare responsive design for mobile, desktop, tablet—and whatever’s coming next.