Up next in 10
CSS Anchor Is The Best New CSS Feature Since Flexbox
1K views
Feb 7, 2024
Explore the latest and most powerful CSS feature since Flexbox with this enlightening tutorial - "CSS Anchor Is The Best New CSS Feature Since Flexbox." In this video, you'll uncover the capabilities and potential of the CSS Anchor feature, gaining insights into its revolutionary impact on web design. The tutorial delves into practical applications, showcasing how CSS Anchor can enhance layout structures, improve responsiveness, and streamline your styling workflow. Whether you're a seasoned developer eager to stay ahead of the curve or a learner looking to grasp cutting-edge CSS features, this guide provides valuable insights. Join this tutorial to discover why CSS Anchor is being hailed as a game-changer, and learn how to leverage its capabilities to create more flexible and efficient web layouts. Stay at the forefront of web development by embracing the best new CSS feature since Flexbox.
View Video Transcript
0:00
Would you believe me if I told you that this doesn't require any JavaScript at all, it's
0:05
just HTML and CSS. And that's thanks to two new features, one is an HTML feature and one is a CSS feature
0:12
and these features combined together I think is going to change CSS as much as Flexbox
0:17
and Grid changed CSS years ago. Welcome back to WebDevSimplified, my name's Kyle and my job is to simplify the web for
0:26
you and I'm going to absolutely blow your mind with this CSS feature because as you
0:30
can see as I'm resizing my browser, this nested context menu is properly moving around so
0:35
it's always on the screen, I can click to close out of it, I can click to open up things
0:38
inside of it and swap around what I'm actually viewing, it's absolutely amazing what this
0:42
can do and this is with just CSS and HTML, there is absolutely no JavaScript on this
0:47
page at all. So in order to understand exactly what's going on, we first need to take a look at a simpler
0:52
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
0:57
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
1:03
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
1:10
It's a pretty common thing that you may want to do, but generally it requires you to use a bunch of JavaScript or download a JavaScript library to handle the positioning, but now
1:17
you can do this with just HTML and a little bit of CSS. So the first thing I want to talk about is the popover API that's added to HTML
1:24
If you've seen my video on the dialog HTML element, I'll link in the cards in description
1:28
for you, it's somewhat similar but a little bit more customizable and requires no JavaScript
1:32
at all. In our case, you can see that we have this div that says extra inside of it
1:36
I essentially want to render out this extra div off to the side here anytime that I click
1:40
on this eye icon and I want it to be essentially like a tool tip pop up that positions itself
1:44
exactly where it needs to be no matter what. So the first step is to turn this into a popover element
1:48
So to do that with the HTML popover, all we need to do is take whatever element we want
1:53
to be the like tool tip thing that pops up. We just need to add the popover attribute to it
1:58
This is going to say this is a popover element. And now when I save, you can see the element is automatically disappeared, which is great
2:03
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
2:09
So you don't have to do any fancy on clicks or anything like that. All you need to do is inside of your button, just specify a popover target and needs to
2:15
be all lowercase. And we set this to the ID of whatever element we want to be popping over
2:20
So for example, we can set this to have an ID of like info
2:24
And then if we set the popover target here to info, now when we click on the button
2:28
it's going to open this up. So you can see if we click here, it's opening that tool tip up
2:33
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
2:37
This kind of gives us like a more modal style dialogue element, very similar to the HTML
2:42
dialogue element. But we can take this a step further and actually position it exactly where we want using the
2:46
most amazing CSS feature I've seen in years, which is the anchor CSS
2:51
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
2:55
So we'll say that this is going to be anchor and we just need to give it a specific target
2:59
that it's anchoring to. Similar to how popover target pointed to the thing that we wanted to pop up, this anchor
3:04
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 want it to revolve
3:09
around this button. We're going to give this button an ID. We'll just give it an ID of button
3:15
And now we can see that our anchor is going to be anchored to the element with the ID of button
3:19
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
3:24
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
3:29
it's so experimental. But if you just add a little bit of CSS styling, you can make it show up next to that element
3:34
for you. So what we can do is we can select the popover element that we have. So we'll go into our styles and we'll just select anything that is a popover element
3:41
just like this. So what we want to do is we want to first take the inset and set it to unset
3:45
That's because by default, the browser has some styling on how it sets like the top left
3:49
right, and bottom. And inset is just going to remove all the automatic top left, right, and bottom styles
3:54
So you can see when we click on this, it's still not showing up like we want it to, but that's perfectly okay
3:58
The next thing we want to do is set it positioned based on where it actually is on the screen
4:03
So what we can do is we can say that we want this tool tip to show up above this thing
4:06
We want the bottom of our tool tip to essentially be the same as the top of this eye icon
4:11
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
4:15
Well, we use this anchor function, so we can say anchor here, and we want to get the top
4:19
of the thing that we're anchoring towards. Now if I give that a save, I open this, you can now see that the very bottom of this is
4:25
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
4:32
Essentially anywhere this eye element moves, my tool tip or popover is going to move with
4:35
it because it is anchored to that specific position. I can do the same thing by anchoring the left side, for example
4:41
I could get the anchor here and let's just get the center of it because I want to anchor it to the center
4:46
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
4:51
Now in order to make it so that this entire thing is centered, we can just do a quick translate
4:55
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
5:01
We can even give it some margin or whatever if we wanted. So we could say we have a margin of like 0.25rem
5:06
That's just going to give it a little bit of space. We want this to only be on the top and bottom
5:10
So we'll just come in here like that. There we go. So now it's only on the top and bottom
5:13
So as you can see, with just a couple lines of CSS and a few lines of HTML, I essentially
5:18
created a tool tip popover that's anchored to a specific element on my screen. And no matter where I move around, it's always going to be anchored to that specific element
5:25
You will notice that when I click on this and then click somewhere else, it closes this tool tip
5:29
Maybe I want this to stay open until I re-click on the eye button. There's actually a way that you can configure that
5:34
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
5:41
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
5:48
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
5:53
We can also make it so that our button does different things when we click on it
5:56
So we can do is we can say the popover action. We want to make sure this is the popover target action
6:02
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
6:08
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
6:14
So as I click on it again or click other places, you can see it's not closing or I could change
6:18
it to hide. And if it's hide, that means whenever I click on the button, it's going to hide it
6:21
But by default, it's going to be toggle and that's what we're going to leave it at. So we like it like that
6:25
But now I can click outside of 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
6:32
all the complexity comes is with all of this anchor stuff, which is the more CSS side of things
6:37
But if you want to just get started with just these popovers, things like popover target, popover target action, it's actually almost stable in browsers
6:43
If we look at the can I use for popover, you can see it's already in Chrome
6:47
It's already in Edge. It's in the technical preview for Safari and it's behind a flag in Firefox
6:52
So it's going to be getting into mainstream use across all major browsers relatively soon
6:57
And even just a couple of months ago, this was at like 30%. Now it's at 56%
7:01
So I could easily see this within maybe six months being something that you can actually start using on your websites, which is really exciting
7:07
Now anchor, on the other hand, doesn't even have a page yet on can I use
7:12
And that's just because it is so experimental. There's really nothing at all that supports anything related to anchoring
7:17
But if you're using the Chrome Canary version and you have made sure you've gotten into
7:21
your Chrome flags and you enabled experimental web platform features, now you can actually
7:25
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
7:32
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
7:39
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
7:45
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
7:51
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
7:56
The way that you can do that is you can give things an anchor name. So here we have this button
8:01
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
8:07
And in CSS, this anchor name must start with two hyphens at the beginning, just like if
8:11
you're creating like a CSS variable. We can call it whatever we want to call it
8:15
Let's just call it inside of here our I button. There we go
8:20
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
8:27
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 I button
8:33
Now it's now anchored together because we set our default anchor for everything in our popover is the I button
8:37
And we said our information has that specific name. Now when I click, you can see it's properly linked together
8:42
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
8:49
So I could say it's going to be linked to the I button just like that as the very first
8:52
property into my anchor. Same thing down here. And now you can see that that is working just the same as it was before
8:58
So you can use multiple anchors inside of one thing and link them together that way
9:02
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
9:07
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
9:15
default because if I'm going to be using the same anchor, it kind of makes sense to just set it as a default
9:19
There we go. Now, the next really cool thing about this feature is you'll notice when I start to scroll
9:23
down my page, my tooltip goes off the page and that's generally not something that you want
9:28
There's actually a way to get around this by using something called a position fallback
9:32
You know, inside of CSS, you can create things like key frames and so on. You can also create something called a position dash fallback
9:38
And this position fallback is really interesting because it essentially tries to position your
9:42
tooltip in a bunch of different places until it finds one where it fits the entire thing
9:46
on the page. This is one of the hardest things to do in JavaScript when you're creating your own custom
9:51
tooltip library. Trust me, I have videos on how to do it and they're quite long, like 45 minute long videos
9:55
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
10:03
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 to bottom because I want to first position
10:10
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
10:16
position your code at whatever you set inside of here. So all your left, right, top, bottom positions, it's going to try all of those
10:22
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
10:27
So this first one is going to be for positioning things at the top. Well, we already have our code for that
10:30
I'm just going to copy that over just like this. There we go. Our bottom is going to be anchored to the top
10:34
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
10:42
right here. Now what I can do, and let's just make sure our left is actually positioned for both of
10:47
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
10:53
of this, which is top to bottom. Now if I go to save and I open this up and I scroll, you notice as soon as it no longer
10:59
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
11:07
with whatever the last try block is. So if all of these fail, it'll just render it in whatever the last position is
11:12
So again, to reiterate how this exactly is working, we set a position fallback, which
11:16
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
11:23
it finds one that works. And once it does, that's where it's going to position the element using the top left
11:27
bottom and so on. Now there's a few more advanced features inside of anchoring, but I'm not going to cover them
11:32
in this video because these use cases right here covered 99% of what you would ever need
11:36
to do. And some of those more advanced features may change because like I said, this is very experimental
11:41
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
11:46
And as I change the size of my screen, you can see things are moving around exactly as they should
11:51
I mean, this is like the ideal scenario for how you want to have these different things pop up
11:55
And again, this is implemented entirely inside of CSS. Before I do that, though, I do want to mention that there's a great article that covers this
12:01
entire property in depth. It's on the Chrome blog here. I'll link this article down in the description for you
12:07
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
12:13
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
12:18
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 popover
12:25
elements combined with the anchor element. If we scroll down to the specific sections that we care about, we care about the buttons
12:31
that we can click on. For example, this nav right here is a popover nav, and this div right here is also a popover
12:36
inside of it. And then finally, we have this div, which is a popover as well. And these represent our different sections
12:41
For example, this one ladled context is just this button right here. So this entire menu is inside of this nav for the context section
12:48
Then you can see that we have the share and playlist, and these are just both two different menus
12:52
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 sections inside of both of those
12:57
Now, the way that these different elements toggle around each other is just by using
13:00
this popover API. So if we go into context here, for example, and we scroll down, you can see we have a
13:05
popover target for our button that points to this share menu. We have another popover menu target here that is pointing to the playlist
13:12
Then finally up here, you can see we have a popover target for opening the entire context menu
13:17
So all of this is just done using the popover API as well as the CSS to anchor everything
13:21
in place. If we look at the actual CSS for anchoring everything, you can see it looks a little
13:25
bit complex, but it's really not quite that complicated. You can see we're naming all of our anchors
13:30
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
13:36
So you can see here that these different icons for the arrows are being rotated based on
13:40
if it's open or not. That popover open is just essentially an attribute, just like the checked attribute that you can
13:46
use to determine if the popover is currently showing or not. Then finally, what we're doing down here is just determining our position
13:52
So we have our position fallback here, as well as what our actual anchor is going to be for each one of these
13:57
So that's really straightforward. We're just saying, hey, the share has this anchor, playlist has this anchor, context
14:01
has this anchor, and then our position fallback, we're just trying to position it essentially
14:04
in all of the different positions we could do, top, left, bottom, right, and so on
14:09
And that's how we are getting to 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
14:16
on how far my screen is to see if it has space on the left, right, and so on
14:20
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
14:23
If I move it to the bottom, you can see the menus opening on the top and so on
14:27
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
14:33
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
14:39
me around to all of these different sections. And the really nice thing is if I try to click sign up, you can see the hand appears, so
14:44
it's moving around perfectly. And again, there's absolutely no JavaScript. This is just HTML and CSS using that anchor element to move everything around
14:51
We have another here, a bar chart that's anchoring to be determining where the minimum and maximum
14:55
values are. There's a little bit of JavaScript to make it so these sliders work, but otherwise it's
14:59
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
15:05
little resize icons. And then we even have a select menu that we can do
15:08
And again, this one, absolutely no JavaScript at all. It's entirely CSS
15:12
So it's really just the tip of the iceberg, all the different cool things you can do
15:16
I mean, tooltips is the obvious thing that you can do, such as this, but you can really
15:19
take this as far as you want. And I'm super excited for this to become a real feature we can start using today
15:24
Now, if you want to stay up to date with the most cutting edge CSS features, make sure
15:28
you subscribe 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
15:34
edge CSS features. With that said, thank you very much for watching and have a good day
#Email & Messaging
#Flash-Based Entertainment
#Programming
#Search Engine Optimization & Marketing
#Software
#Web Design & Development