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
Anchor Chrome Blog Article: developer.chrome.com/blog/tet...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: 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

[@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!

[@evergreen-]

You’ll end up having 4 separate implementations

[@shivanand0297]

​@@evergreen-😂

[@BboyKeny]

I'm also extremely happy with this feature. So many different implementations...

[@ongke3655]

But wait until browsers support

[@ozzyogkush]

​@@evergreen- it's the truth tho...

[@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

[@IIARROWS]

LOL, no... you have to look for at least 2 years old features, 3 to be sure. Depending on your target user you could live with less. Browser don't update constantly as you think, especially on older devices, or if you want your site to be usable from offices.

[@rproctor83]

@@IIARROWS Having worked with various Sheriff's offices I can confirm that they still use old IE.

[@eobardthawne6903]

​@@IIARROWS Yupp true, even the ones using relatively new device won't keep auto update on

[@ukaszzbrozek6470]

Thanks for keeping us in loop with the newest features!

[@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!

[@NoName-1337]

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.

[@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.

[@PeterMumford]

yes, this. I want to add CSS transitions.

[@profesor08]

And no one works well xDDDD

[@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.

[@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.

[@philippedcote]

You used QML with Qt or another framework?

[@pinkorcyanbutlong5651]

@@philippedcote I'm quite sure qml only works with qt

[@GeneraluStelaru]

@@pinkorcyanbutlong5651We had Qt licences but QML works on top of C++. Qt is essentially just an IDE.

[@llothar68]

Nothing beats native GUI toolkits unless you are doing design shit, but for apps its the best

[@foxxo-dev]

Thanks for all of the great content that you make, keep up the great work!

[@jamesmoynihan948]

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 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").

[@lukas.webdev]

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

[@monarchgam3r]

These new APIs coming native to browsers is huge

[@jitesh031]

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 !!!

[@kiravolvo]

kyle thank you very much. your videos are so clear and easy to follow. rock on!

[@Ferno2k]

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

[@bartek4210]

Amazing! thanks for showing it!

[@ararthepro3972]

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)

[@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.

[@philipphock7591]

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

[@damar1967]

So excited! Its like with details and summary but the position could be anywhere

[@netssrmrz]

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

[@MusicElectrified]

Very informative ❤ Thank you so much 😍

[@nicksullivan23]

Wicked loving this feature and great tutorial 🎉

[@GaneshKumarNow]

Wow. This feature is amazing 👏🏻 thanks for sharing with us 👍🏻

[@user-db1ue8om7v]

Super cool stuff, love where the web is going!

[@Nutch.]

This is game changing. I wonder if support will be added to detect which @try fallback is currently active. An example of why this would be useful is for rotating a menu chevron to the correct direction that the menu will appear from when opened.

[@KD-tp6er]

I'm grateful I'm building websites with all these new tools, I've heard horror stories of making websites using tables back in the day.

[@GamerGuyplays]

Making websites wasn't really a pain, but getting things exactly as you wanted, that was the really anoying part

[@stefanlindbohm]

Using tables wasn’t the bad part (it was basically a simplistic grid). The real horror started when we were all moving away from them and every relevant browser implemented CSS layout in different ways, with the dominant browser (IE6) being both hugely incompliant with any documented standards as well as going without updates for almost a decade.

[@luke5100]

Ah the days of layout tables. I clung to those longer than I care to admit 🤦‍♂️

[@tiendatnguyen6239]

This is amazing. Thank you very much.

[@ascodes3461]

Awesome man, Thanks a lot for this information😍🥰

[@juneroyd.quinimon495]

Thanks for the tutorial!

[@LuniFoxo]

Thank you for the advice, Kiss Splat!

[@dasten123]

Interesting. All popover libraries I know have some kind of flaw. I'm excited to see how well this will work with layout-shifts and scrolling.

[@FrameMuse]

Actually, for some implementations we could just use `@position-fallback` along with `transform` and some other positioning.

[@theisoj]

Thanks Kyle as always! 👍

[@aleksandarv.1459]

Keep up the good work, Kyle!

[@patricknelson]

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

[@tinongnjong1305]

Really great, appreciate it 👋🏾

[@BenRogersWPG]

Very cool. Thanks for this!

[@lewsdiod]

Very cool, glad to see it! Thanks fro sharing!

[@ryanschaefer4847]

This is incredible!

[@PsychoDude]

I need this in my project and I am doing so much work. wish this was more supported

[@musicforlife4571]

Thanks for sharing this!

[@thekaasim]

Thanks so much.. All of these are new to me ❤🎉

[@Allformyequine]

AwesomeSauce!!!! Luv it! Thank you!

[@ukyoize]

Can't wait for this to be more widespread

[@gouravchouhan1790]

I was about to make something like this and no way I found your short and from short I found your video this is amazing

[@ghostaccountlmao]

This seems very, very useful

[@soulehshaikh8799]

Just love the tutorials ❣

[@yassine_klilich]

incredible new features, so excited when they will be available across major browsers sooner

[@MKTheDev]

Great tip!

[@YourUncleisGaySimba]

I just spent like 3 hours figuring out how to implement this in react (with some async data) and ended up using the classic css focus to show a child of a certain element. Appreciate the work tho!

[@shayanzamani9907]

It's awesome! just a quick question: How's the a11y handled for this thing?

[@tobiasbrenner7176]

Awesome video. Thank you

[@SandWire]

I done this only using CSS too, but I just used hover. It works the same, but you need to hover not just clicking on the (i). On Android hover works like clicking :)

[@bojack4800]

thx for u share!

[@QwDragon]

Great features! But do I understand right that anchor-name should be unique on the page? So if I have several similar blocks I can't scope ancor iside of a block, can I?

[@akramilyas6030]

waaaw i cant think of how much u can be creative with it

[@Pikachu-oo5ro]

I can see the honesty from your videos man, you never sell us anything! You're dedicated to our learning! I'm glad you made it!

[@adityanayak20]

Looks like csssimplified coming soon next year

[@mr.w7803]

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!

[@ErnaSolbergXXX]

This is the most exciting news when it comes to web development for a long time.

[@Kay_Drechsler]

This is awesome and makes me really happy that it’s nearly finally there. One thought that came up when you were showing the popover menu at the end. Is it still considered to be good markup / accessible markup when the child popovers are not nested inside the parent popover’s list but instead life as siblings right next to it? I wonder how a user of a screenreader could understand this.

[@xXYourShadowDaniXx]

I think you would just aria-hidden toggle based on button click/hover, so by default its hidden, and on button click or hover, it unhides for the reader, then on click/mouseout it aria hides again.

[@robertlinder8464]

The a11y aspect will most certainly be handled by the UA, good stuff!

[@milanm6538]

@WebDevSimplified, great job! Can you give us a link to code examples?

[@johnstalkernet]

Could this be used as a modal replacement in a React project?

[@TesterAnimal1]

Had this for years in my app. Simpler API for the devs to use. And handles more cases. Fallback when scrolling or in anyway dynamically repositioning inside a constraining element (such as the viewport) will reduce the constrained size up to a breakpoint I’d configured too do so before falling back to other orientations. And it can fall back either by flipping sides first, then trying the other two. Or just rotating from the side where constraining failed.

[@user-ki7qu4sc3z]

What if we want to show it on hover ?

[@aro9648]

btw you can easily close browser card by clicking mouse wheel on it instead X sign ;)

[@tyrellnelson]

With features like this,tools like htmx and rust, I'll never have to write JavaScript again

[@Slashx92]

I was thinking the same thing

[@poesiapartida]

This is amazing! Really! So long, long javascript code to position stuff!

[@patrickgray1758]

It's coming this May!!

[@stefanlindbohm]

Awesome & easily understood video with good examples! The popover feature of HTML is news to me and will be a huuuge improvement! Just wanted to mention that anchoring is easily implemented with good old position absolute + relative. Just create a container with position: relative (the anchor) then put the popover inside with position: absolute. Positioning works mostly (exactly) the same as this anchoring CSS proposal, and because all contents of the container are taken out of flow, the container will have no size and can be put anywhere without side effects. In general, I’d be very cautios with using or promoting proposals that aren’t yet in the standards. For one, they might change before becoming a standard, but worse it creates browser dependencies and results in fragmentation of the web much in the same way we had back with Internet Explorer 6. Trust me, we don’t want to have that situation again.

[@Theguy831blah]

Best web dev channel

[@D9ID9I]

That's good. Infinite horizontal and vertical scrolls would be nice to add too. And "virtual" scroll with elements of different height also.

[@niner8275]

That's quite a revolution, like :has() or grid.

[@lilrex2015]

solid vid

[@geraldopcf]

gmapdev: popover and Anchor Features are awesome.

[@Poohbify]

Nice!

[@xdarrenx]

Does it work with a Ref from another library, most frameworks and such used their own reference system for performance/sanity reasons within their own framework, how do we bind 2 elements without hardcoding Id's on the element, and if possible popover as well, hwo can we otherwise track binds in big applications using this among separated components?

[@DavidConnerCodeaholic]

Interesting, but how does it affect application design and also performance? One feature mentioned in a chrome blog was intelligent footnotes. I’m always suspicious of new web features, but the way the page reacts when the window is resized is interesting. I just encountered anchoring in SVG but I don’t think it’s a standard feature. For design, modals are kinda nice in that it forces constraints that reduce the number of states (you wouldn’t have to worry about one popover bumping into another). Also, the containing components still have to delegate data to components in popovers. One issue might be a list of elements with popovers where interactions pass data from a parent/sibling/etc node. In this case, you either have to preinstantiate Dom for the popover while deferring some rendering and data passing. For performance, I guess CSS precalculates the states of the @try positions and, invalidates ones that don’t work and recalculates everything displayed if the containing box moves? (I had to cheat and look at the w3c spec on the box model). This should require user interaction to trigger recall in most cases. As long as popovers can be assumed to be invisible until user interaction, then this work can be deferred.

[@neoqueto]

I think it was possible to recreate the popover thing with a janky checkbox with :checked and :active property selectors but that anchor stuff is pretty sweet

[@marcosantonioreyesmedina2364]

OMG is amazing, recently i was a develop a similar contextual

[@pinkorcyanbutlong5651]

finally, css gets one of the most basic essential features of any ui design tool! being both sarcastic and excited, hope this lands on firefox soon

[@electric_dream_machine]

Has the speed at which browsers keep up with these new features increased in recent years? How long until features like this one be the norm?

[@ChideraIke]

This feature is cool 💯

[@lewisone]

That's pretty cool.

[@toddribnek6660]

Does PostCSS have a polyfill for this to enable future css?

[@Rasecz]

Can you toggle that tooltip via hover instead

[@alexandraweather4156]

Omg Watched this video just now, five months after its release, and both of these features have more than 70 percent of support!

[@twanadler9]

Its not working on my vscode😂

[@alexandraweather4156]

@@twanadler9 didn’t even try yet - I wait for 90% of support

[@sequoiakanies2202]

Great video, maybe should have started with the with the fact that it’s not supported quite yet but cool to know about anyway

[@prashlovessamosa]

My friend and me together 😁 bought your react course Complete 4 parts of beginner one Totally worth my money.

[@lukas.webdev]

Awesome, keep it up! 😉

[@WebDevSimplified]

I am really glad you are enjoying the course!

[@LarsRyeJeppesen]

A video without React? finally I can watch and enjoy :)

[@froreyfire]

How do you not need to refresh the browser page after a change to the index.html?

[@andrewsjose4228]

that's awesome

[@faldinurikhsan5048]

Can you explain how to handle authentication in nextjs13 with seperated backend that using token ?

[@PaweBystrzan]

for now using just target is better than popover, but maybe it'll be nice to have it in the future not only for the popover / tooltip

[@CCD-yp6hh]

Wow, that is really cool. I found your video because I was looking up how to keep my parallax background images in place when I resize my screen. The images are in a grid and all the parallax demo video only have one background image: I have three images. Anyway, your video gave me some ideas to try out and see if I can make my background images on the parallax grid responsive. So, thanks a bunch!! P.S. if you or anyone knows the solution to my parallax issue then please let me know. Thanks again.

[@ioiiooio4080]

Amazing!!!

[@knaz7468]

Hey Kyle. I took some of your classes a while back and enjoyed them. Sadly I didn't "use" my knowledge right away and lost a lot of it, but the basics are still there. Fast forward to now, and I really want to setup a web site with an active server so I can do my own DB admin, javascript, python, etc on the server and then make a slick looking html/css/javascript enabled client side. However, I'm struggling with hosting options. They are seem very confusing and expensive. I searched your video library but didn't see any info on this. Is there a preferred method you have for setting up a server? Do you prefer shared/vps/cloud/etc? Thanks! I'll try your discord as well.

[@reed6514]

I've used shared for years, and have been happy. I work in php, but i imagine most shared servers support python. I use dreamhost & in some ways i like them, others i don't. Godaddy, bluehost, Hostgator i think are all fine options. Of those three I preferred bluehost, but it's been 5+ years.

[@reed6514]

I have used vps before, when i wanted it to be a little faster. My shared host sites on dreamhost have about a 200ms response time on my internet, and vps I've used was like 50ms. The 50ms is nice, but it's not necessary.

[@USPSLaura]

I can volunteer to work with you 😊

[@allandiaz4638]

Beautiful feature, sadly we need to activate "Experimental Web Platform features" and it can't be possible on my current pro project. As soon as possible, I wish used this feature ! Thanks for your video mate :D