A presentation at CSS Day + UX Special in in Amsterdam, Netherlands by Greg Whitworth
Container queries (a.k.a. element queries) are a concept that behave like CSS media queries, but rather than only changing styles based on the conditions of the viewport; allow them to change based on the size of the container. The request for container queries from web developers and designers seems to be everywhere. Why then, for something that is so commonly requested, not being solved? Or isn't it…? In this talk we'll explore the problem space that CSS based container queries creates for browsers due to the architecture of the pipeline. More importantly, we'll utilize some newer JS APIs and clever CSS techniques to solve container query use cases - because is it really the width that we want to trigger the query on?
The following resources were mentioned during the presentation or are useful additional information.
A collection of all of my demos used in this talk
When is it the right time to use certain container query methodologies - use this handy flow chart to narrow it down.
A collection of various use cases with different methodologies of solving the container query solution. If you have a new one, please contact me to add it to the collection!
This uses intersectionObserver to trigger the animations.
Greg Whitworth helps you understand what the browser does with your CSS to render them to the screen.