The Over Easy Mini Web Machine · September 4, 2024

September 4, 2024

devrel@google3 months ago

notecsshtmlshows

Ep #5
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

Try the machine:
Basic · Author Cards · Animated Popover

The latest Mini Web Machine on Chrome Developers
Tiny bits of code that power great UX.

Join the conversation on

21 likes

9 reposts

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

Adam Argyle

@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

Adam Argyle

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

Darin Senneff

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* ????

Max Böck