CSS Anchor Is The Best New CSS Feature Since Flexbox
Vložit
- čas přidán 1. 05. 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
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 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
This feature is amazing. Can't wait to use it in production.
This is AMAZING! Really hoping this is stable soon because I'll use it absolutely everywhere.
Thanks for keeping us in loop with the newest features!
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!
These new APIs coming native to browsers is huge
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.
Ah the days of layout tables. I clung to those longer than I care to admit 🤦♂️
Thanks for all of the great content that you make, keep up the great work!
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").
Great Video! Thanks for keeping us up to date, Kyle! 😉🔥
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
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 !!!
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)
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.
kyle thank you very much. your videos are so clear and easy to follow. rock on!
So excited! Its like with details and summary but the position could be anywhere
what's the difference between anchor and position: relative/absolute? Would be nice to elaborate on that!
Super good video. Learned something new today. Nice to see genuinely useful info rather than another React/Next/Typescript video.
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.
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.
Actually, for some implementations we could just use `@position-fallback` along with `transform` and some other positioning.
Very informative ❤ Thank you so much 😍
Thank you for the advice, Kiss Splat!
Amazing! thanks for showing it!
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.
Awesome man, Thanks a lot for this information😍🥰
Wow. This feature is amazing 👏🏻 thanks for sharing with us 👍🏻
Super cool stuff, love where the web is going!
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
_One major_ benefit to popover: Accessibility! Semantic markup is perfect for overall a11y and screen readers.
Thanks for the tutorial!
Very cool, glad to see it! Thanks fro sharing!
I need this in my project and I am doing so much work. wish this was more supported
incredible new features, so excited when they will be available across major browsers sooner
This is amazing. Thank you very much.
Thanks so much.. All of these are new to me ❤🎉
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!
Wicked loving this feature and great tutorial 🎉
Can't wait for this to be more widespread
Very cool. Thanks for this!
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!
With features like this,tools like htmx and rust, I'll never have to write JavaScript again
I was thinking the same thing
This is the most exciting news when it comes to web development for a long time.
waaaw i cant think of how much u can be creative with it
Keep up the good work, Kyle!
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 :)
btw you can easily close browser card by clicking mouse wheel on it instead X sign ;)
Thanks for sharing this!
Thanks Kyle as always! 👍
What if we want to show it on hover ?
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!
Really great, appreciate it 👋🏾
This seems very, very useful
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.
This is incredible!
I didn't know before Chrizs Pradt is doing such great content!!
It's awesome! just a quick question: How's the a11y handled for this thing?
Great tip!
Awesome video. Thank you
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.
Looks like csssimplified coming soon next year
thx for u share!
adding rewatch reminder in 1 year
AwesomeSauce!!!! Luv it! Thank you!
OMG is amazing, recently i was a develop a similar contextual
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!
with the popover attribute and anchor function you had my curiosity, with the hand icons following along the input fields and graph bars you had my interest
That's good. Infinite horizontal and vertical scrolls would be nice to add too. And "virtual" scroll with elements of different height also.
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?
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?
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
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
Great video, maybe should have started with the with the fact that it’s not supported quite yet but cool to know about anyway
@WebDevSimplified, great job! Can you give us a link to code examples?
This is amazing! Really! So long, long javascript code to position stuff!
Could this be used as a modal replacement in a React project?
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
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
analysis event typeparams component does change target
That's quite a revolution, like :has() or grid.
It's coming this May!!
gmapdev: popover and Anchor Features are awesome.
A video without React? finally I can watch and enjoy :)
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.
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?
Just love the tutorials ❣
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
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 👍😁
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 😊
im just curious but lets just say we had an Tag. and i wanted to move it to a specific area. what is better to use? Translate, positions, or margin? iv only just seen translate now on this video and looked it up. and seems the best way to just move an element. and with translate when you move the element from its position. does 10px 20px move its current position from where it first was?
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.
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!
Best web dev channel
Wonderful, thank you! Now the ususal wait for wide browser support for the new features :(
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.
I already have a few ideas for how I would use these features. Can't wait for them to go mainstream.
Me too,
back once typescripts array related src entity allow template terminal found typescripts own available tab