#ContainerQueries
LightNews LightNews
richicodes.bsky.social
CSS style queries: one variable, every style

Container style queries let a component restyle itself from the value of a custom property, and since May 2026 they work in every major browser.

#css #containerqueries #customproperties
CSS style queries: one variable, every style
Container style queries let a component restyle itself from the value of a custom property, and since May 2026 they work in every major browser.
richi.codes
October 31, 2026 at 4:00 PM
inautilo.bsky.social
#Development #Previews
Useful @custom-media presets · I can’t wait to use custom media queries.” ilo.im/16hfso by Daniel Schwarz

_____
#ModernCSS #CssReset #MediaQueries #ContainerQueries #CustomProperties #HDR #Browsers #WebDev #Frontend #CSS
Useful @custom-media Presets
Custom media queries let you name and reuse media queries the way custom properties do for values. Here’s a set of drop-in @custom-media presets for input mechanisms, breakpoints, and true HDR, plus...
ilo.im
October 29, 2026 at 10:35 AM
richicodes.bsky.social
CSS progress(): one number drives the whole layout

The CSS progress() function turns any value into a 0-to-1 ratio, so one container width can drive size, colour, shadow and staggered reveals with no JavaScript.

#css #progress #containerqueries
CSS progress(): one number drives the whole layout
The CSS progress() function turns any value into a 0-to-1 ratio, so one container width can drive size, colour, shadow and staggered reveals with no JavaScript.
richi.codes
October 23, 2026 at 3:00 PM
dxsrc.org
Stop Treating CSS Container Queries Like Traditional Media Queries, by @smashingmag@mastodon.social:

https://www.smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/?ref=frontenddogma.com

#css #containerqueries #mediaqueries
Stop Treating CSS Container Queries Like Traditional Media Queries — Smashing Magazine
Despite broad browser support, container queries remain surprisingly underused and frequently misunderstood. Let’s look at how they differ from media queries, when to reach for each, and how container queries help reusable components respond naturally to the contexts in which they appear. - CSS -…
www.smashingmagazine.com
October 2, 2026 at 7:30 AM
dxsrc.org
12 CSS Features You Can Use Today With No Build Step, by @flaviocopes.com:

https://flaviocopes.com/modern-css-features/?ref=frontenddogma.com

#css #nesting #functions #containerqueries #grids
12 CSS features you can use today with no build step
Modern CSS features that replace Sass, PostCSS plugins and JavaScript hacks: nesting, :has(), container queries, subgrid and more, checked in September 2026.
flaviocopes.com
September 28, 2026 at 8:30 AM
inautilo.bsky.social
#Development #Techniques
Fixing fluid typography · Consistent text sizing with CSS @property ilo.im/16g7o4 by Kevin Powell

_____
#Typography #Text #Content #WebDev #Frontend #CSS #CssProperty #ContainerQueries #CssClamp
Fixing fluid typography
👉 Start writing CSS with confidence: https://thecascade.dev/courses...
ilo.im
September 17, 2026 at 4:11 AM
inautilo.bsky.social
#Development #Approaches
Container style queries and advanced attr() · What if components styled themselves in CSS? ilo.im/16fz65 by Brecht De Ruyte

_____
#HTML #CSS #Components #AttrFunction #ContainerQueries #CustomProperties #WebDev #Frontend
Container style queries and advanced attr(): rethinking how to wire up my components in CSS | utilitybend
Wiring HTML attributes into CSS with advanced typed attr(), and letting container style queries pass that state down to child components.
ilo.im
September 9, 2026 at 10:09 AM
inautilo.bsky.social
#Development #Techniques
Balancing CSS flex items · Meet the experimental ‘flex-wrap: balance’ and ‘flex-line-count’ ilo.im/16fm7j by Ahmad Shadeed

_____
#Layouts #CssFlexbox #ContainerQueries #CssClamp #Masonry #Chrome #Browser #WebDev #Frontend #CSS
Balancing flex items with flex-wrap: balance
A look at how flex items wrap and how to balance them across lines.
ilo.im
August 26, 2026 at 3:00 AM
kindtech.bsky.social
Container queries let components respond to their own wrapper instead of the viewport. A card in a narrow sidebar collapses while the same card in a grid shows full details. Define a container on the parent and style children by its inline size for truly portable UI. #CSS #ContainerQueries #WebDev
August 20, 2026 at 1:32 PM
kindtech.bsky.social
Container queries let components respond to their own space instead of the viewport. A card styled for a narrow sidebar stays correct when reused in a wide grid, with zero media query rewrites. Define container type on the parent, query width in the component. #ContainerQueries #CSS #Frontend
August 20, 2026 at 12:31 PM
kindtech.bsky.social
CSS container queries finally made components truly reusable. Components now respond to their own wrapper size instead of the viewport, which unlocks cards, sidebars, and widgets that adapt anywhere you drop them. Responsive design matured beyond the mobile era. #CSS #ContainerQueries #WebDev
August 20, 2026 at 11:56 AM
kindtech.bsky.social
Container queries let components respond to their own box instead of the viewport. Responsive design stops being about breakpoints and becomes about component boundaries which is how UI is actually composed
#ContainerQueries #ResponsiveDesign #CSS
August 20, 2026 at 3:57 AM
claudialn.bsky.social
Modern CSS is cool and all but I've gotten to a point where if I break concentration everything becomes an ancient dialect no one's ever seen before 🫠

