CSS Anchor Is The Best New CSS Feature Since Flexbox

would you believe me if I told you that this doesn't require any JavaScript at all it's just HTML and CSS and that's thanks to two new features one is an HTML feature and one is a CSS feature and these features combined together I think is going to change CSS as much as flexbox and grid change CSS years ago welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you and I'm going to absolutely blow your mind with the CSS feature because as you can see as I'm resizing my browser this nested context menu is properly moving around so it's always on the screen I can click to close out of it I can click to open up things inside of it and swap around what I'm actually viewing it's absolutely amazing what this can do and this is with just CSS and HTML there is absolutely no JavaScript on this page at all so in order to understand exactly what's going on we first need to take a look at a simpler example to understand the two concepts that go into building this what we're going to do is we're going to go over to this example right here which is the code I have open on the left right now there's nothing fancy on this page all you can see is I have a really basic form and that form has this little like eye icon a lot of times when you're filling out forms you may see this eye icon when you click on it it'll give you more information it's a pretty common thing that you may want to do but generally it requires you to use a bunch of JavaScript or downloaded JavaScript library to handle the positioning but now you can do this with just HTML and a little bit of CSS so the first thing I want to talk about is the pi over API that's added to HTML if you've seen my video on the dialog htl element I'll link in the cards of description for you it's somewhat similar but a little bit more customizable and requires no JavaScript at all so in our case you can see that we have this div that says extra inside of it I essentially want to render out this extra div off to the side here anytime that I click on this eye icon and I want it to be essentially like a tool tip pop-up that positions itself exactly where it needs to be no matter what so the first step is to turn this into a pop over element so to do that with the HTML popover all we need to do is take whatever element we want to be the like tool tip thing that pops up we just need to add the pop over attribute to it this is going to say this is a pop over element and now when I save you can see the element has automatically disappeared which is great the next thing you need to do is hook that up to some other type of element for example we'll hook up with this button right here so you don't have to do any Fancy on clicks or anything like that all you need to do is inside your button just specify a pop over Target and needs to be all lowercase and we set this to the ID of whatever element we want to be popping over so for example we can set this to have an ID of like info and then if we set the popover Target here to info now when we click on the button it's going to open this up so you can see if we click here it's opening that tooltip up and if we click anywhere it's going to close it or if we click on this button you can see it's closing it for us this kind of gives us like a more modal style dialog element very similar to the HTML dialog element but we can take this a step further and actually position it exactly where we want using the most amazing CSS feature I've seen in years which is the Anker CSS so to set up this anchoring all we want to do is on our div we want to say that we want this to have an anchor so we'll say that this is going to be anchor and we just need to give it a specific Target that it's anchoring to similar to how popover Target pointed to the thing that we wanted to pop up this anchor points to the thing we want to Anchor this element to so we want it to be essentially next to our button because we always wanted to revolve around this button we're going to give this button an ID we'll just give it an ID of button and now we can see that our anchor is going to be anchored to the element with the ID of button so now we've actually anchored this to this right now when I click you'll notice it's not showing up in the correct place that that's because this is an extremely experimental feature like if you go to can I use and you search for anchor it doesn't even show up because it's so experimental but if you just add a little bit of CSS style you can make it show up next to that element for you so what we can do is we can select the popover element that we have so we'll go into our Styles let's just select anything that is a pop over element just like this and what we want to do is we want to First Take the inset and set it to unset that's because by default the browser has some styling on how it sets like the top left right and bottom and inset is just going to remove all the automatic top left right and bottom Styles so you can see when we click on this it's still not showing up like we wanted to but that's perfectly okay the next thing we want to do is set it positioned based on where it actually is on the screen so what we can do is we can say that we want this tooltip to show up above this thing so we want the bottom of our tooltip to essentially be the same as the top of this eye icon so we can say we want the bottom of this to be and how do we get the position of the top of this button well we use this anchor function so we can say anchor here and we want to get the top of the thing that we're anchoring towards so now if I give that a save and I open this you can now see that the very bottom of this is anchored to the top of this eye element and as I scroll my page you can see this element is moving where my eye element moves essentially anywhere this eye element moves my tool tip or popover is going to move with it because it is anchored to that specific position I can do the same thing by anchoring the left side for example I could get the anchor here and let's just get the center of it because I want to Anchor it to the center now you can see when I click it is anchored where the left side is perfectly over the center of the thing that we're anchored to now in order to make it so that this entire thing is centered we can just do a quick translate this is just normal CSS negative 50 and now you can see when I open that up it's perfectly centered over top of this we can even you know give it some margin or whatever if we wanted so we could say we have a margin of like 0.25 REM that's just going to give it a little bit of space and we want this to only be on the top and bottom so we'll just come in here like that there we go so now it's only on the top and bottom so as you can see with just a couple lines of CSS and a few lines of HTML I essentially created a tool tip pop over that's anchored to a specific element on my screen and no matter where I move around it's always going to be anchored that specific element now you will notice that when I click on this and then click somewhere else it closes this tooltip maybe I want this to stay open until I re-click on the I button so there's actually a way that you can configure that what you can do is you can come over here to the popover by default this sets to a value of Auto which gives you that default behavior of closing when you click outside of it you can also set this to manual so now when I click on this and I click somewhere else you notice it stays open and that's what we get from that manual Behavior but if we want to be able to toggle this you can see it toggles when I click on this we can also make it so that our button does different things when we click on it so what we can do is we can say the popover action we want to make sure this is the popover Target action we can make this toggle which is the default so if we come in here and we save you can see we still get the same default Behavior but I can make it so this just actually shows it so if I change this to show and now I click on this this button will always show it so as I click on it again or click other places you can see it's not closing or I could change it to hide and if it's hide that means whenever I click on the button it's going to hide it but by default it's going to be toggle and that's what we're going to leave it out so we like it like that but now I can click outside here it stays there until I click the button a second time so this entire popover portion as you can see it's relatively straightforward where all the complexity comes is with all this anchor stuff which is the more CSS side of things but if you want to just get started with just these popovers things like pop over Target pop over Target action it's actually almost stable in browsers if we look at the can I use for a pop over you can see it's already in Chrome it's already an edge it's in the technical preview for Safari and it's behind a flag in Firefox so it's going to be getting into mainstream use across all major browsers relatively soon even just a couple months ago this was at like 30 percent now it's at 56 percent so I could easily see this within maybe six months being something that you can actually start using on your website which is really exciting now anchor on the other hand doesn't even have a page yet on can I use and that's just because it is so experimental there's really nothing at all that supports anything related to anchoring but if you're using the Chrome Canary version and you have made sure you've gotten into your Chrome flags and you enabled experimental web platform form features now you can actually start using the anchor features inside of CSS I'll leave a link right here to how you can actually enable this flag inside of your browser if you're in the Chrome Canary version which is like the beta version of Chrome so let's go back here over and look at some more features we can do with anchoring I showed you one way to set up an anchor by just setting the anchor here and making a link by an ID but you don't actually have to do that what I can do is I could remove both of these there's no longer linked together and as you can see when I click it's not actually putting it in the right place it's showing up down here in the corner for some reason what I could do instead is I could set up my anchor inside of my CSS the way that you can do that is you can give things an anchor name so here we have this button it has a class of information so let's just select that button and what we can do is we can say that it has an anchor name and in CSS this anchor name must start with two hyphens at the beginning just like if you're creating like a CSS variable we can call it whatever we want to call it let's just call it inside of here our I button there we go so now we have this anchor name set to I button and then what we can do inside of our popover is we can set the anchor default and let's make sure that doesn't have any dashes in the front there we go and we want to set that to our eye button now it's now anchored together because we set our default anchor for everything in our popover is the I button and we said our information has that specific name now when I click you can see it's properly linked together and as I scroll you can see it's properly moving just like I expect now if you don't want to set the default instead you can pass the actual anchor here so I could say it's going to be linked to the I button just like that as the very first property into my anchor same thing down here and now you can see that that is working just the same as it was before so you can use multiple anchors inside of one thing and Link them together that way or you can just set the anchor default or you can set the anchor inside the HTML there's a bunch of different ways you can do it it's entirely up to you for now we're just going to come in here I'm going to set the anchor default back to our I button just because I like to use the default because if I'm going to be using the same anchor it kind of makes sense to just set it as a default every we go now the next really cool thing about this feature is you'll notice when I start to scroll down my page my tool tip goes off the page and that's generally not something that you want so there's actually a way to get around this by using something called a position fallback you know inside of CSS you can create things like keyframes and so on you can also create something called a position Dash fallback in this position fallback is really interesting because it essentially tries to position your tooltip in a bunch of different places until it finds one where it fits the entire thing on the page this is one of the hardest things to do in JavaScript when you're creating your own custom tooltip Library trust me I have videos on how to do it and they're quite long like 45 minute long videos just to implement this one single feature that's inside of CSS now again it's incredibly experimental and not supported anywhere but I'm super excited for this to come to the browsers so we just need to give this a name for example we'll give this the name top two bottom because I want to First Position it at the top and then position it at the bottom and to do that you just put these at try blocks and essentially it's going to try to position your code at whatever you said inside of here so all your left right top bottom positions is going to try all of those if it doesn't fit it's going to move on to the next one and the next one the next one until it finds one that it works in so this first one is going to be for positioning things at the top well we already have our code for that I'm just going to copy that over just like this there we go our bottom is going to be anchored to the top then I'm going to create another one where I'm going to try to Anchor it to the bottom so the top of our thing is going to be the position at the bottom of our eye element right here now what I can do and let's just make sure our left is actually positioned for both of these as well there we go now what I can do is inside of here I can set my position fallback property to the name of this which is top to bottom navigate to save and I open this up and I scroll you notice as soon as it no longer fits on the top of the screen it moves down to the bottom of my screen and if for some reason it couldn't fit on either the top or the bottom it'll just stick with whatever the last try block is so if all of these fail it'll just render it in whatever the last position is so again to reiterate how this exactly is working we set a position fallback which allows us to actually set things like the bottom left top right position and what it's going to do is it's going to try them one by one all the way through until it finds one that works and once it does that's where it's going to position the element using the top left bottom and so on now there's a few more advanced features inside of anchoring but I'm not going to cover them in this video because these use cases right here cover 99 of what you would ever need to do and some of those more advanced features may change because like I said this is very experimental the next thing I want to show you is actually how to implement this feature right here where as you can see I have this really cool context menu and as I change the size of my screen you can see things are moving around exactly as they should I mean this is like the ideal scenario for how you want to have these different things pop up and again this is implement invented entirely inside of CSS before I do that though I do want to mention that there's a great article that covers this entire property in depth it's on the Chrome blog here I'll link this article down in the description for you but this is actually where I pulled this example from this is straight from that blog article I just modified it slightly to make it actually work because some of this code is a little bit out of date with the newer features so really quickly what I've done is I've actually copied over the code for this into our playground so we can actually mess around and see what's going on inside of here and to really break down exactly what's going on they're pretty much using a couple pop over elements combined with the anchor element so if we scroll down to the specific sections that we care about we care about the buttons that we can click on for example this nav right here is a pop over nav and this div right here is also a pop over inside of it and then finally we have this div which is a pop over as well and these represent our different sections for example this one Ladle context is just this button right here so this entire menu is inside of this nav for the context section then you can see that we have the share and playlist and these are just both two different menus you can see if we open this up it's a very simple menu where I open it up and you can see we have our different different sections inside of both of those the way that these different elements toggle around each other is just by using this popover API so if we go into context here for example and we scroll down you can see we have a popover Target for our button that points to this share menu and we have another pop over menu Target here that is pointing to the playlist then finally up here you can see we have a popover Target for opening the entire context menu so all of this is just done using the popover API as well as the CSS to Anchor everything in place if we look at the actual CSS for anchoring everything you can see it looks a little bit complex but it's really not quite that complicated you can see we're naming all of our anchors so that's relatively straightforward we're just giving each one a specific name then we're just making sure that we're rotating the actual icon so you can see here that these different icons for the arrows are being rotated based on if it's open or not that pop over open is just a essentially an attribute just like the checked attribute that you can use to determine if the popover is currently showing or not then finally what we're doing down here is just determining our position so we have our position fall back here as well as what our actual anchor is going to be for each one of these so that's really straightforward we're just saying hey this share has this anchor playlist has this anchor contacts has this anchor and then our position fallback we're just trying to position it essentially in all of the different positions we could do top left bottom right and so on and that's how we are getting the point where if I scroll my page you can see if I reopen that again that it's actually jumping between the different sides of my page based on how far my screen is to see if it has space on the left right and so on if I were to move this around for example I move it to the top you can now see the menu opens on the bottom if I move it to the bottom you can see the menus opening on the top and so on and this is just the tip of the iceberg with the really cool features you can do if you actually scroll down to the bottom of this article there's a bunch of different examples of really cool things that you can do for example here's a form and as you can see when I click on this form I have this little icon for this hand following me around to all these different sections and the really nice thing is if I try to click sign up you can see the hand appears which moving around perfectly and again there's absolutely no JavaScript this is just HTML and CSS using that anchor element to move everything around we have another here a bar chart that's anchoring to be determining like where the minimum maximum values are there's a little bit of JavaScript to make it so these like sliders work but otherwise it's entirely built out of CSS again same thing here this one uses a little bit of JavaScript to actually do the resizing but we have these little resize icons and then we even have like a select menu that we can do and again this one absolutely no JavaScript at all it's entirely CSS so it's really just the tip of the iceberg all the different cool things you can do I mean tool tips is like the obvious thing that you can do such as this you can really take this as far as you want and I'm super excited for this to become a real feature we can start using today now if you want to stay up to date with the most Cutting Edge CSS features make sure you're subscribed to the channel I'll cover them as I learn about them or check out some of my other videos linked over here where I cover the most Cutting Edge CSS features with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 261,712

Keywords: webdevsimplified

Id: B4Y9Ed4lLAI

Length: 15min 38sec (938 seconds)

Published: Tue Aug 29 2023