#container-queries

[ follow ]
#css #responsive-design #web-development #styling #bem #media-queries #anchored-container-queries
#css
fromWebKit
1 week ago
Web development

Name-only @container queries: A solution to the naming wars

Name-only @container queries simplify styling by improving scoping without increasing specificity, addressing conflicts in CSS for elements with similar names.
from2ality
6 months ago
Web development

CSS wish: inner breakpoints

CSS lacks inner breakpoints that target individual HTML elements' sizes rather than viewports or containers.
Web development
fromWebKit
1 week ago

Name-only @container queries: A solution to the naming wars

Name-only @container queries simplify styling by improving scoping without increasing specificity, addressing conflicts in CSS for elements with similar names.
more#css
Web development
fromLogRocket Blog
3 months ago

Container queries in 2026: Powerful, but not a silver bullet - LogRocket Blog

Container queries enable components to adapt styling based on parent container context, allowing fine-grained responsive behavior beyond viewport-based media queries.
fromCSS-Tricks
4 months 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
Web development
fromPiccalilli
6 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
11 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 ]