#container-queries

[ follow ]
fromCSS-Tricks
1 day ago

What Else Could Container Queries... Query? | CSS-Tricks

I'll admit, when container queries first shipped back in 2022, I didn't really pay attention. I mean, why container size queries when we already have media queries? Why container style queries when custom properties inherit anyway (they don't work with standard properties... yet)? Their use cases seemed like edge cases to me, enabling us to do things that we could already do but in a different way.
Web development
from2ality
2 months ago

CSS wish: inner breakpoints

One important recent next step were container queries: .parent { container-name: parent; container-type: inline-size; } article { flex-direction: row; } @container parent (width < 40rem) { article { flex-direction: column; } } Instead of reacting to viewport size changes, we can react to size changes of HTML elements. With media queries, the whole page was responsive. With container queries, individual user interface elements can be responsive, too.
Web development
Web development
fromPiccalilli
2 months ago

A workaround for using custom properties in media queries

Use container style queries plus @property and vi units to emulate media queries using custom properties and computed length comparisons.
UX design
fromFrontendmasters
7 months ago

Container Query for "is there enough space outside this element?"

Using viewport units within container queries enables flexible UI layouts, allowing elements to dynamically check available space for pagination arrows.
[ Load more ]