Use the Right Container Query Syntax

Create responsive, reusable components that adapt to the available space of their container.

Reflections one year postpartum.

Update: August 30, 2022 Container queries are now supported in Chrome 105. This is a momentous occasion. Developers have been wanting container queries for years and now they have finally been implemented in a browser. Safari will soon follow in Safari 16. Firefox is working on implementation but has not shared when they think it […]

Find out about the picture element.

I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.

In more recent years, design systems and component libraries have gained popularity. There is also a desire to build once, deploy anywhere. Meaning a component developed in isolation is intended to work in any number of contexts to make building complex interfaces more efficient and consistent. CSS container queries have landed and are now available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.

Container queries are here! This game-changing CSS feature enables truly component-based responsive design.