#css #moderncss #css4 #frontend #webdesign #webdev #fluidcss #fluidresponsive #containerqueries
css code using where, not, wildcard, child and containing selectors with container query index inside of clamp.
May 29, 2025 at 6:17 AM
michalski.bsky.social
#css #containerqueries
bram.us Bramus @bram.us · May 7
Custom Properties compute before they inherit ... and by registering a custom property with a certain syntax, CSS knows what to compute it to ... which allows this:
frontendmasters.com Master.dev (Formerly Frontend Masters) @frontendmasters.com · May 7
Using Container Query Units Relative to an Outer Container

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.
May 7, 2025 at 9:36 PM
michalski.bsky.social
#css #containerqueries #rwd
piccalil.li Piccalilli @piccalil.li · Mar 4
🗂️ From the archives

Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.
Building a breakout element with container units
Learn how to use container units and container queries to enhance an already flexible sidebar layout with some extra design control and full width breakout elements.
buff.ly
March 27, 2025 at 9:04 PM
michalski.bsky.social
#containerqueries #css
February 3, 2025 at 2:36 PM
michalski.bsky.social
#css #scroll #containerqueries
nerdy.dev Adam Argyle @nerdy.dev · Jan 15
#CSS scroll-state() container queries
in Chrome 133!

@container scroll-state(stuck: top) {
…
}

Read all about snapped, stuck and scrollable in this post:
developer.chrome.com/blog/css-scr...

↪ nerdy.dev/scroll-state...
January 23, 2025 at 10:09 AM
michalski.bsky.social
#css #scroll #containerqueries
nerdy.dev Adam Argyle @nerdy.dev · Dec 5
#CSS scroll-state() container queries:
the "stuck" query

```css
@container scroll-state(stuck: top) {
box-shadow: var(--shadow-5);
border-radius: var(--radius-3);
margin: var(--size-5);
}
```

article coming soon!
(currently in Canary experiments)
December 17, 2024 at 5:39 PM
michalski.bsky.social
Container queries #css #containerqueries
December 17, 2024 at 5:27 PM
michabbb.bsky.social
Open-sourcing our progress on #TailwindCSS v4.0 Alpha

It introduces #Oxide for faster builds, smaller footprints, #Rust integration, with a #CSS first approach. It includes native CascadeLayers, #ContainerQueries, aiming for a streamlined CSS toolchain.

tailwindcss.com/blog/tailwin...
Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS
We just tagged the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year.
tailwindcss.com
March 7, 2024 at 3:59 PM
pablolarah.bsky.social
🔵 Web Weekly 194
by @stefanjudis.com
Safari 27 beta
The future of Firefox and the web
CSS gap decorations
headingoffset
Breaking changes in npm v12
Container style queries
#webdev #ContainerQueries #Firefox #CSS

webweekly.email/archive/web-...
Text: Web Weekly 194 Safari 27 beta The future of Firefox and the web CSS gap decorations headingoffset Breaking changes in npm v12 Container style queries 📬 Stay up-to-date with webweekly.email. On the right, cartoon character representing Stefan reading a newspaper with title WEB.
June 16, 2026 at 2:42 PM
pablolarah.bsky.social
🔴🟡 Name-Only Containers: The Scoping We Needed
by Chris Coyier
@chriscoyier.net @chriscoyier@front-end.social
at @frontendmasters.com
#container #ContainerQueries #CSS #scope #webdev

frontendmasters.com/blog/name-on...
Red text with white 3D shadow on yellow background with illustration of tea boxes: Name-Only Containers: The Scoping We Needed
April 7, 2026 at 8:15 PM
pablolarah.bsky.social
🟡⚫ Building dynamic toggletips using anchored container queries
by Daniel Schwarz
@dxnny.fun
at Piccalilli @piccalil.li

#toggletips #ContainerQueries #webdev

piccalil.li/blog/buildin...
Black text on grey background: Building dynamic toggletips using anchored container queries
March 23, 2026 at 11:26 PM
pablolarah.bsky.social
🟠🟣 Container Queries Unleashed
by @joshwcomeau.com

#css #ContainerQueries #webdev

www.joshwcomeau.com/css/containe...
Violet text with orange shadow ("Container Queries Unleashed") on duotone orange white image of Vanity Sounds the Horn and Ignorance Unleashes the Hounds Overconfidence, Rashness and Desire (from The Hunt of the Frail Stag)
January 27, 2025 at 7:39 PM