#container-queries

[ follow ]
#responsive-design #css #web-development #grid-layout #css-custom-properties #css-property #vi-unit #ui-design
from2ality
6 days 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
1 week 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
4 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 ]