Solving container queries today
summary
Explains why CSS container queries break browser pipelines and shows concrete, working workarounds: using iframes so media queries resolve to a component, using CSS Grid and object-fit to solve layout without queries, polling with getBoundingClientRect + rAF (works but runs every frame), and newer APIs like ResizeObserver (Chrome-first) and IntersectionObserver for overflow detection. Builds demos — Madeline cow, an Outlook‑style nav that moves items into a submenu, text ellipsing — and measures costs (naive ellipsing costs ~31 ms per item).
AI-written summary · about
chapters (11)
- 0:00Start
- 2:59Container Queries
- 6:45Pros and Cons of Iframes
- 7:49Faux Grid with Css Flexbox
- 10:06Object Fit Color
- 11:37Grid Layout
- 15:01Resize Observer
- 15:19Mutation Observers
- 20:03Inter Intersection Observer
- 22:17Intersection Observer
- 38:15Summary
related talks
28mContainer Queries: The Past, Future, and How You Can Actually Even Use Them Today
54mCSS Containers, What Do They Know?
17mContainer queries, the next step towards a truly modular CSS
22mThe next step towards a truly modular CSS
19mContainer Queries
51mCSS in 2023 and beyond
50mStyling the Future: A Deep Dive into Modern CSS
46mNew things we love and more things we want in CSS