Container queries are widely available!
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!
Winging It
post type
CSS Container Queries in Practice
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.
What we cover:
Copy permalink to “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
Links:
Copy permalink to “Links:”- Can We Query the Root Container?
- Ahmad Shadeed’s Interactive Guide to CSS Container Queries
- Cascading Layouts Workshop
Demos:
Copy permalink to “Demos:”Recent Episodes
Winging It post typeAvoid this mistake when anchor positioning a popover!
Are you positioning a popover with CSS anchor positioning and
position-area? Make sure to override the default margins on the popover.
Winging It post typeThere’s a new stretch keyword in CSS?
There’s a new stretch keyword that we can use for CSS
heightandwidthproperties. But how is that different from100%? And how is that different from100vhwhen we want a full-height layout?
