Black text on grey background: Building dynamic toggletips using anchored container queries

🟡⚫ Building dynamic toggletips using anchored container queries
by Daniel Schwarz
@dxnny.fun
at Piccalilli @piccalil.li

#toggletips #ContainerQueries #webdev

piccalil.li/blog/buildin...

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.

Building Dynamic Toggletips Using Anchored Container Queries, by @dxnny.fun (@piccalil.li):

piccalil.li/blog/building-dynamic-to...

#css #anchorpositioning #containerqueries #toggles #tooltips

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...

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

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

Tailwind CSS v4: Container Queries and the Death of Media Queries

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

www.sitepoint.com/tailwind-css-v4-containe...

#tailwind #containerqueries #mediaqueries #css

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.

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

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

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,...

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

_____
#Nesting #HTML #Accessibility #Usability #WebDev #Frontend #DOM #CSS #CssGrid #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?

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

css-tricks.com/what-else-could-containe...

#css #containerqueries

Solved By Modern CSS: Section Layout Building a typical section design with modern CSS.

#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

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...

#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

Original post on mastodon.social

css-tricks.com/setting-line-length-in-c...

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 […]

Dynamic media/container queries using if() Use modern CSS to express media queries and container queries differently

Dynamic Media/Container Queries Using “if()”, by @css@front-end.social:

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

#css #conditionals #mediaqueries #containerqueries

Unconditional Love for Conditional CSS - Geoff Graham (Re-published from the Smashing Magazine newsletter.)

Unconditional Love for Conditional CSS, by @geoff@front-end.social:

geoffgraham.me/unconditional-love-for-c...

#css #functions #conditionals #mixins #containerqueries

css code using where, not, wildcard, child and containing selectors with container query index inside of clamp.

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

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

Container Query for “Is There Enough Space Outside This Element?”

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

frontendmasters.com/blog/container-query-for...

#css #containerqueries

#css #containerqueries

Using Container Query Units Relative to an Outer Container

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

frontendmasters.com/blog/using-container-que...

#css #containerqueries #units

#css #containerqueries #rwd

#containerqueries #css

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)

🟠🟣 Container Queries Unleashed
by @joshwcomeau.com

#css #ContainerQueries #webdev

www.joshwcomeau.com/css/containe...

#css #scroll #containerqueries

#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

#css #scroll #containerqueries

Container queries #css #containerqueries

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

🪲 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...

Green text on pink background with a chalice on the side: Opting in to CSS container queries for a existing design system

🧃 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...

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

📦 A Friendly Introduction to Container Queries
by Josh Comeau @joshwcomeau.com

#ContainerQueries #css #webdev

www.joshwcomeau.com/css/containe...

Red text on pink background with black outline: CSS Container Queries

🔴⭕️CSS Container Queries
by Thoriq Firdaus at Hongkiat
#css #webdev #ContainerQueries
www.hongkiat.com/blog/css-con...

White text on violet background: What if you used Container Units for… everything?

🟣 What if you used Container Units for… everything?
by Chris Coyier
@chriscoyier at @FrontendMasters
#css #webdev #ContainerQueries
frontendmasters.com/blog/what-if...

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

🔵🟡🔴 How to use container queries now
by Phil Walton
@philwalton at @ChromiumDev
#ContainerQueries #css #webdev
web.dev/blog/how-to-...