How was this not in the browser before???

the popover API has just landed in Baseline and I am so so excited you might not know what popover is but you might have heard the term specifically you might have heard of popper popper was the tool tip and popover positioning engine so think like when you hover over something and you want the little like tool tip to appear like at a specific place that type of stuff or if when you scroll you want to make sure it stays within view which is a very annoying problem to solve or another really common one is if an element has an overl property to it because if I have a tool tip inside of a box all Scala draw is necessary for me to explain this properly so if we have a box and this box has an element in it we'll say this is like a question mark like the I need help button everyone's favorite and this is a box in our UI like our whole web page is like this but we have this box maybe we have a couple of them so we have these boxes and we have a tool tip for when we hover over one so let's say we're hovering over this one and we get a little tool tip I'll make the tool tip green to show it's different and this appears when we hover over this question mark obviously this tool tip would be an element on or around this inside of this but we're using absolute positioning to put it there what happens if you set an overflow rule on here like let's say we have a horizontal scroll bar in here because the content of this thing needs to be scrollable because there might be more stuff inside of this so if this is a scrollable element with a ton of text if that get to the point where it has to scroll you're going to have to set a scroll rule on this once you've set an overflow y rule overflow X automatically no longer allows for overflows you cannot have overflow y set on an element without overflow X being set To None you will not have visibility you can turn on overflow X scroll but then what happens is this box gets wider once you open the tool tip or you have to horizontal scroll when the Tool tip opens these behaviors suck because of CSS being this is all the different overflow behaviors when you set y or X so if Y and X are both visible it overflows accordingly if x is hidden even if Y is visible both now are hidden you can manually set overflow y to visible but if x is hidden Y is Now hidden too this is obnoxious the fact this is a real problem is like memed here in a big part of people make fun of the web so much so these types of problems have existed forever and doing something as simple as a tool tip has historically been obnoxious and the goal of popper was to solve this via JavaScript so it would run JS to adjust positions of things and render them at a different layer just to make sure the element would appear where it's supposed to so they use crazy T behind the scenes to force the element to the top level so Z indexing doesn't get affected to make sure the element is where it's supposed to be as far as you're seeing it obnoxious but unnecessary evil if we look at npm Trends you'll see here that like popper is half of reacts installs that's nuts that's how common a need this is We compare this to view popper is more common than view that's how big an issue this is like are you kidding are you kidding in fact this is that necessary is insane because this should be part of the browser and thankfully if all goes well with the popover API it will finally be part of the browser that's what una is talking about here that's what popover is supposed to do is give us actual built-in native behaviors for this type of thing it's happening one of the features I'm most hyped about has just landed across all modern browsers and is officially a part of Baseline 2024 and this feature is the popover API popover provides so many awesome Primitives and developer affordances for building layered interfaces like tool tips menus teaching uis and more I can confirm that this is something that Uno was very hyped about I actually asked her when I chatted with her at um epic web what she was most hyped about and immediately starts talking about popover and how cool this shit's going to be very genuinely hyped very she's doing such a good job representing Chrome she makes me excited again about all of this stuff normally I wouldn't care but she's she's on top of her some quick highlights of popover capabilities include the following promotion to the top layer popovers will appear in the top layer Above the Rest of the page so you don't have to play around with Z index if you're not already familiar with top layer it's a thing that she's been pushing for a while good old J hopping in here too top layer sits above its related document in the browser viewport and each document has one Associated top layer so now you don't have to worry about Z indexing cuz top layer is its own layer above everything else which is what you really want half the time you're dealing with weird Z indexing stuff you just want to be sure this element goes all the way up and now that problem is solved it's just solved it's a solution to zindex 10,000 we finally there how long it took is something I don't want to think about does it have a date where this is published at the bottom yeah 2022 but we're there and popover API makes it much easier to get into the top layer there's also light dismiss functionality built in clicking outside of the popover area will automatically close the popover and return Focus default Focus management as well opening the popover makes the next tab stop inside the popover you have no idea how annoying this is for modals having this just work oh accessible keyboard bindings hitting the Escape key or double toggling will close the popover and return focus and also of course accessible component design connecting a popover element to a popover will trigger semantically creating popovers is quite straightforward to use default values all you need is a button to trigger the popover and an element to trigger it first you set a popover attribute on the element which is going to be the popover then you add a unique ID to the popover element and finally to connect the button to the popover set the button's popover Target the value of the popover element's ID oh it's that simple it just attributes in HTML you have the popover Target which is an ID for another element and you say that this is popover which by the way if you're doing this in react is going to strip it very simple fix was found by chance which is just pass true as a string so do pop over equals the string true and you're fine if you're a react Dev or using some other framework that has that problem should work in other things too and now this very simple demo has a pop over with more information we can just hit Escape or click out and it closes so nice even has is open states where we can do animations and too the CSS is really handy the popover background black color white font yada yada you got all the ideas there but the animations here of is open pop over pop over open Translate 0 and then the exit state which is when popover is not open which I don't love I would have liked a pop over closed type state to apply there instead but the transition here ease out and the translate in order to shift it out of the display area or is it the opposite here oh yeah the before open State the starting style pop over pop over open I don't like the semantics of that a lot but it works and makes sense regardless the fact that the CSS is that simple to do something like this is huge huge win and for that to be multiplot too as they show above here it's supported in the latest Chrome Edge Firefox and even Safari has support for this now huge that support's going to be a little more chaotic as we go along but I'll show you guys some fun stuff don't worry to have more granular control over the popover you can explicitly set types of popovers for example using a bare popover attribute with no value is the same as using popover Auto also I guess instead of popover true you can do popover equals Auto very useful this Auto Value enables light dismiss behaviors and automatically closes other popovers also very handy that when you open one of these it closes others that's a very annoying thing to deal with otherwise my one concern there is if you use this for like a tool tip and there's a tool tip inside of a modal that might break things so getting that just right might be worth us quickly testing but these things doing them correctly is never meant to be easy it's just a lot easier than it was before using popover manual will allow you to need to add a close button manual popovers don't close other popovers or allow users to miss them by clicking away in the UI you can create a manual popover using the following div I'm a popover the button class is closed pop over Target is my popover and popover Target action is hide this kind of feels like view stuff where you're defining these levels of behaviors that are normally JavaScript through tagging things like that it's really cool that it is that simple and that vanilla HTML can do this now where now this won't close unless I hit the x button the one sad part here is if we wanted to bring back the escape button Behavior cuz I wanted escape to close out of my modals but I also wanted tool tips to not close my modals that I have to write some JavaScript just to add the escape button I'm assuming at least there's a third type of popover popover hint which has been discussed in the standards bodies but is not yet implemented this value would enable the opening of popovers that don't close other popovers while still allowing light dismiss popover hint is useful for Tool tips in other ephemeral layer interfaces look at that I got pre-read I was thinking about this the whole time and they already told me they're on the way cool I really hope that gets merged in because tool tips are such a paino and if introducing this makes weird autoc close behaviors or a bunch of JavaScript to handle the manual ones that's annoying and if popover hint can fix that oh not having to write any JS for this stuff would be so nice popover versus modal dialogue you may be wondering if you need a popover when dialogue exists and the answer is you might actually not it's important to note that the popover attribute does not provide semantics of its own and while you can now build motal dialogue like experiences using popover there are a few key differences between the two the dialogue element has hurt me much much more than any element should so I'm happy to be told I don't necessarily need it anymore but let's hear the the reasons in each Direction the modal dialogue element opens with dialog. show modal and it closes with dialog. close it makes the rest of the page inert okay that seems like the biggest benefit it does not support light dismiss behaviors it does not I can confirm it does not and you can style the open state with the open attribute semantically represents an interactive component that blocks interactions with the rest of the page it also has really terrible default uh margins and other behaviors that are really annoying to fix versus popover which uh can be opened with a declarative invoker it can be closed with popover Target or popover Target action equals hide does not make the rest of the page in art it supports like dismiss by default and you can open the state with the popover or you can style the open state with popover open pseudo class there's also a pseudo class for dialogue but most importantly there's no inherent semantics which is really nice especially after I've dealt with the weird that dialogue comes with dialogue was shipped well before popover and many lessons were learned yes yes they were one of which is how nicely it is to declaratively open and close popovers with an invoker to resolve this the invoke Target property is being discussed in prototype for a more declarative dialogue toggle trigger much like with popover that is nice that theoretically we won't need a bunch of JS and just can do dialogues in HTML but that's not my main issue with dialogue it's all the weird default stuff regardless nice changes very excited to see we got to play with this though because uh I have not been particularly jazzed with the state of these demos so this one the simple manual will pop over where this comes in and slides we'll test it in a few other browsers we're going to throw this in Safari and in Firefox so here it is in Firefox where the animations don't work at least it appears and disappears though correctly and if we go back to Safari also no animations by the looks of it by the way if you're curious we also tried the default instead of the manual so this is with auto still no if we're doing this in other browsers it seems like Chrome is the only browser in this case Arc which is Chrome based that is happy to actually trigger those animations properly so that's annoying that half of the demo doesn't work in other browsers but having a default behavior for this is really nice here's another demo that una posted that is meant to be a radial menu so like you click it and like a thing spins in a circle around and uh yeah you didn't notice it appeared down here and if I click again it moves back to the right place when it closes but I tried this in other browsers too so here it is in Firefox where it actually works and animates properly which is interesting it's the only browser where that's the case in Safari it goes straight to the middle on the bottom and a bunch of the icons are missing too cool all the icons work here half the icons are missing here super consistent yeah browsers suck again the the reason that something like popper is as popular as it is is because they've handled so many of these edge cases already and as exciting as this is it is concerning how much of these behaviors are broken across different browsers at the moment and the result will likely be poly filling from hell for a long time ah that is nice look at that menu you can hardly see because of my camera having a a real menu system like that that just built into the HTML is so nice I want to look at the code in a sec let's just see how this works in other browsers first though still no animation on other browsers which is annoying that in all their examples the animation is broken every other browser oh and the text rendering and the it seems like the CSS targeting for this stuff is what's broken at the moment where in Chrome the text targeting for these worked and in Firefox is it just cuz the gradient text thing didn't work so all the color text didn't work it's got to be that yeah this whole element here you can't even see the text yeah that's annoying implementing things between browsers is so much more frustrating than it should be nowadays and anybody doing it I'm sorry on one hand it's nice that Chrome follow standards but on the other hand they made the standards so we can close the JS because it's not being used here CSS will'll get to in a minute I want to start with the HTML because we have the button up here which is the menu button span class is screen reader only open menu so that that works for screen readers and it's not there otherwise they're pulling the hamburger icon from Wikipedia that's hilarious we have the nav popover ID menu has the close button on it too pop over Target menu pop over Target action is hide and the button by the way that we have up there has pop over Target equals menu which means this button is targeting the menu and will automatically be bound to opening the menu when we actually click it and then the menu itself has popover property ID menu so that these things become linked then the button which is the close button that is pop over Target action hide and it also still has to Target because it needs to know which pop over it's closing annoying but fair to have to specify the ID and then immediately specify again here I get why they do that though and it just works all this logic's in the HTML getting a menu like this is finally just HTML code as it probably always should have been one more quick piece before I forget because this is important and exciting CSS anchor positioning is coming in hot too which will help a lot with this because right now you have to do all the positioning manually when using popover so getting things aligned properly not great but once you have the position Anchor Properties gets much easier you can specify which element you want to Anchor something to so we have uh connecting an anchor to another element with an implicit anchor is in the following code example position Anchor Properties is added to the element you want to connect yeah get the idea position anchor D Das anchor element position notice also has position anchor and top anchor bottom so this will be anchored to the the top of this element will be anchored to the bottom of the element that it is referencing here interesting here that you can be explicit and not set position anchor and just put that in the top top position as well very interesting syntax but it's nice that you can specify left center right top Center or bottom for anchoring an element to another element very similar to popper here but doing this as a CSS function is very different and honestly pretty nice seems like the right way to do it cuz then you can just add padding to handle any edge cases too yeah this isn't in Chrome yet it's coming very very soon but here they show the demo with a screenshot of what it's supposed to look like once this is shipped using it alongside the popover API o that's going to be a brutal combo that is very very nice this article was like literally just posted so it's going to be a little bit before this ships as well and if you're doing this right now this is why I still recommend using a tool like popper or now the floating UI package but very very soon the browser should do all of this for us which is incredibly exciting CSS is mind-blowing browser does what it can do to keep the menus in view even when you scroll oh that part's really nice actually the amount of CSS hackery you have to do to keep things in view when scrolling normally is obnoxious you have to have poper running on like every frame oh that's so good that's so good oh getting these behaviors working is so annoying having it just built into the browser is going to be really nice yeah A++ very excited uh HTML Fanboy eating good tonight let me know in the comments what you think this is an exciting new API development and I'm hyped for the Chrome team for finally shipping this not just in Chrome but other browsers too hopefully the weird bugs we found will be solving those other browsers soon until next time peace nerds

Channel: Theo - t3․gg

Views: 101,269

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: FFxhkWk3I7U

Length: 16min 30sec (990 seconds)

Published: Tue May 14 2024