MENU

Fun & Interesting

CSS Anchor Is The Best New CSS Feature Since Flexbox

Web Dev Simplified 389,025 2 years ago
Video Not Working? Fix It Now

I cannot believe this is a feature coming to HTML/CSS. Anchoring elements used to be only something you could do with hundreds of lines of complex JavaScript code, but now it can be done with a single line of CSS. I am incredibly excited for this feature to be production ready as it has the potential to massively change web development. 📚 Materials/References: Chrome Flags: chrome://flags/#enable-experimental-web-platform-features Anchor Chrome Blog Article: https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning 🌎 Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:26 - Demo 01:20 - Popover API 02:50 - Anchor Basics 07:40 - Advanced Anchor Features 11:45 - Advanced Example #CSSAnchor #WDS #CSS

Comment