anchor()position: absolutepopover elementsTry the machine:
Basic · Author Cards · Animated Popover
The latest Mini Web Machine on Chrome Developers
Tiny bits of code that power great UX.
little teaser of some of the demo's ????
Adam Argyle
The Over-Easy Machine - UI layering with anchor() - no more complex position: absolute - keyword alignment - intrinsically sized based on content - pairs radically with popover elements Watch www.youtube.com/watch?v=ASb9... ⤷ nerdy.dev/the-over-eas...Adam Argyle
@argyleink
What does the follow button do? Open Mastodon?Jak2k
@jak2k nothin, just an example ????
@argyleink Adam, is there a way for the popover to shift left/right if it extends outside the viewport edge? I see how to flip it when vertical scrolling, but what if the viewport narrows and the inline edges of the popover now touch the sides?
Darin Senneff
@darin that's coming in the v2 of anchor() spec, called "sliding" right now, where it will slide to stay in view!
little angles and triangles that can follow the flipping are also coming in v2 as ::tether pseudo elements
@argyleink Ah, very nice! Looking forward to those features. I was playing with custom fallbacks to get that working but didn’t know if that was the correct route.
learn so much more about anchor() from @tabatkins.com and their talk at CSS Day Conf www.youtube.com/watch?v=p18L...Adam Argyle
@argyleink I've wanted a JS-free way to do this *for about 10 years* ????