CSS Anchor Is The Best New CSS Feature Since Flexbox
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- 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
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!
You’ll end up having 4 separate implementations
@@evergreen-😂
I'm also extremely happy with this feature. So many different implementations...
But wait until browsers support
@@evergreen- it's the truth tho...
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
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.
@@IIARROWS Having worked with various Sheriff's offices I can confirm that they still use old IE.
@@IIARROWS Yupp true, even the ones using relatively new device won't keep auto update on
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!
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").
Thanks for keeping us in loop with the newest features!
This is AMAZING! Really hoping this is stable soon because I'll use it absolutely everywhere.
This feature is amazing. Can't wait to use it in production.
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.
Great Video! Thanks for keeping us up to date, Kyle! 😉🔥
These new APIs coming native to browsers is huge
Thanks for all of the great content that you make, keep up the great work!
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.
yes, this. I want to add CSS transitions.
And no one works well xDDDD
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.
You used QML with Qt or another framework?
@@philippedcote I'm quite sure qml only works with qt
@@pinkorcyanbutlong5651We had Qt licences but QML works on top of C++. Qt is essentially just an IDE.
Nothing beats native GUI toolkits unless you are doing design shit, but for apps its the best
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 !!!
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
Super good video. Learned something new today. Nice to see genuinely useful info rather than another React/Next/Typescript video.
kyle thank you very much. your videos are so clear and easy to follow. rock on!
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)
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.
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.
Making websites wasn't really a pain, but getting things exactly as you wanted, that was the really anoying part
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.
So excited! Its like with details and summary but the position could be anywhere
Amazing! thanks for showing it!
Very cool, glad to see it! Thanks fro sharing!
Thank you for the advice, Kiss Splat!
Wow. This feature is amazing 👏🏻 thanks for sharing with us 👍🏻
Super cool stuff, love where the web is going!
Awesome man, Thanks a lot for this information😍🥰
incredible new features, so excited when they will be available across major browsers sooner
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.
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
Wicked loving this feature and great tutorial 🎉
Very informative ❤ Thank you so much 😍
_One major_ benefit to popover: Accessibility! Semantic markup is perfect for overall a11y and screen readers.
Keep up the good work, Kyle!
Thanks for the tutorial!
A video without React? finally I can watch and enjoy :)
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!
Very cool. Thanks for this!
Thanks for sharing this!
Thanks so much.. All of these are new to me ❤🎉
This is amazing. Thank you very much.
I just put thumbs up to your videos before I even watch them🔥always have been and will always be the best teacher
Thanks Kyle as always! 👍
Awesome video. Thank you
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!
Actually, for some implementations we could just use `@position-fallback` along with `transform` and some other positioning.
Great tip!
That's quite a revolution, like :has() or grid.
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!
Just love the tutorials ❣
That's good. Infinite horizontal and vertical scrolls would be nice to add too. And "virtual" scroll with elements of different height also.
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.
AwesomeSauce!!!! Luv it! Thank you!
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.
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.
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.
The a11y aspect will most certainly be handled by the UA, good stuff!
It's coming this May!!
I didn't know before Chrizs Pradt is doing such great content!!
Really great, appreciate it 👋🏾
This is incredible!
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.
what's the difference between anchor and position: relative/absolute? Would be nice to elaborate on that!
This seems very, very useful
waaaw i cant think of how much u can be creative with it
What if we want to show it on hover ?
thx for u share!
Great video, maybe should have started with the with the fact that it’s not supported quite yet but cool to know about anyway
This is amazing! Really! So long, long javascript code to position stuff!
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
This is the most exciting news when it comes to web development for a long time.
I need this in my project and I am doing so much work. wish this was more supported
It's awesome! just a quick question: How's the a11y handled for this thing?
Amazing!!!
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 :)
With features like this,tools like htmx and rust, I'll never have to write JavaScript again
I was thinking the same thing
My friend and me together 😁 bought your react course
Complete 4 parts of beginner one
Totally worth my money.
Awesome, keep it up! 😉
I am really glad you are enjoying the course!
Nice features but not supported everywhere
Now all of my webpages with simple , , and tags have never gone wrong with browser updates, OS upgrades or using in different platforms 👍😁
Omg
Watched this video just now, five months after its release, and both of these features have more than 70 percent of support!
Its not working on my vscode😂
@@twanadler9 didn’t even try yet - I wait for 90% of support
btw you can easily close browser card by clicking mouse wheel on it instead X sign ;)
gmapdev: popover and Anchor Features are awesome.
Can't wait for this to be more widespread
Best web dev channel
Will be cool once we can use that! (Firefox is missing popover and Safari is missing anchor. And caniuse doesn't even know position-fallback.)
Looks like csssimplified coming soon next year
I hope the idea of naming anchors can be nested. Otherwise I have concerns about name conflicts. Though I suppose you could set the anchor ID via an inline style attribute to set a CSS custom property... It's kinda ugly but it would work. Hopefully they consider that and make it more elegant.
I think the next step would be appending guids to avoid that naming collision.
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.
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?
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
OMG is amazing, recently i was a develop a similar contextual
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
Cool, but: popover-content was a crazy thing, back in 2003, finally we got rid of it, and now it turns back, over css! Ever asked yourself why target=“_blank” only opens a new tab? It was a pain. With JavaScript and external scripts, this will be a horror.
hi Kyle! thanks for this tutorial :) always a pleasure to follow your videos! I've a problem with anchor tag : when i put this attr on my popover element i can't open the modal on click.. I use Chrome (latest version)
Sweet!
Time to leave tailwind and learn css again
Wonderful, thank you! Now the ususal wait for wide browser support for the new features :(
Nice!
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.
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.
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.
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.
I can volunteer to work with you 😊
Thanks))
You the best, comm for the algoritm, i need this later!
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