Kevin, watching your tutorials and noticing your smiles every line of code doing something "magic" make my frontend day! 😂😂😂 I'm a huge fan of your work and skills! Keep it up!
Thank you for the video, Kevin. Once this will get adopted by more browsers, life for folks like us will get so much easier. I'm definitely looking forward to the future more now. 🙂
Kevin you are a an absolute saviour. I wanted to do something like that a few month ago on a project for my job but i couldn't make it work properly because of the position fixed. Thanks to you, now i know what was wrong and i can FINALLY get rig of Angular Material and design my own components. Thanks again !
Literally never thought about putting a popover attribute on a dialog. Always thought of them as seperate but somewhat equal. And there are times i want to use the dialog semantics but not deal with the js to open and close it. This is mindblowing 🤯
You were right to use a popover here. Popovers should be used when the information presented doesn't require immediate user input. Dialogs should be used if that info demands the user's attention ("Your email address is invalid"). It's an accessibility thing. See WCAG 2.1.2 "No Keyboard Traps".
I'm loving the fact that the common UX patterns are being actively migrated to HTML, giving it a more "semantic web" , or if you code, more strongly typed. Love you work on this Kevin. I feel like I'm missing out on other new declarative methods, is it your plan (apologies if it is already) to have a series looking at all of these?
Fantastic video as always Kevin! The anchor positioning polyfill has some serious shortcomings, so be careful before you spend a bunch of time getting everything first working in Chrome! For example, it doesn't work with dynamic content (bug #91) and it causes Font Awesome (and other font-based things) to break completely (bug #274).
A few people have suggested Menu as the most semantically appropriate tag. Whereas I would prefer to use that for this type of feature I have to disagree in this instance because we can see from the layout of the Div's contents before Grid layout is applied that its contents are not LI elements. According to MDN, "The HTML element is described in the HTML specification as a semantic alternative to ...It represents an unordered list of items (which are represented by elements)."
Awesome. I just painstakingly made my own because I couldn’t figure out how to position it properly, this will help me go back to css for mine rather than the js I was making for it
It'll be great when CSS Anchor Positioning gets out of Working Draft status as I imagine that's when Safari and Firefox will start working on it properly. Very excited for this, and though I doubt it'll reach Baseline 2025, I really hope to see the support grow next year
You said it easy, lol. Anchor positioning is new to me. It is very useful too, if another element can be made it to be the anchor (not the button) for the relative of the menu. Something I need to try.
Wonderful content, as usual! Still have my fingers crossed for an in-depth deep dive into view transitions! KPow has been teasing me with it since last fall when he did the first couple vids about it 😂 Would love a breakdown on popover=hint too and use cases if there are any more plans to look at popover
Be careful with oddbird's polyfill. Currently, it has several bugs that causes sometimes unexpected behaviours. It's better to have a polyfill than none, but keep in mind that this polyfill reads all your CSS, do some transformations to it and then give it back to the browser. I guess it might be quite hard to develop such a polyfill so I do not blame the author though.
I'm one of the devs on the polyfill, and you're right, there's a lot of challenges here (and a good reminder of why this is getting standardized and moved into the browser). We recently added the ability to transform only some of your CSS, which can help with performance depending on your use case. And as you come across bugs, definitely file issues! We're working towards implementing more of the spec, and let us know if there are parts you'd like us to prioritize.
@@JamesStuckeyWeber-du5vs The native html popover is a nightmare, if you want a predictable menu, that will always appear anchored to your menu button (or wherever you actually want it to). Use JS for now, and then move to this when it's properly supported in browsers.
im using this. if the person doesnt have support it just opens at the middle, which is ok. you can also give anchor-name with attributes based on id. also if you are on js land, you dont have to give ids at all, you can just reference the Element itself to the property. there are many options tbh, i cant remember them all atm. my css looks like this: [popover] { max-block-size: 100dvb; max-inline-size: 100%; inset: 0; margin: auto; } [popover][anchor] { margin: 0; inset: auto; position: absolute; inset-inline-end: anchor(end); inset-block-start: anchor(end); position-try: flip-block, flip-inline, flip-block flip-inline, --final-block-start, --final-block-end; } @position-try --final-block-start { inset: auto; inset-inline-end: 0; inset-block-end: anchor(start); } @position-try --final-block-end { inset: auto; inset-inline-end: 0; inset-block-start: anchor(end); } since im using js `myPopoverElement.anchorElement = myAnchorElement` it doesn't add the [anchor] attribute if browser doesnt support it, because property does nothing, and the popover just appears at the center. but its also possible wrap [popover][anchor] with css `@support` at-rule.
Man, your every toutorial amazed! Thanks a lot for our tips. 🥰 I have been watching your video since you made caousel using vanila JS Thanks For making our life easier
This looks like I could replace my vertical menu, with all of it's styling and javascript with what looks like a much nicer implementation. I'm working on a Family History in Pictures site and wanted as much screen realestate as possile, top and left so spent a long time trying to implement it reducing and expanding the main content area, but this looks like a better, simpler option. Thanks Kevin
14:17 i dont think fits to popover, because popover content acts almost like more than its . hides all of the other content from the user. so to do anything else user has to close to dialog. if you open accessibility view in the devtools. you will see dialogs hides everything else when it opens.
hello Kevin, firstly, thanks for all your awesome videos, you really are the king of CSS secondly, for semantics why shouldn't we use the 'menu' HTML element for the Popeover menu
HTML Menu Tag might be the better option over div role menu. Also popover API will be great for mobile navigation because of the light dismissal etc. Easy wins!
If you anchor your popover to an element, and if that element is inside a scrollable container, what happens when you bring up the popover, and scroll the container such that the element scrolls outside of the container's viewport? The popover, being part of the top layer, will probably still be visible, although its anchor is no longer visible. Is there any way of avoiding that? And also, now that popover and anchor positioning are becoming a reality, how would one create a tooltip, which has a tip pointing at the anchor; but the tip will have to be turned a different way if the tooltip is repositioned into a fallback position.
There are few things I like more on the web than solutions that can worth entirely without JavaScript (but can be controlled entirely with it, if need be).
At 13:56, regarding HTML element choices for the sake of semantics, why not use the menu element? It works like an unordered list and is used often for options like account settings and logging in and out.
The video is awesome as always Kevin :) I'm just wondering what is the purpose of using popover etc. in libraries like react where DOM manipulation is handled by them. I know that prefering css over javascript is a good thing, but in this case we probably don't want to confuse react mechanisms. Do we?
Great video! i wonder how would you use this method for something like a tooltip with custom html, and with the small triangle that points to the trigger
Hi kevin, Great video. could be possible to have a link to a codepen with each example in the description of each video? Could be a very useful "starting point" to forward develops
It was meant to be easy but the last step proved that you need to know everything about CSS to do anything in CSS, that's a lot of boilerplate for a simple thing, I guess it's easier to just stick to javascript library for this
This is a great video and presentation, however, I would warn against using the popover API for now. I spent the weekend implementing it in my app but, in some not-so-edge cases, chrome would regularly crash (by which I mean the tab would freeze up). I'm confident these issues will be resolved, but it's not safe to use right now.
Until we have actual custom selects, it might be the easiest way right now. Just keep an eye out for keyboard interaction when creating it (up down arrows to move between options, space or enter to open it, enter to select + close it, tabbing away also closes it)
Hey Kevin! Such a cool stuff, thanks for this! Do you (or anyone else) have an experience with @position-try on submenu within sticky navigation? Thanks and have a great day!
Adam Argyle has said that a dialog is blocking, and popovers are asyncronous. So when you want to the user to be blocked from doing anything else, use a dialog. Asking them to make a choice before preceeding for example. A popover should allow the user to continue interacting with other parts of a page, like a lightbox. So I think too, a dialog would not make sense here.
can this be used for tooltips? 🤔 probably not as a pure css thing but maybe with an hidden element that on hover it will click on the hidden element and show it?
I love your videos, but I never manage to do what you do. First time I tried --root css never worked.. all your ways to write the code I can't get it to work. but thanks
I've was doing this with JS just a little while ago and thought it should be built in. When did the CSS people start being smart? Are they under new management or something?
I am not going to rewrite my menu once again to maybe have it working in Firefox after I got it working in Firefox.... no idea about Safari (not going to buy an Apple just to test on Safari)
14:27 could you please give me the password to the channel so I can leave my input in the description? (: (either way, great video - I didn't know there was a polyfill!)
16:30 and that's why I HATE CSS. There's so many cases where the css syntax itself isn't consistent and doesn't make sense. All because those idiots who make CSS are like "but if we change things we might break some old stuff from 2005" who tf cares. Just break things, make the language more intuitive and logical, change the syntax, make it consistent. Why is :first-child to check if it's the first child of it's parent and not to style the first child of that element, yet :first-letter is to style the first letter of that element and not style it if it's the first letter of its parent? The whole language needs a rework. Or we need an alternative that's more intuitive.
The popover should not be dialog or menu. Dialog implies the background page is inert for someone using a screenreader, which isn't true. Menu is problematic because it implies keyboard arrow keys will navigate each menuitem. Unless a) this is inside a role=application (like Gmail) and b) arrow key presses navigate the items, menu is also inappropriate from a screen reader UX perspective.
13:51 This is where HTML and CSS can be so schizophrenic. There's a masonry layout coming in CSS which is practically a web component (is Google still fighting that?) which we will see on every website for about 6 months until everyone is fed up with it and never uses it again. Here, you get a new attribute and "oh, yeah, you'll have to make sure that there aren't any accessibility issues with this element". Why doesn't the attribute set a role? Or make popover it's own tag instead of an attribute. I enjoy the semantic tags and enjoy trying to use as few divs in sight as possible but I feel like I shouldn't have to waste my time comparing tags that kinda, sorta correctly reflect the role of a popover.
the thing is popover doesnt really need a role, because you can tab out of it. unlike dialog which isolates the content, popover is similar to show more button. blind user is already announced button is expandable. once they expend it, tab ing again makes them get into the popover, more like a they can just tab into it, they dont have to close it like .
anchors are unnecessary, why when there is an id or object is a js link to an element.. I’ll introduce the syntax as if it’s trying to help, but why when there is Js. I would call this an attempt to make html not a markup language. Let html be the behavior of elements from drawing in the flow of other elements, js is like an additional flow from drawing. great canvas example
NO! no old sight "relied on the existing behaviour". That would infer some old website was trying to transition the display property. Do you honestly think an old website was doing any transitions whatsoever? The justification is preposterous and they need to be slapped with a wet fish. 😁
It doesn't work for me, I checked my safari browser console and I'm getting this error "Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'e.children.map')" and its related to "line 23: c(n.throw(l));" in the polyfill code. I'm using oxygen builder on wordpress.
Kevin, watching your tutorials and noticing your smiles every line of code doing something "magic" make my frontend day! 😂😂😂
I'm a huge fan of your work and skills! Keep it up!
Just want to add my appreciation for the work you put into these videos and for making them available.
I always thought you were saying, "Hello friends and friends" and was so confused... But thanks to the subtitles, I get it now. Thank you, CSS-sensei
Thank you for the video, Kevin. Once this will get adopted by more browsers, life for folks like us will get so much easier. I'm definitely looking forward to the future more now. 🙂
Kevin you are a an absolute saviour. I wanted to do something like that a few month ago on a project for my job but i couldn't make it work properly because of the position fixed. Thanks to you, now i know what was wrong and i can FINALLY get rig of Angular Material and design my own components. Thanks again !
Literally never thought about putting a popover attribute on a dialog. Always thought of them as seperate but somewhat equal. And there are times i want to use the dialog semantics but not deal with the js to open and close it. This is mindblowing 🤯
This is something I have been waiting on for a while. Thank you!
You were right to use a popover here. Popovers should be used when the information presented doesn't require immediate user input. Dialogs should be used if that info demands the user's attention ("Your email address is invalid").
It's an accessibility thing. See WCAG 2.1.2 "No Keyboard Traps".
also a blind user doesnt have to know its a popover, they are already announced button is expandable. similar to
I'm loving the fact that the common UX patterns are being actively migrated to HTML, giving it a more "semantic web" , or if you code, more strongly typed. Love you work on this Kevin. I feel like I'm missing out on other new declarative methods, is it your plan (apologies if it is already) to have a series looking at all of these?
Fantastic video as always Kevin! The anchor positioning polyfill has some serious shortcomings, so be careful before you spend a bunch of time getting everything first working in Chrome! For example, it doesn't work with dynamic content (bug #91) and it causes Font Awesome (and other font-based things) to break completely (bug #274).
A few people have suggested Menu as the most semantically appropriate tag. Whereas I would prefer to use that for this type of feature I have to disagree in this instance because we can see from the layout of the Div's contents before Grid layout is applied that its contents are not LI elements. According to MDN, "The HTML element is described in the HTML specification as a semantic alternative to ...It represents an unordered list of items (which are represented by elements)."
Awesome. I just painstakingly made my own because I couldn’t figure out how to position it properly, this will help me go back to css for mine rather than the js I was making for it
It'll be great when CSS Anchor Positioning gets out of Working Draft status as I imagine that's when Safari and Firefox will start working on it properly. Very excited for this, and though I doubt it'll reach Baseline 2025, I really hope to see the support grow next year
yes, especially so since the pollyfill didn't work for me (latest firefox and safari)
You said it easy, lol. Anchor positioning is new to me. It is very useful too,
if another element can be made it to be the anchor (not the button) for the relative of the menu.
Something I need to try.
Wonderful content, as usual! Still have my fingers crossed for an in-depth deep dive into view transitions! KPow has been teasing me with it since last fall when he did the first couple vids about it 😂
Would love a breakdown on popover=hint too and use cases if there are any more plans to look at popover
Recording a video on View Transitions this Friday with Bramus :D
Be careful with oddbird's polyfill. Currently, it has several bugs that causes sometimes unexpected behaviours. It's better to have a polyfill than none, but keep in mind that this polyfill reads all your CSS, do some transformations to it and then give it back to the browser. I guess it might be quite hard to develop such a polyfill so I do not blame the author though.
I'm one of the devs on the polyfill, and you're right, there's a lot of challenges here (and a good reminder of why this is getting standardized and moved into the browser). We recently added the ability to transform only some of your CSS, which can help with performance depending on your use case. And as you come across bugs, definitely file issues! We're working towards implementing more of the spec, and let us know if there are parts you'd like us to prioritize.
@@JamesStuckeyWeber-du5vs The native html popover is a nightmare, if you want a predictable menu, that will always appear anchored to your menu button (or wherever you actually want it to). Use JS for now, and then move to this when it's properly supported in browsers.
Which polyfill popover or anchor-positioning?
Edit: Just skimmed through the issues of each and anchor-positioning has lots of bug issues
im using this.
if the person doesnt have support it just opens at the middle, which is ok.
you can also give anchor-name with attributes based on id.
also if you are on js land, you dont have to give ids at all, you can just reference the Element itself to the property.
there are many options tbh, i cant remember them all atm.
my css looks like this:
[popover] {
max-block-size: 100dvb;
max-inline-size: 100%;
inset: 0;
margin: auto;
}
[popover][anchor] {
margin: 0;
inset: auto;
position: absolute;
inset-inline-end: anchor(end);
inset-block-start: anchor(end);
position-try:
flip-block,
flip-inline,
flip-block flip-inline,
--final-block-start,
--final-block-end;
}
@position-try --final-block-start {
inset: auto;
inset-inline-end: 0;
inset-block-end: anchor(start);
}
@position-try --final-block-end {
inset: auto;
inset-inline-end: 0;
inset-block-start: anchor(end);
}
since im using js `myPopoverElement.anchorElement = myAnchorElement` it doesn't add the [anchor] attribute if browser doesnt support it, because property does nothing, and the popover just appears at the center. but its also possible wrap [popover][anchor] with css `@support` at-rule.
Man, how CSS have come a long way! These new at-rules are amazing and opening great possibilities for the future.
Man, your every toutorial amazed! Thanks a lot for our tips. 🥰 I have been watching your video since you made caousel using vanila JS
Thanks For making our life easier
I must say "Wow" to this video 🎉🎉🎉
CSS is awesome now !
This looks like I could replace my vertical menu, with all of it's styling and javascript with what looks like a much nicer implementation. I'm working on a Family History in Pictures site and wanted as much screen realestate as possile, top and left so spent a long time trying to implement it reducing and expanding the main content area, but this looks like a better, simpler option. Thanks Kevin
This was very cool and probably useful. Tnx a lot for this.
Genial como siempre, gracias Kevin 😊
This is really awesome. It will reduce to use extra JavaScript. Thanks Kevin
So much interesting information about HTML and also CSS. Thanks a lot
Awesome content yet again Kevin. Thank you.
OMGG. This is a saver, you are my god Kevin, thank youuuu..............
14:17 i dont think fits to popover, because popover content acts almost like more than its .
hides all of the other content from the user. so to do anything else user has to close to dialog.
if you open accessibility view in the devtools. you will see dialogs hides everything else when it opens.
hello Kevin,
firstly, thanks for all your awesome videos, you really are the king of CSS secondly, for semantics why shouldn't we use the 'menu' HTML element for the Popeover menu
HTML Menu Tag might be the better option over div role menu. Also popover API will be great for mobile navigation because of the light dismissal etc. Easy wins!
Excellent as always, Kevin!
If you anchor your popover to an element, and if that element is inside a scrollable container, what happens when you bring up the popover, and scroll the container such that the element scrolls outside of the container's viewport?
The popover, being part of the top layer, will probably still be visible, although its anchor is no longer visible.
Is there any way of avoiding that?
And also, now that popover and anchor positioning are becoming a reality, how would one create a tooltip, which has a tip pointing at the anchor; but the tip will have to be turned a different way if the tooltip is repositioned into a fallback position.
I could have used this last week!!
There are few things I like more on the web than solutions that can worth entirely without JavaScript (but can be controlled entirely with it, if need be).
Maybe lets use tag?
Hi Kevin, I'm using tooltips for a project and overflow on mobile is just the issue I'm facing.
I will try it with the poly fill.
Thanks a lot 🙏
Thank you for this great video Kevin. How would you do to have the transition when the menu pops in but not when pops out ?
I'm very excited about this feature. Sure hope it gets into Firefox & Safari soon! (polyfill didn't work for me)
At 13:56, regarding HTML element choices for the sake of semantics, why not use the menu element? It works like an unordered list and is used often for options like account settings and logging in and out.
Boy, I’m going to tinker with this and light boxes sans js
This is golden! How do you get it to work in firefox?
The video is awesome as always Kevin :) I'm just wondering what is the purpose of using popover etc. in libraries like react where DOM manipulation is handled by them. I know that prefering css over javascript is a good thing, but in this case we probably don't want to confuse react mechanisms. Do we?
Great video! i wonder how would you use this method for something like a tooltip with custom html, and with the small triangle that points to the trigger
Hi kevin,
Great video.
could be possible to have a link to a codepen with each example in the description of each video?
Could be a very useful "starting point" to forward develops
It was meant to be easy but the last step proved that you need to know everything about CSS to do anything in CSS, that's a lot of boilerplate for a simple thing, I guess it's easier to just stick to javascript library for this
This is a great video and presentation, however, I would warn against using the popover API for now.
I spent the weekend implementing it in my app but, in some not-so-edge cases, chrome would regularly crash (by which I mean the tab would freeze up).
I'm confident these issues will be resolved, but it's not safe to use right now.
Thanks a lot!
Kevin, do you think it's a good idea to make a custom select component based on anchor and popover?
PS. Thank you for awesome video!
Until we have actual custom selects, it might be the easiest way right now. Just keep an eye out for keyboard interaction when creating it (up down arrows to move between options, space or enter to open it, enter to select + close it, tabbing away also closes it)
Hey Kevin! Such a cool stuff, thanks for this! Do you (or anyone else) have an experience with @position-try on submenu within sticky navigation?
Thanks and have a great day!
great tutorial
Amazing, no longer need javascript to create a menu :)
Thank you
That is cool. But what I should do if I have more then one popovers on page?
Adam Argyle has said that a dialog is blocking, and popovers are asyncronous. So when you want to the user to be blocked from doing anything else, use a dialog. Asking them to make a choice before preceeding for example. A popover should allow the user to continue interacting with other parts of a page, like a lightbox. So I think too, a dialog would not make sense here.
Do the anchor-name's conflict if you have this on repeated elements?
it's amazing!
You should create your own UI library. Call it "Powellful UI" or something. LOL. 😆
can this be used for tooltips? 🤔 probably not as a pure css thing but maybe with an hidden element that on hover it will click on the hidden element and show it?
I am using popover for a long time already, wasn't aware it is still considered "new"...
Can you use anchor position center?
i have question if that polyfill will gone or delete, there`s be another option for that?
Ohh! I always assumed the there was some z-index magic in bringing and hiding nav bars
Can the popover be triggered on hover with this method?
Does it work on iphone/safari? The popover content is shown on load...
I love your videos, but I never manage to do what you do. First time I tried --root css never worked.. all your ways to write the code I can't get it to work. but thanks
I've was doing this with JS just a little while ago and thought it should be built in. When did the CSS people start being smart? Are they under new management or something?
It does seem like we've gotten more CSS enhancements in the last year or two than we had the entire previous decade. I am not complaining though!
Things have really picked up since IE was deprecated. Lot's of collaboration between the browser teams. It's really cool to see.
Nice!
Making the impossible easy!!!
Would appreciate seeing this work with mouseover and not click on desktop
I am not going to rewrite my menu once again to maybe have it working in Firefox after I got it working in Firefox.... no idea about Safari (not going to buy an Apple just to test on Safari)
14:27 could you please give me the password to the channel so I can leave my input in the description? (:
(either way, great video - I didn't know there was a polyfill!)
4:45 that's what she said 😭
Popover is the best thing since sliced bread
It should be a table with inline styles
For some reason my fade out animation is not working ... probably a typo
Great! would like shorter videos tto accomodate my dev time though ;)
Popover is not working in safari 😥
Pretty cool but as of now, JS is just way less convoluted 🤷🏼♂️ to get this working.
I wish this worked well with Web Components! I am trying to make this with a mega menu and its giving me grief
TIL that there is a Popover API
Why not make it the classic way?)
16:30 and that's why I HATE CSS. There's so many cases where the css syntax itself isn't consistent and doesn't make sense. All because those idiots who make CSS are like "but if we change things we might break some old stuff from 2005" who tf cares. Just break things, make the language more intuitive and logical, change the syntax, make it consistent. Why is :first-child to check if it's the first child of it's parent and not to style the first child of that element, yet :first-letter is to style the first letter of that element and not style it if it's the first letter of its parent?
The whole language needs a rework. Or we need an alternative that's more intuitive.
The popover should not be dialog or menu. Dialog implies the background page is inert for someone using a screenreader, which isn't true. Menu is problematic because it implies keyboard arrow keys will navigate each menuitem. Unless a) this is inside a role=application (like Gmail) and b) arrow key presses navigate the items, menu is also inappropriate from a screen reader UX perspective.
13:51 This is where HTML and CSS can be so schizophrenic. There's a masonry layout coming in CSS which is practically a web component (is Google still fighting that?) which we will see on every website for about 6 months until everyone is fed up with it and never uses it again.
Here, you get a new attribute and "oh, yeah, you'll have to make sure that there aren't any accessibility issues with this element". Why doesn't the attribute set a role? Or make popover it's own tag instead of an attribute. I enjoy the semantic tags and enjoy trying to use as few divs in sight as possible but I feel like I shouldn't have to waste my time comparing tags that kinda, sorta correctly reflect the role of a popover.
the thing is popover doesnt really need a role, because you can tab out of it. unlike dialog which isolates the content, popover is similar to show more button. blind user is already announced button is expandable. once they expend it, tab ing again makes them get into the popover, more like a they can just tab into it, they dont have to close it like .
Is IT working on Firefox etc?
Not yet but they're working on it...
@@Killyspudful Can you give a source where they mention they are working on it
is it me or is it far from actually magical and actually complex? lol
anchors are unnecessary, why when there is an id or object is a js link to an element.. I’ll introduce the syntax as if it’s trying to help, but why when there is Js. I would call this an attempt to make html not a markup language. Let html be the behavior of elements from drawing in the flow of other elements, js is like an additional flow from drawing. great canvas example
NO! no old sight "relied on the existing behaviour". That would infer some old website was trying to transition the display property. Do you honestly think an old website was doing any transitions whatsoever? The justification is preposterous and they need to be slapped with a wet fish. 😁
css is becoming a mess
It doesn't work for me, I checked my safari browser console and I'm getting this error "Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'e.children.map')" and its related to "line 23: c(n.throw(l));" in the polyfill code. I'm using oxygen builder on wordpress.