Inautilo2d ago

#Development #Approaches
Building a UI without breakpoints · Moving to fluid CSS components for the modern web https://ilo.im/16c7es

_____
#Components #CssGrid #CssFlex #ContainerQueries #MediaQueries #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

Building a UI Without Breakpoints – Frontend Masters Blog

This article covers a layout approach that better fits the modern web: fluid, intrinsic components that adapt by default, and treat conditional rules as local, intentional exceptions.

Frontend DogmaApr 8

Name-Only Containers: The Scoping We Needed, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/

#css #scope #containerqueries

Name-Only Containers: The Scoping We Needed – Frontend Masters Blog

If we give a `container-name` to the root of all our unique components, we can scope styles to them with a simple @container query.

pablolarahApr 7

🔴🟡 Name-Only Containers: The Scoping We Needed
by Chris Coyier
@chriscoyier.net @chriscoyier
at @frontendmasters.com
#container #ContainerQueries #CSS #scope #webdev

https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/

Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and BackendApr 7

Name-Only Containers: The Scoping We Needed

https://fed.brid.gy/r/https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/

pablolarahMar 23

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

#toggletips #ContainerQueries #webdev

https://piccalil.li/blog/building-dynamic-toggletips-using-anchored-container-queries/

Frontend DogmaMar 22

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

https://piccalil.li/blog/building-dynamic-toggletips-using-anchored-container-queries/

#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 context of position-aware toggle tips.

Piccalilli
InautiloMar 13

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

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