Duration: 0:00

7,041 views

483

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