Exploring CSS Container Queries
CSS Container Queries are now widely supported in modern browsers! Here’s a summary and little demo.
CSS Container Queries what?
CSS Container Queries are a pretty new feature that allows developers to apply styles to elements based on their container’s dimensions rather than the viewport size. This approach is different from normal media queries which apply styling based on the screen size.
A benefit of this is that container queries allow for more effective use of media queries within the scope of the element itself. There is no need for overarching code to manage the styling of an element based on the viewport width. The element can manage this itself, making it more reusable.
And reusability is always better ✨
In general, CSS Container Queries can replace traditional media queries for the same design patterns. Rather than defining what a profile card should look like on every page or position, the profile card can define its appearance in different container sizes. The styling will then fit wherever the profile card is included.
🏢 Expandable building demo
Building a reusable profile card or navigation bar is a bit too boring for a demo. So to explore CSS Container Queries a bit more, I expanded on the Codepen of Gayane Gasparyan, creating an illustration of an expandable building in the style of Aleksandar Savic’s house illustrations
In this demo, the windows appear based on the width and height of the wall using container queries. The side wall uses the same logic as the front wall, and the windows appear based on their containing wall’s size.
Use the rescale corner under the red arrow to scale the building.