CSS Anchor Is The Best New CSS Feature Since Flexbox
HTML-код
- Опубликовано: 4 июн 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 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 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
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.
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 feature is amazing. Can't wait to use it in production.
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 !!!
These new APIs coming native to browsers is huge
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.
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)
So excited! Its like with details and summary but the position could be anywhere
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'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.
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
Awesome man, Thanks a lot for this information😍🥰
Amazing! thanks for showing it!
Very informative ❤ Thank you so much 😍
Wow. This feature is amazing 👏🏻 thanks for sharing with us 👍🏻
I just put thumbs up to your videos before I even watch them🔥always have been and will always be the best teacher
_One major_ benefit to popover: Accessibility! Semantic markup is perfect for overall a11y and screen readers.
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, glad to see it! Thanks fro sharing!
Wicked loving this feature and great tutorial 🎉
Actually, for some implementations we could just use `@position-fallback` along with `transform` and some other positioning.
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!
incredible new features, so excited when they will be available across major browsers sooner
Super cool stuff, love where the web is going!
This is amazing. Thank you very much.
Thanks so much.. All of these are new to me ❤🎉
Thanks for the tutorial!
Keep up the good work, Kyle!
Very cool. Thanks for this!
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.
Thanks for sharing this!
Thank you for the advice, Kiss Splat!
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 & 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.
Thanks Kyle as always! 👍
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!
That's good. Infinite horizontal and vertical scrolls would be nice to add too. And "virtual" scroll with elements of different height also.
I need this in my project and I am doing so much work. wish this was more supported
AwesomeSauce!!!! Luv it! Thank you!
Awesome video. Thank you
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 :)
A video without React? finally I can watch and enjoy :)
I didn't know before Chrizs Pradt is doing such great content!!
waaaw i cant think of how much u can be creative with it
what's the difference between anchor and position: relative/absolute? Would be nice to elaborate on that!
It's awesome! just a quick question: How's the a11y handled for this thing?
Great video, maybe should have started with the with the fact that it’s not supported quite yet but cool to know about anyway
btw you can easily close browser card by clicking mouse wheel on it instead X sign ;)
That's quite a revolution, like :has() or grid.
Really great, appreciate it 👋🏾
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?
Just love the tutorials ❣
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
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)
Great tip!
This is the most exciting news when it comes to web development for a long time.
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!
This is incredible!
It's coming this May!!
This is amazing! Really! So long, long javascript code to position stuff!
OMG is amazing, recently i was a develop a similar contextual
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 👍😁
This seems very, very useful
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!
thx for u share!
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
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?
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.
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 😊
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.
Best web dev channel
Wonderful, thank you! Now the ususal wait for wide browser support for the new features :(
I used to get excited over these things when I had just started learning web development. I'm still a noob. But I think that most people are just going to use their favority UI libraries in their work or projects regardless of what latest features may come.
ruclips.net/user/shortsNOYmNsgcKhw?si=T-8MQnprAsVunmRM
in 2009 I developed in AS3 a declarative (xml) ui engine and it had what I call anchor (relative position between elements) and collisions which handle the screen limits and the collisions between elements and this system will switch to an alternative position and potentially re-evaluate another collision detection, it was perfect to build menu bars, context menu or satellite elements that are relative to responsive elements. The anchor system supported values (left, center...) for the anchor element and the current element independently and supported numerical values (0 is left, 1 is right, any float value was supported, very nice to put something at 50% for instance
So..?
it means that they take their sweet time to come up with needed solutions
@@jingle1161
@@jingle1161this is youtube, not stack overflow, if that’s what you mean.
I coded in AS3 too) But I coded in imperative style.
Am struggling on getting job as a frontend developer, any cues to land one
gmapdev: popover and Anchor Features are awesome.
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.)
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
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
Can't wait for this to be more widespread
What if we want to show it on hover ?
You the best, comm for the algoritm, i need this later!
Is there link for the final advanced example on codepen or somewhere?
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?
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
@WebDevSimplified, great job! Can you give us a link to code examples?
Looks like csssimplified coming soon next year
That's pretty cool.