CSS Popover + Anchor Positioning is Magical

[@ed1nh0]

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!

[@DocuFlow]

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?

[@TheVictix3]

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 !

[@lupomikti]

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

[@ScottRoberson]

yes, especially so since the pollyfill didn't work for me (latest firefox and safari)

[@KonstantinDankov]

This is something I have been waiting on for a while. Thank you!

[@KrisDesChacals]

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.

[@JamesStuckeyWeber-du5vs]

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.

[@BraceZenith]

@@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.

[@clevermissfox]

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

[@KevinPowell]

Recording a video on View Transitions this Friday with Bramus :D

[@insertunhur]

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".

[@nomadshiba]

also a blind user doesnt have to know its a popover, they are already announced button is expandable. similar to

[@EmmanuelB]

Man, how CSS have come a long way! These new at-rules are amazing and opening great possibilities for the future.

[@nomadshiba]

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.

[@vilijanac]

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.

[@fantomtracks]

CSS is awesome now !

[@ahmedsaeed2896]

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

[@modernkennnern]

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).

[@habibullahrahat1649]

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

[@nomadshiba]

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.

[@pawejakubowski829]

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?

[@Adesignl]

I could have used this last week!!

[@mjmorganuk]

Awesome content yet again Kevin. Thank you.

[@ScottRoberson]

I'm very excited about this feature. Sure hope it gets into Firefox & Safari soon! (polyfill didn't work for me)

[@shanedonlon]

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!

[@EricFressange]

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 🙏

[@sabiruli]

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

[@vinnylozada]

You should create your own UI library. Call it "Powellful UI" or something. LOL. 😆

[@katylar]

Excellent as always, Kevin!

[@lucadetomi9269]

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

[@RoiTrigerman]

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

[@mrmariuszr]

Maybe lets use tag?

[@obrien8228]

Popover is the best thing since sliced bread

[@geforcesong]

great tutorial

[@bxi936]

Thank you

[@potrosanjuan]

Making the impossible easy!!!

[@venkyman4985]

Ohh! I always assumed the there was some z-index magic in bringing and hiding nav bars

[@screamtwice]

Do the anchor-name's conflict if you have this on repeated elements?

[@다루루]

it's amazing!

[@thegiantbeast]

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?

[@HowardBuksbaum]

It should be a table with inline styles

[@TheMetalMag]

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

[@hoshi411]

Pretty cool but as of now, JS is just way less convoluted 🤷🏼‍♂️ to get this working.

[@mebamme]

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!)

[@lalaaldin]

Does it work on iphone/safari? The popover content is shown on load...

[@gr81matt]

Can the popover be triggered on hover with this method?

[@DxBang3D]

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)

[@joel-rg8xm]

Great! would like shorter videos tto accomodate my dev time though ;)

[@LetrixAR]

TIL that there is a Popover API

[@Kevin-qz4eq]

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?

[@IanBonaparte-r3w]

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!

[@BauldyBoys]

Things have really picked up since IE was deprecated. Lot's of collaboration between the browser teams. It's really cool to see.

[@obrien8228]

For some reason my fade out animation is not working ... probably a typo

[@SavanSanandiya-p5y]

Popover is not working in safari 😥

[@Chess_enthusiast1337]

is it me or is it far from actually magical and actually complex? lol

[@robinheyer708]

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.

[@nomadshiba]

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 .

[@LokiDaFerret]

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. 😁

[@jarekwasilewski8891]

Is IT working on Firefox etc?

[@Killyspudful]

Not yet but they're working on it...

[@kingtalis]

@@Killyspudful Can you give a source where they mention they are working on it