Container Queries

on YouTube ↗19m

" summary

Claims that container queries lack a browser spec so implementations must live in CSS, HTML, or JavaScript and that Shopify implements them with a JS array of selectors, classes and width constraints (only width matters for that rollout). Explains the circular dependency and style/layout pipeline problem, notes Resize Observer helps and Houdini is promising but incomplete, and demonstrates practical fallbacks that work today using flexbox, display grid, object-fit and repeat/autofit patterns to reflow components without container queries.

AI-written summary · about

" chapters (5)

1. 0:00Intro
2. 0:18Why Container Queries
3. 5:50CSS Container Queries
4. 9:07Browser Container Queries
5. 12:37Houdini

" related talks

• 28mContainer Queries: The Past, Future, and How You Can Actually Even Use Them TodayPhilip Walton · CSSconf EU 2018
• 17mContainer queries, the next step towards a truly modular CSSMaarten Van Hoof · JSWORLD Conference 2022 Online
• 54mCSS Containers, What Do They Know?Miriam E Suzanne · CSS Day 2023
• 22mThe next step towards a truly modular CSSMaarten Van Hoof · JSHeroes 2023
• 48mWhat Are Container Queries and Why You Need ThemSerezha Popov · HolyJS 2023 Spring
• 45mSolving container queries todayGreg Whitworth · CSS Day + UX Special 2018
• 52mResponsive Web Applications with Container QueriesJonathan Snook · Frontend United 2017
• 49mContainers, What Do They Know?Miriam E Suzanne · SmashingConf Freiburg 2023