CSS Popover + Anchor Positioning is Magical

From the creator

If you’ve ever needed the positioning of an element to be connected (or anchored) to the position of another element, then you’ll be very excited about anchor positioning in CSS! It is new (as of the time of recording), but thankfully, we have a really good Polyfill, so we don’t have to worry about browser support! 🔗 Links ✅ Code from this video: https://codepen.io/kevinpowell/pen/poMaLjR??editors=1100 (slightly different, and no polyfill being used here) ✅ Chrome for Developers blog article on anchor positioning: https://developer.chrome.com/blog/anchor-positioning-api ✅ MDN on Anchor Positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning ✅ Popover Polyfill: https://github.com/oddbird/popover-polyfill ✅ Anchor positioning polyfill: https://github.com/oddbird/css-anchor-positioning ✅ Browser support for popover: https://caniuse.com/mdn-api_htmlelement_popover ✅ Browser support for anchor positioning: https://caniuse.com/css-anchor-positioning ✅ I’ve got courses! https://kevinpowell.co/courses ⌚ Timestamps 00:00 - Introduction 00:33 - Turning our element into a popover 02:05 - Only change the display value when the popover is opened 03:25 - A few user agent styles you’ll probably want to overwrite 04:40 - Creating an anchor, and connecting an element to it 06:20 - Using the new anchor() function to position the element where you want 08:20 - Polyfills 10:15 - Change the positioning of the element when it runs out of room with @position-try 13:50

Published 2024-11-20 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.