Mastodawn

#Development #Techniques
Building dynamic toggletips · A prime example for anchored container queries https://ilo.im/16bc8d

_____
#ModernCSS #AnchorPositioning #ContainerQueries #Toggletips #Popover #ProgressiveEnhancement #WebDev #Frontend #CSS

Building dynamic toggletips using anchored container queries

Anchored container queries are only available in Chrome 143 upwards right now, but here’s Daniel Schwarz to show you how to use progressive enhancement to build up to using that new capability in the context of position-aware toggle tips.

Piccalilli

Frontend Dogma Feb 19

Tailwind CSS v4: Container Queries and the Death of Media Queries, by (not on Mastodon or Bluesky):

https://www.sitepoint.com/tailwind-css-v4-container-queries-modern-layouts/

#tailwind #containerqueries #mediaqueries #css

Tailwind CSS v4 Container Queries: Modern Responsive Design

Container queries are finally here, and they change everything about component-based design. Here's how to migrate from media queries without breaking your layout.

Inautilo Jan 19

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

_____
#CSS #ContainerQueries #StyleQueries #ScrollStateQueries #MediaQueries #Accessibility #Adoption #Browsers #WebDev #Frontend

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

Container queries enable truly responsive components. Learn how they work, where they shine, and why they complement rather than replace media queries.

LogRocket Blog

Inautilo Jan 15

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

_____
#Nesting #HTML #Accessibility #Usability #WebDev #Frontend #DOM #CSS #CssGrid #ContainerQueries

Accessible faux-nested interactive controls

A really common user interface pattern is a big clickable area, such as a card. Sometimes you need controls within that card that are also clickable. There's lots of ways to do it wrong, but fret not, Eric is here to show you how to do it right.

Piccalilli

Ana Tudor 🐯Dec 19

Remake of an old, old @codepen animation with 2025 #CSS https://codepen.io/thebabydino/pen/jOZPZL

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.

#conicGradient #cssGradient #code #coding #frontend #cssGrid #cssLayout #web #dev #webDev #webDevelopment #containerQueries

Frontend Dogma Dec 13

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

https://css-tricks.com/what-else-could-container-queries-query/

#css #containerqueries

What Else Could Container Queries... Query? | CSS-Tricks

How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?

CSS-Tricks

Ana Tudor 🐯Dec 2

I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/

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

#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries

Nicolas Hoizey Nov 2

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

🔗 https://ishadeed.com/article/modern-css-section-layout/

> 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

⚓️ https://nicolas-hoizey.com/links/2025/10/24/solved-by-modern-css-section-layout/