CSS Container Queries in Practice

on Winging It episode 7 with Miriam & Stacy on May 16, 2024 | 45 mins

Miriam Suzanne and Stacy Kvernmo talk about CSS Container Queries and the unexpected things that happen when you add containment. Some elements completely collapse! What’s going on there? We had questions and thought you might too. So we talk through the issue in our monthly live stream.

Subscribe to Channel »

What we cover:

What are container queries and why you should use them
How container queries differ from media queries
Why some layouts collapse when you add containment
Size containment with contain-intrinsic-size
Why should we avoid adding containment on root
Why a container can’t query itself
An opt-out strategy to remove containment

Demos:

Recent Episodes

Winging It post type

Mixins & Functions to Streamline CSS

With special guest Roma Komarov

on Winging It episode 24 with Miriam & Stacy on Aug 27 | 59 min

The CSS Working Group got together in August to discuss a range of old and new issues. The following week, Miriam Suzanne and Stacy Kvernmo chatted with CSS expert Roma Komarov about how to create reusable and more flexible CSS using mixins and functions, what happened in the CSSWG meetings…

see all Winging It posts
Winging It post type

Container queries are widely available!

on Winging It episode 23 with Miriam on Aug 13 | 3.5 min

Happy 30-month anniversary to Container Queries – shipping in every browser since February of 2023. It was supposed to be impossible, but here we are!

see all Winging It posts
Winging It post type

Avoid this mistake when anchor positioning a popover!

on Winging It episode 22 with James on Aug 12 | 1 min

Are you positioning a popover with CSS anchor positioning and position-area? Make sure to override the default margins on the popover.

see all Winging It posts