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!
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.
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").
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!
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.
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 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.
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
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.
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)
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.
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.
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!
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.
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 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.
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 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.
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.
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 :)
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
anchor cannot come fast enough, holy heck that's powerful, I wonder if this means I could use it to anchor images within the eternally cursed 'column-count' elements
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.
One thing not covered here. What about the zIndex? Does the popover attribute render the element on a separate top-most layer? Tho the feature is awesome. Seems like we'll need to rewrite our ui kit soon. We are still hoping to see separate layers via css for dialogs and popovers. Smth like z-layer: default|dialog|popover Which stack in the order: default, dialog, popover (popover top most) and are zindex independent ie they stack always in this order no matter what Coz atm we dont have such thing and its a pain in the ass really. The dialog element kinda solves this issue, but u cant always use the dialog element for everything, while u want a separate layer. We want to be able to move any element to a separate layer like dialogs/popovers/dropdowns/tooltips etc
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
Yep. This case is pretty much solved already by the solution you mentioned. I guess anchors might appear useful in some other cases… would be cool if you could animate the anchor! So, move a pop up element from one item to another.
You should be able to animate the anchor by just changing the element it is anchored to and having a transition on the position properties. This also does much more than relative and absolute since you can position elements next to each other that are not child/parent. In many cases your parent may have an overflow hidden on it so you could never position something outside of it. Also stacking contexts are messed up when dealing with nested events since the child will be stuck in the parents stacking context
Position relative/absolute is not an equivalent to this. This new API is also position aware as you can see when he resizes the browser. It moves the popover automatically so it doesn't get cut off by the browser viewport. It basically removes the need for JavaScript to create such a tooltip/popover element and that's great. Unfortunately it's still pretty new so browser support is bad, at least for now. But at one point flexbox and grid were also new and without proper browser compatibility, but look at them now. People also said then "why would I use this when I can use 'float'?", but now basically nobody uses floats these days and many newer devs don't even know "float" exists. These things take time, but it's great to at least know about them.
Is there anything known about how accessibility is taken into account for these features? Are the popover/context menu features keyboard navigable, for example? How do screen readers and other tools interact with these new features?
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
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
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)
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!
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.
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.
The popover API already looks way better than current JS libraries like popperJS or floating-VUE. I would LOVE to ditch those libraries from my projects and move to the native implementation. It's 5 months since the video and caniuse puts support at 79%. Still not good enough for real-world usage but getting closer.
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
@@rproctor83 Wow, then glad Sheriffs aren't my target userbase!
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").
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!
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 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.
Thanks for keeping us in loop with the newest features!
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 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 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
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.
These new APIs coming native to browsers is huge
Great Video! Thanks for keeping us up to date, Kyle! 😉🔥
_One major_ benefit to popover: Accessibility! Semantic markup is perfect for overall a11y and screen readers.
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)
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.
Super good video. Learned something new today. Nice to see genuinely useful info rather than another React/Next/Typescript video.
Thanks for all of the great content that you make, keep up the great work!
what's the difference between anchor and position: relative/absolute? Would be nice to elaborate on that!
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.
So excited! Its like with details and summary but the position could be anywhere
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!
incredible new features, so excited when they will be available across major browsers sooner
I just put thumbs up to your videos before I even watch them🔥always have been and will always be the best teacher
kyle thank you very much. your videos are so clear and easy to follow. rock on!
This is so exciting! Another great video!
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.
Wicked loving this feature and great tutorial 🎉
What if we want to show it on hover ?
That's quite a revolution, like :has() or grid.
Thank you for the advice, Kiss Splat!
Actually, for some implementations we could just use `@position-fallback` along with `transform` and some other positioning.
Very cool, glad to see it! Thanks fro sharing!
Super cool stuff, love where the web is going!
That's good. Infinite horizontal and vertical scrolls would be nice to add too. And "virtual" scroll with elements of different height also.
A video without React? finally I can watch and enjoy :)
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!
Awesome man, Thanks a lot for this information😍🥰
It's coming this May!!
Wow. This feature is amazing 👏🏻 thanks for sharing with us 👍🏻
Amazing! thanks for showing it!
Keep up the good work, Kyle!
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 👍😁
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!
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.)
Great video, maybe should have started with the with the fact that it’s not supported quite yet but cool to know about anyway
Thanks for the tutorial!
With features like this,tools like htmx and rust, I'll never have to write JavaScript again
I was thinking the same thing
You can already do it with input:checkbox with apperance hidden amd position absolute
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!
Very informative ❤ Thank you so much 😍
Thanks for sharing this!
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. 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.
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.
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
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.
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 ;)
Summary:
is for stylesheets.
, short for “anchor”, is for links.
is the new element.
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
anchor cannot come fast enough, holy heck that's powerful, I wonder if this means I could use it to anchor images within the eternally cursed 'column-count' elements
Thanks Kyle as always! 👍
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
Thank you once again, Chris Pratt, for your amazing content!
Not even close to similar looking
@@LC12345 I apologize, but I'm a little confused as to what you mean by "similar looking"? That's clearly Chris himself.
Looks nothing like him
Are you blindfolded?
Chris pratt looks like a middle aged man and I don't know what you are smoking.
gmapdev: popover and Anchor Features are awesome.
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 need this in my project and I am doing so much work. wish this was more supported
One thing not covered here. What about the zIndex?
Does the popover attribute render the element on a separate top-most layer?
Tho the feature is awesome. Seems like we'll need to rewrite our ui kit soon.
We are still hoping to see separate layers via css for dialogs and popovers.
Smth like
z-layer: default|dialog|popover
Which stack in the order: default, dialog, popover (popover top most) and are zindex independent ie they stack always in this order no matter what
Coz atm we dont have such thing and its a pain in the ass really. The dialog element kinda solves this issue, but u cant always use the dialog element for everything, while u want a separate layer. We want to be able to move any element to a separate layer like dialogs/popovers/dropdowns/tooltips etc
waaaw i cant think of how much u can be creative with it
Another thing that should have been in HTML/CSS from the start
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
Looks like csssimplified coming soon next year
Very cool. Thanks for this!
This is amazing. Thank you very much.
Thanks so much.. All of these are new to me ❤🎉
Popover is now geberally available in all major browsers 🎉
So basically relative position in parent and absolute position in child but without any browser compatibility 😅
Exactly what I was thinking about the anchor(). Dang
👍😄
Yep. This case is pretty much solved already by the solution you mentioned. I guess anchors might appear useful in some other cases… would be cool if you could animate the anchor! So, move a pop up element from one item to another.
You should be able to animate the anchor by just changing the element it is anchored to and having a transition on the position properties. This also does much more than relative and absolute since you can position elements next to each other that are not child/parent. In many cases your parent may have an overflow hidden on it so you could never position something outside of it. Also stacking contexts are messed up when dealing with nested events since the child will be stuck in the parents stacking context
Position relative/absolute is not an equivalent to this. This new API is also position aware as you can see when he resizes the browser. It moves the popover automatically so it doesn't get cut off by the browser viewport. It basically removes the need for JavaScript to create such a tooltip/popover element and that's great. Unfortunately it's still pretty new so browser support is bad, at least for now.
But at one point flexbox and grid were also new and without proper browser compatibility, but look at them now. People also said then "why would I use this when I can use 'float'?", but now basically nobody uses floats these days and many newer devs don't even know "float" exists. These things take time, but it's great to at least know about them.
Is there anything known about how accessibility is taken into account for these features? Are the popover/context menu features keyboard navigable, for example? How do screen readers and other tools interact with these new features?
Kyle didn’t look anything like Chris Pratt.
Nice feature btw. I’ll consider using anchor in 8 months… needs some time.
Good call! 😉
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
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
adding rewatch reminder in 1 year
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)
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!
what about for mobile support tho ?
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.
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.
This seems very, very useful
The popover API already looks way better than current JS libraries like popperJS or floating-VUE. I would LOVE to ditch those libraries from my projects and move to the native implementation.
It's 5 months since the video and caniuse puts support at 79%. Still not good enough for real-world usage but getting closer.
As of Feb. 17, caniuse has 'anchor' now. 😁
@@Sabrecho At least they acknowledge its existence now.
Oh God, I'm terrified of new CSS features in 2023.
This is amazing! Really! So long, long javascript code to position stuff!
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
You the best, comm for the algoritm, i need this later!
OMG is amazing, recently i was a develop a similar contextual
AwesomeSauce!!!! Luv it! Thank you!
I wonder if this API will successfully replace Angular CDK and its positioning strategies.
Just blows my mind to think that someone is actually implementing these things. We are just using these abstractions
They're mostly Google employees and getting paid $200k+/year, and there's a lot of them.
@@brunoribaric8012 w3c guys are google employees?