RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
My google avatar.
devrel@google
notecsshtmlshows

Ep #5
The Over-Easy Machine


Try the machine:
Basic · Author Cards · Animated Popover


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

The Over-Easy, Mini Web Machine

9 mentions #

21likes
9reposts
  • ????️ Jim Schofield ????
  • Tiffany
  • Tony Ward
  • Patrick Fulton
  • Leviano qualquer ???? desaplaudido por 11min no Festival de Veneza
  • Apple Annie :prami:
  • Toby Evans
  • BoteComm
  • Bramus

Join the conversation on

little teaser of some of the demo's ????

Adam ArgyleAdam 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 ArgyleAdam Argyle

@argyleink
What does the follow button do? Open Mastodon?

Jak2kJak2k

@jak2k nothin, just an example ????

Adam ArgyleAdam 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 SenneffDarin 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 ArgyleAdam 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 SenneffDarin Senneff
learn so much more about anchor() from @tabatkins.com and their talk at CSS Day Conf www.youtube.com/watch?v=p18L...
Adam ArgyleAdam Argyle

@argyleink I've wanted a JS-free way to do this *for about 10 years* ????

Max BöckMax Böck