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!
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?
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)."
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".
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.
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 !
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
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.
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. 🙂
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
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
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.
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
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!
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).
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
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
I very often watch your content and like, link videos to my friends, but this one is really a blast. There's tons of tricks and nice explanation to understand how to use all the popover and anchor API. Thank you very much. On the semantic tags, I usually give a dialog tag for the popovers, as I feel like shows, showModals, and popovers are just different ways to "open a dialog box"... So I would go for dialog each time? It also has the advantage to find really quickly what in your HTML is meant to "poping-out", sorting them somewhere, ... And as dialog is often a wrapper, I have inside another node for structuring what's inside (menu tag, form tag, whatever). Do we agree also that, if you don't plan to make animations with transition and such, you can factorize your CSS by putting everything from .profile-menu into .profile-menu:popover-open ? If it works technically, do you see any "good practices" reason not to do it?
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
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.
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?
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.
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)
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
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
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.
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'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?
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!)
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)
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
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 .
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.
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. 😁
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!
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?
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)."
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
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.
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 !
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)
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.
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. 🙂
This is something I have been waiting on for a while. Thank you!
Man, how CSS have come a long way! These new at-rules are amazing and opening great possibilities for the future.
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
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
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.
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
CSS is awesome now !
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!
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).
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
Excellent as always, Kevin!
Awesome content yet again Kevin. Thank you.
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
I very often watch your content and like, link videos to my friends, but this one is really a blast. There's tons of tricks and nice explanation to understand how to use all the popover and anchor API. Thank you very much.
On the semantic tags, I usually give a dialog tag for the popovers, as I feel like shows, showModals, and popovers are just different ways to "open a dialog box"... So I would go for dialog each time? It also has the advantage to find really quickly what in your HTML is meant to "poping-out", sorting them somewhere, ... And as dialog is often a wrapper, I have inside another node for structuring what's inside (menu tag, form tag, whatever).
Do we agree also that, if you don't plan to make animations with transition and such, you can factorize your CSS by putting everything from .profile-menu into .profile-menu:popover-open ? If it works technically, do you see any "good practices" reason not to do it?
This was very cool and probably useful. Tnx a lot for this.
This is really awesome. It will reduce to use extra JavaScript. Thanks Kevin
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 🙏
So much interesting information about HTML and also CSS. Thanks a lot
Maybe lets use tag?
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
You should create your own UI library. Call it "Powellful UI" or something. LOL. 😆
I'm very excited about this feature. Sure hope it gets into Firefox & Safari soon! (polyfill didn't work for me)
I could have used this last week!!
OMGG. This is a saver, you are my god Kevin, thank youuuu..............
Boy, I’m going to tinker with this and light boxes sans js
it's amazing!
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.
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 tutorial
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.
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 ?
Thank you
Nice!
I am using popover for a long time already, wasn't aware it is still considered "new"...
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)
Popover is the best thing since sliced bread
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
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
Making the impossible easy!!!
Would appreciate seeing this work with mouseover and not click on desktop
Ohh! I always assumed the there was some z-index magic in bringing and hiding nav bars
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.
Do the anchor-name's conflict if you have this on repeated elements?
Pretty cool but as of now, JS is just way less convoluted 🤷🏼♂️ to get this working.
Can you use anchor position center?
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'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.
It should be a table with inline styles
Great! would like shorter videos tto accomodate my dev time though ;)
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 😭
Does it work on iphone/safari? The popover content is shown on load...
Can the popover be triggered on hover with this method?
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)
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
For some reason my fade out animation is not working ... probably a typo
Popover is not working in safari 😥
TIL that there is a Popover API
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
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.
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. 😁