Frontend Dogma2d ago

The Great CSS Expansion, by @pavellaptev.bsky.social (@gitbutler.com):

https://blog.gitbutler.com/the-great-css-expansion

#css #anchorpositioning #popovers #modals #animations #transitions #forms

The Great CSS Expansion

CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.

Butler's Log
Frontend DogmaMar 28

Two Circles, One Arrow, and Anchor Positioning, by @css (@frontendmasters.com):

https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/

#css #anchorpositioning #math

Two Circles, One Arrow, and Anchor Positioning – Frontend Masters Blog

Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn't seem like it would be possible in CSS alone... but...

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
Frontend DogmaMar 17

The Big Gotcha of Anchor Positioning, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/the-big-gotcha-of-anchor-positioning/

#css #anchorpositioning

The Big Gotcha of Anchor Positioning – Frontend Masters Blog

As it stands, you have to think about the layout engine and whether an element is

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 DogmaMar 5

Anchored Menus and a Lesson in Scoping, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/anchored-menus-and-a-lesson-in-scoping/

#css #anchorpositioning #scope #lessons

Anchored Menus and a Lesson in Scoping – Frontend Masters Blog

Turns out `anchor-scope` is pretty darn useful for button/menu setups that will appear multiple times on the same page.

InautiloFeb 24

#Development #Pitfalls
CSS Anchor Positioning issues? · Edge cases where it doesn’t work https://ilo.im/16arjg

_____
#ModernCSS #AnchorPositioning #Browsers #WebDev #Frontend #HTML #CSS

Why is Anchor Positioning not working?

Learn the edge cases that prevent anchor positioning from working correctly

Frontend DogmaFeb 12

Drawing Connections With CSS Anchor Positioning, by (not on Mastodon or Bluesky):

https://rolandfranke.nl/frontend-stories/drawing-connections-with-css-anchor-positioning/

#css #anchorpositioning

Drawing Connections with CSS Anchor Positioning - Roland Franke

A practical exploration of CSS Anchor Positioning and the anchor() function to visually connect related elements without extra markup.

Roland Franke - Frontend Developer
westbrookFeb 11

#askingForAFriend

Is it real life that an `anchor-name` element HAS to be before the element consuming it via `position-anchor` in the DOM!?!

🤯

#CSS #CSSWG #webDev #anchorPositioning

westbrookFeb 1

Today I've just used `--anchor-scope` as part of the CSS Anchor Positioning API for the first time...

Five stars, would use again!

Thanks #CSSWG!

#webDev #CSS #AnchorPositioning