#containerqueries
LightNews LightNews
inautilo.bsky.social
#Development #Techniques
Section layouts · How modern CSS can make them more dynamic ilo.im/167vol by Ahmad Shadeed

_____
#ModernCSS #CssGrid #ContainerQueries #CssClamp #Layouts #Typography #Browser #WebDev #Frontend #CSS
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ilo.im
October 24, 2025 at 7:59 AM
inautilo.bsky.social
#Development #Techniques
Custom properties in media queries? · A workaround powered by modern CSS ilo.im/1675st by Manuel Matuzović

_____
#ModernCSS #MediaQueries #ContainerQueries #StyleQueries #CustomProperties #Browser #WebDev #Frontend #CSS
A workaround for using custom properties in media queries
One of the most frustrating aspects of media queries is that we can’t use custom properties with them. This often results in hard-coded values in otherwise, highly configurable codebases. Manuel has...
ilo.im
September 25, 2025 at 2:52 PM
frontenddogma.com
Dynamic Media/Container Queries Using “if()”, by @css@front-end.social:

https://css-tip.com/dynamic-queries/

#css #conditionals #mediaqueries #containerqueries
Dynamic media/container queries using if()
Use modern CSS to express media queries and container queries differently
css-tip.com
August 25, 2025 at 7:30 PM
frontenddogma.com
Unconditional Love for Conditional CSS, by @geoff@front-end.social:

https://geoffgraham.me/unconditional-love-for-conditional-css/

#css #functions #conditionals #mixins #containerqueries
Unconditional Love for Conditional CSS - Geoff Graham
(Re-published from the Smashing Magazine newsletter.)
geoffgraham.me
August 16, 2025 at 7:30 AM
oddbird.dev
Dig into #CSS Container Queries with @miriam.codes & David Herron at OddBird:

Container Queries Videos youtube.com/playlist?list=PL4jAKUtAhpHkH3DMK8JNVPDjvKljPkNVU

For a Better Web oddbird.net/2025/04/08/better-web-8/

Container Queries: A Quick Start Guide oddbird.net/2021/04/05/containerqueries
Container Queries: a Quick Start Guide
Now is the time to begin experimenting with a long requested layout tool.
oddbird.net
July 30, 2025 at 8:56 PM
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
nebraskacode.bsky.social
Alex Riviere presents 'Fresh Hot CSS Features!' July 25th at Nebraska.Code().

nebraskacode.amegala.com

#cssframework #bootstrap #cssgrid #containerqueries #css #css2025 #cssfeatures #softwaredevelopment #TechConference #softwareengineering #networkingevent #lincolnnebraska @dangitalex.wtf
May 15, 2025 at 5:17 PM
frontenddogma.com
Container Query for “Is There Enough Space Outside This Element?”, by @chriscoyier@front-end.social (@frontendmasters.com):

https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/

#css #containerqueries
Container Query for “Is There Enough Space Outside This Element?”
frontendmasters.com
May 14, 2025 at 7:30 PM
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 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
frontenddogma.com
Using Container Query Units Relative to an Outer Container, by @anatudor@mastodon.social (@frontendmasters.com):

https://frontendmasters.com/blog/using-container-query-units-relative-to-an-outer-container/

#css #containerqueries #units
Using Container Query Units Relative to an Outer Container
frontendmasters.com
May 7, 2025 at 8:30 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
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
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
benteh.no
#css nerds: mayday!

i want to write container queries, but it is extremely tedious to test and verify. there MUST be specific tools for this?

how do you do it?

#frontend #html #containerqueries
January 6, 2025 at 1:12 PM
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
pablolarah.bsky.social
🪲 Solved By Modern CSS: Feature Image
by @shadeed9.bsky.social @ishadeed.com
Using container queries and CSS :has() to build a feature image.

#css #ContainerQueries #has #FeatureImage #webdev

ishadeed.com/article/mode...
Small green text on top: Solved By Modern CSS. Big red text on center: Feature Image. Background image: centered pink rectangle with insects in duotone pink white
December 13, 2024 at 5:18 AM
pablolarah.bsky.social
🧃 Opting in to CSS container queries for a existing design system
by Georgie Cooke
@heygeorgie@aus.social

#ContainerQueries #css #webdev

hey.georgie.nu/container-qu...
Green text on pink background with a chalice on the side: Opting in to CSS container queries for a existing design system
November 12, 2024 at 11:45 PM
pablolarah.bsky.social
📦 A Friendly Introduction to Container Queries
by Josh Comeau @joshwcomeau.com

#ContainerQueries #css #webdev

www.joshwcomeau.com/css/containe...
White text on green white duotone illustration of man ina bottle from Magic, subtitled Stage Illusions and Scientific Diversions, including Trick Photography, compiled and edited by Albert A. Hopkins: A Friendly Introduction to Container Queries
November 4, 2024 at 6:37 PM
pablolarah.bsky.social
🔴⭕️CSS Container Queries
by Thoriq Firdaus at Hongkiat
#css #webdev #ContainerQueries
www.hongkiat.com/blog/css-con...
Red text on pink background with black outline: CSS Container Queries
August 7, 2024 at 7:36 PM
pablolarah.bsky.social
🟣 What if you used Container Units for… everything?
by Chris Coyier
@chriscoyier at @FrontendMasters
#css #webdev #ContainerQueries
frontendmasters.com/blog/what-if...
White text on violet background: What if you used Container Units for… everything?
August 7, 2024 at 7:27 PM
pablolarah.bsky.social
🔵🟡🔴 How to use container queries now
by Phil Walton
@philwalton at @ChromiumDev
#ContainerQueries #css #webdev
web.dev/blog/how-to-...
Blue text on light grey background with circle and two rectangles in yellow, one square in magenta and one rectangle in light blue: How to use container queries now
July 4, 2024 at 12:14 AM
pablolarah.bsky.social
🔴🔵 "Smart" design patterns with container queries
by Kevin Powell @KevinJPowell
#webdev #css #ContainerQueries
www.youtube.com/watch?v=DHj7...
Title: SMARTER LAYOUTS WITH @container Code in different colors on dark violet background: .card { @container grid-auto-fit (inline-size > calc (30ch 2 + 1rem)) { grid-column: span 2; display: grid; grid-template-columns: subgrid; padding: 0;
July 1, 2024 at 3:09 PM
schizanon.mastodon.social.ap.brid.gy
> take container queries, for example. They were the number one feature requested by front-end devs for a looong time. So why don’t we use them more, now that they’re finally here?

https://mxb.dev/blog/old-dogs-new-css-tricks/

#css #webDev #containerQueries
May 29, 2024 at 6:53 PM