CSS Anchor Is The Best New CSS Feature Since Flexbox

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

🌎 Find Me Here:

⏱️ 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

[ozzyogkush]

We have like 3 separate implementations of context menus, popovers, etc at my current workplace. Being able to replace some of that complexity with this would be a big win and a nice tech debt reduction!

[DamirSecki]

I share your excitement.... This looks great and cannot believe that this hasn't been done like 5-10 years ago. We all know that menus and popovers are user everywhere... and is really mind boggling that it is taking so long to get native support.... I am so glad we have auto updating browsers now that when new features come out, in most cases, they are available to the user straight away

[jamesmoynihan]

This is a really nice feature, but what makes anchor really useful is when you have more complex positioning and stacking contexts. I particularly found it useful for tooltips within a <dialog> element which is the first element to use the popover API under the hood and lives in the special "top layer" above all other stacking contexts (kinda like "z-index: infinity").

[EricRohlfs]

This is excellent. Glad we finally figured out the three main actions are show, hide, and toggle and found a way to associate with click with zero JavaScript. Best video I've seen all year!

[GeneraluStelaru]

Finally, baby CSS is growing up. Last year I worked on a project where I had to learn QML. Neddless to say, I didn't want to deal with web frontend anymore.

[NoName-]

This feature is amazing. Can't wait to use it in production.

[Nakabozu]

This is AMAZING! Really hoping this is stable soon because I'll use it absolutely everywhere.

[ukaszzbrozek]

Thanks for keeping us in loop with the newest features!

[jitesh]

This is really a good feature to minimize the js code where in past we have to check, "related target" and then make it display flex or none. Here we just have to assign an id. Amazing !!!

[keitsee]

Thank you so much for this. Words cannot explain how much this is so good. Really, really good. Having to display:flex the element then z-index it to make sure its on top of all elements then making sure the document click outside of the element closes the element all in js. Popover just solves everything.

[EvertJunior]

This is long overdue. It's insane we have so many UI libraries with different implementations of select menus and popovers just so we can build a decent UI/UX. This feature along view transitions will enable awesome looking and performant web apps.

[patricknelson]

_One major_ benefit to popover: Accessibility! Semantic markup is perfect for overall a11y and screen readers.

[Fernok]

Omg I am a newbie working on a full stack project and this is exactly what I wanted to create in my frontend. I was earlier using the dailog element as remediee to create drop down option

[dennisb_official]

Always a pleasure getting up to date with the latest web tech from you mate. Your way of teaching really resonates well with me.

Thank you for being one of the best YT channels out there.

[monarchgamr]

These new APIs coming native to browsers is huge

[mr.w]

Wow, this is awesome.

I stepped away from UI dev a couple years ago due to some intense frustration (partly never ending updates to libraries, languages, etc… mostly i liked design better 😅). Glad to see things are getting easier though!

[philipphock]

what's the difference between anchor and position: relative/absolute? Would be nice to elaborate on that!

[ararthepro]

Waited for this feature a lot of time, my hope was it will be like "binding" properties values so you could copy all properties and values from other elements (like height, width, etc) not only inset, but that's a start (though I assume anchora will be stable in at least 3 years, if it will)

[lukas.webdev]

Great Video! Thanks for keeping us up to date, Kyle! 😉🔥

[netssrmrz]

Super good video. Learned something new today. Nice to see genuinely useful info rather than another React/Next/Typescript video.