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 → https://goo.gle/3SWrvM5
MDN anchor() → https://goo.gle/3TjacoL
Una’s anchor tool → https://goo.gle/3yDYDSd
Popover
Popover API lands in Baseline → https://goo.gle/3Vo2dIs
MDN popover → https://mzl.la/4dMWiUd
Demos
Over-Easy → https://goo.gle/4erTlbJ
Over-Easy Hover Popover → https://goo.gle/4e9AuSl
Over-Easy Toggle Tip → https://goo.gle/3Xaqd1w
Caniuse
anchor() → https://goo.gle/3Z9rsjW
position-visibility → https://goo.gle/3ZaBelX
position-try-order → https://goo.gle/3z4McyM
position-try-fallbacks → https://goo.gle/3AYl1Gm
Watch more Mini Web Machines → https://goo.gle/MiniWebMachines
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#ChromeForDevelopers #Chrome
Speaker: Adam Argyle