Over-Easy Anchor + Popover Mini Web Machine

Опубликовано 4 сентября 2024, 16:24

With CSS anchor(), overlaying and connecting UI elements has never been easier. The Over-Easy Machine shows how a few lines of CSS can make position relative and top/left a thing of the past. Combine the Over-Easy machine with Popovers for a truly remarkable and accessible overlay experience. By the end, you'll know the basics of anchor() and how to show, hide, and transition Popovers.

Chapters:
0:00 - Introduction
0:32 - anchor() overview
1:11 - Over-Easy Machine
2:12 - Over-Easy Hover Popover
6:18 - Over-Easy Toggle Tip Popover
8:55 - Future of Popover
9:47 - Outro

Resources:
Anchor
Introducing the CSS anchor positioning API → goo.gle/3SWrvM5
MDN anchor() → goo.gle/3TjacoL
Una's anchor tool → goo.gle/3yDYDSd

Popover
Popover API lands in Baseline → goo.gle/3Vo2dIs
MDN popover → mzl.la/4dMWiUd

Demos
Over-Easy → goo.gle/4erTlbJ
Over-Easy Hover Popover → goo.gle/4e9AuSl
Over-Easy Toggle Tip → goo.gle/3Xaqd1w

Caniuse
anchor() → goo.gle/3Z9rsjW
position-visibility → goo.gle/3ZaBelX
position-try-order → goo.gle/3z4McyM
position-try-fallbacks → goo.gle/3AYl1Gm

Watch more Mini Web Machines → goo.gle/MiniWebMachines
Subscribe to Chrome for Developers → goo.gle/ChromeDevs


#ChromeForDevelopers #Chrome


Speaker: Adam Argyle