Lmst
Login

#ContainerQueries

Inautiloinautilo
2026-01-19


Container queries in 2026 · “Powerful, but not a silver bullet.” ilo.im/169fht

_____

Inautiloinautilo
2026-01-15


Accessible faux-nested interactive controls · How to solve a tricky accessibility problem ilo.im/169v7j

_____

Ana Tudor 🐯anatudor
2025-12-19

Remake of an old, old @codepen animation with 2025 codepen.io/thebabydino/pen/jOZ

Now using `conic-gradient()` + `mask` instead of an SVG segments ring image. CSS `grid` for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more, check it out! 🐱

Original code preserved in Pen description for web history.

Screenshot. Sows a 5×5 grid of rainbow segments rings.
Frontend Dogmafrontenddogma@mas.to
2025-12-13

What Else Could Container Queries… Query?, by @dxnny.fun (@csstricks):

css-tricks.com/what-else-could

#css #containerqueries

Ana Tudor 🐯anatudor
2025-12-02

I have a new article out on Frontend Masters: Non-Square Image Blur Extensions frontendmasters.com/blog/non-s

It details the how behind creating the base effect with a single `img` element and only 4 declarations, then... well, check the article, I promise you'll learn something new!

Screenshot collage, showing the desired result in two stages. First, on the left we have the base case with the non-square images being padded with a blurred version of themselves up to a square along the axis of their shorter side. Second, on the right, we have an extra touch, the non-square images fade smoothly into their blurred copy on the sides.
Nicolas Hoizeynhoizey@mamot.fr
2025-11-02

“Solved By Modern CSS: Section Layout” by @shadeed9

🔗 ishadeed.com/article/modern-cs

> In this article, I took a typical section design and made it more dynamic with container queries, has, clamp, and grid. It’s an example of the potential of modern CSS, and this was just one section.

Yet another awesome article from Ahmad showing actual useful usage of modern CSS. Let's hope people designing in Figma see this and…

#CSS #containerQueries

⚓️ nicolas-hoizey.com/links/2025/

Screenshot of Solved By Modern CSS: Section Layout
Ana Tudor 🐯anatudor
2025-10-31

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
frontendmasters.com/blog/super - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

Frontend Dogmafrontenddogma@mas.to
2025-10-27

CSS Layout: Flexbox, Grid, Media Queries, and Container Queries, by @rauschma:

2ality.com/2025/10/css-layout.

#css #layout #flexbox #grids #mediaqueries #containerqueries #introductions

Nicolas Hoizeynhoizey@mamot.fr
2025-10-24

“Solved By Modern CSS: Section Layout” by @shadeed9

🔗 ishadeed.com/article/modern-cs

> In this article, I took a typical section design and made it more dynamic with container queries, has, clamp, and grid. It’s an example of the potential of modern CSS, and this was just one section.

Yet another awesome article from Ahmad showing actual useful usage of modern CSS. Let's hope people designing in Figma see this and…

#CSS #containerQueries

⚓️ nicolas-hoizey.com/links/2025/

Screenshot of Solved By Modern CSS: Section Layout
Inautiloinautilo
2025-10-24


Section layouts · How modern CSS can make them more dynamic ilo.im/167vol

_____

Ana Tudor 🐯anatudor
2025-10-09

BTW, the CSS is heavily commented. And I've changed the images to something a bit more fitting for this time of year.

codepen.io/thebabydino/details

And now you can tell what gave me the idea for yesterday's challenge mastodon.social/@anatudor/1153

Screenshot from my CodePen demo showing the heavily commented CSS and the visual result using Halloween-related images.
Ana Tudor 🐯anatudor
2025-10-08

Because this got asked on reddit reddit.com/r/css/comments/1o06

Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.

On @codepen codepen.io/thebabydino/pen/Wbr

Enjoy!

Inautiloinautilo
2025-09-25


Custom properties in media queries? · A workaround powered by modern CSS ilo.im/1675st

_____

Ange Chierchianighcrawl
2025-09-08

css-tricks.com/setting-line-le

Je vois trop de sites qui laissent les paragraphes s’étirer façon spaghetti. Fix: max-width: 65ch, puis clamp() pour une taille qui bouge juste ce qu’il faut. 
Bonus nerd : unités de conteneur pour un rendu propre, composant par composant. 
chierchia.fr/2025/09/setting-l

Frontend Dogmafrontenddogma@mas.to
2025-08-25

Dynamic Media/Container Queries Using “if()”, by @css:

css-tip.com/dynamic-queries/

#css #conditionals #mediaqueries #containerqueries

Frontend Dogmafrontenddogma@mas.to
2025-08-16

Unconditional Love for Conditional CSS, by @geoff:

geoffgraham.me/unconditional-l

#css #functions #conditionals #mixins #containerqueries #transitions

Nebraska.CodeNebraskaCode
2025-05-15

Alex Riviere presents 'Fresh Hot CSS Features!' July 25th at Nebraska.Code().

nebraskacode.amegala.com/

Frontend Dogmafrontenddogma@mas.to
2025-05-14

Container Query for “Is There Enough Space Outside This Element?”, by @chriscoyier (@frontendmasters.com):

frontendmasters.com/blog/conta

#css #containerqueries

Frontend Dogmafrontenddogma@mas.to
2025-05-07

Using Container Query Units Relative to an Outer Container, by @anatudor (@frontendmasters.com):

frontendmasters.com/blog/using

#css #containerqueries #units

Ana Tudor 🐯anatudor
2025-02-22

I haven't used style queries much, but just gave them a spin and got an idea (that I've just tested & works) about how we can have ranges in style queries right now. 🥳

That is, red background if --k <= 20, orange background if 20 < --k <= 40 and so on...

Screenshot of a basic test for ranges n style queries.

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst