Heydon’s <watched-box> is a damn fantastic tool. It’s a custom element that essentially does container queries by way of class names that get added to the box based on size breakpoints that are calculated with ResizeObserver. It’s like a …
That’s the title of a public post from David Baron, a Principal Engineer at Firefox, with thoughts toward container queries. I know a lot of people have been holding their breath waiting for David’s ideas, as he’s one of few …
Container queries don’t exist today but a lot of web developers have been arguing in their favor lately. At first, the idea sounds relatively simple: whereas media queries allow us to make style changes based on the width of the …
Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re …
Container Queries, as in, the ability to style elements based on values from a particular element, like its width and height. We have media queries, but those are based on the viewport not individual elements. There are plenty of …
Right now, we have the power to write CSS that only applies when the browser window itself is at certain widths or heights. Breakpoints, as it were. Super useful. What we don’t have (natively) is the ability to write conditional …
I guess the plan is to stop with the “element queries” and start thinking and referring to them as “container queries”. We’ve been following this saga for a while. Element queries have a serious pitfall: infinite loops.
.our-element:media(min-width: 500px) {
This is a perfect example of making a case for new language features. Not just a vague “element queries! that would be awesome!” but laying out a real-world scenario, what we have to do to achieve it now, and why …
Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 …
