Skip to main content
CSS is fun and cool and I like it.
Article

Playing With (Fake) Container Queries With watched-box & resizeasaurus

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 cleaner version of what Philip was talking about a few years ago.

I’m sure I’d be happy using <watched-box> on production, as it’s lightweight, has no dependencies, and has a straightforward approach.… Read article “Playing With (Fake) Container Queries With watched-box & resizeasaurus”

Link

[David Baron’s] Thoughts on an implementable path forward for Container Queries

Link

The Origin Story of Container Queries

Article

Let’s Not Forget About Container Queries

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 actually trying to control a more scoped container, and the only reason we use media queries for that now is because it’s the best tool we have in CSS. I absolutely believe that. … Read article “Let’s Not Forget About Container Queries”

Link

Responsive Components: a Solution to the Container Queries Problem

Link

Container Queries: Once More Unto the Breach

Link

Use Cases and Requirements for Element Queries

Article

Thoughts on Media Queries for Elements

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 to 2, the column probably temporarily gets wider than it was, even though the screen is narrower. It would be preferable when writing the media query logic for those tabs to consider how much space the widget has available rather … Read article “Thoughts on Media Queries for Elements”

Link

Responsive Elements