Recent CSS Bookmarks 19: Container Queries

Published on:: November 6, 2024
Categories:: CSS⁶¹, Container Queries², bookmarks²¹
Current music:: Phoebe Bridgers — I Know the End
Current drink:: Hot Cocoa

I originally wanted to write about something else today but, for some reason, did not have any motivation for it.

But hey, let me then do the best thing I could do otherwise: share some other people’s articles. It is always nice to think that there are others, who are interested in the same thing you are.

In this post, I gathered 15 bookmarks about container queries (and some other queries as well). This time, the order is from the more recent to the older ones. I’m still playing around with how I want to do these bookmarks.

“A Friendly Introduction to Container Queries” by Josh W. Comeau — a lengthy article with many interactive examples with an overview of container queries: why we need them and how to apply them.
“Feature detect Style Queries Support in CSS” by Bramus — a post about how we can use space toggles for the style query feature detection.
“Resolving Issues from Unexpected Changes to container-type: inline-size in Chrome 129” by Michael Charles Aubrey — a post about a recent change to layout containment (see “Weaker form of layout containment for container queries” CSSWG issue by Ian Kilpatrick), which is already shipped in Chrome, and is also present in the latest Firefox Nightly and Safari Technology Preview.
“Is the sticky thing stuck? Is the snappy item snapped? A look at state queries in CSS” by Brecht De Ruyte — an article with an overview of two experimental scroll-state queries which are currently available for testing in Chrome Canary. I, personally, still think that scroll-driven animations produce a much better result for at least the “stuck” use case, but I can also agree that they’re much harder to work with, and for more simple use cases state queries will be much easier to apply.
“Logical Properties in Size Queries” by Michelle Barker — a post about one difference between container queries from media queries when using logical properties in them.
“Building a breakout element with container units” by Andy Bell — a short case study about how container query length units can be useful for implementing breakout layouts. I used a similar approach a few times and can attest that this is a good use for them.
“Querying the Color Scheme” by me — a post about how we could hack around the light-dark () function, registered custom properties and style queries to implement a way to detect the color-scheme on children of any element.
“‘Smart’ Layouts With Container Queries “ by Kevin Powell — an article that shows just how much better container queries are compared to media queries, including showing some of their uncommon but useful aspects.
“What if you used Container Units for… everything?” by Chris Coyier — a post about an experiment with container query length units, and some things we can learn if we try to apply them to everything.
“How to use container queries now” by Philip Walton — an article with an extensive look over the different steps we can take if we need to support older browsers when using container queries, including working around their absence with a ResizeObserver.
“Opting into CSS container queries for an existing design system” by Georgie Cooke — a post that takes a banner example to demonstrate how container queries can be used in practice today, outlining one pitfall that we can fall in when applying container queries in a design system context.
“Field Testing CSS Containment for Web Performance Optimization” by Brian Louis Ramirez — a post about using containment (without queries this time, but with content-visibility) as a way to improve the rendering performance of web pages, with a few field tests and their results.
“What Are CSS Container Style Queries Good For?” by Juan Diego Rodriguez — an article with a basic overview of container queries and style container queries, with a few examples and explanations of how they work.
“Responsive posters in CSS” by Robin Rendle — a post about how we could use aspect-ratio and container query length units to create fully resizable “posters”.
“We’ve Got Container Queries Now, But Are We Actually Using Them?” by Chris Coyier — an article looking at the current usage of container queries, arguing that we could want to start using them more, and presenting several good examples.

That’s it for today. Be safe.