Up next in 10
Yet Another 5 Must Know CSS Tricks That Almost Nobody Knows
517 views
Feb 7, 2024
"Yet Another 5 Must Know CSS Tricks That Almost Nobody Knows" is an informative video showcasing lesser-known CSS techniques that can enhance web design and development projects. Throughout the video, viewers are introduced to five unique CSS tricks that offer creative solutions to common challenges in front-end development. These tricks may include advanced layout techniques, creative styling approaches, or unique ways to leverage CSS properties for specific effects. The tutorial provides clear demonstrations and explanations for each trick, allowing viewers to understand their implementation and potential applications. Whether you're a beginner or an experienced developer, this video offers valuable insights into optimizing CSS code and exploring innovative solutions for web design projects.
View Video Transcript
0:00
Now this final property is going to change the way that we write CSS in the coming years
0:04
because it's going to completely replace pretty much everything you know from padding, border
0:09
margin, and so on. Welcome back to WebDev Simplified. My name's Kyle and my job is to simplify the web for you so you can start building your dream
0:19
project sooner and one way I want to help you with that is by giving you a free CSS selector
0:24
cheat sheet that covers every single CSS selector you need to know. It's linked down into the description below and if you down
0:29
download it, I'm going to throw in a bonus cheat sheet as well, so make sure you check that out
0:33
And for the very first property that I want to cover, it is one that is incredibly useful
0:37
and it is called the clamp property. Now, you may be used to dealing with this when it comes to widths and heights, because
0:42
for example, you know, you can set a min width, you can set that to, you know, like 10 pixels
0:47
You can come in here and set a max width to 100 pixels, let's say, and then you can
0:52
come in here and say, you know, that the normal width is going to be something like 10 percent or whatever
0:56
And now the width is going to try to be 10%, but it's never going to get smaller than 10 and never larger than 100 pixels
1:02
And if we save and we change this around, you can see that this thing is growing and shrinking
1:05
with my screen size, but it's never going to get smaller than 10 pixels, and it's never going to get wider than 100 pixels
1:11
And this is great for wits and heights, but what happens if you want to clamp something else, like the border of an object
1:16
We could come in here and say that we have a 1 pixel solid black border, and as you
1:22
can see, we now have that solid black border going around it. But what happens if we want this to be able to scale
1:26
We want it to be anywhere between, for example, 8 and 12 pixels, and we want to be
1:29
want to scale based on the width of our screen. That is where this clamp property comes in
1:34
The first thing you specify is the minimum size. In our case, eight pixels is our minimum
1:38
Then the second property is going to be the thing that you want it to be. This would be like
1:42
width in the width version. This first thing is min-width, then width, which in our case is just
1:46
going to be here, 5v-W. We're going to have to scale with our view width. And then finally
1:51
we have our maximum, like our max width. And this is going to be 12 pixels. So now if I save
1:55
you can see that we have this border. And as I increase my screen size, the border is actually
1:59
going to grow with my screen size until it caps out at that 12 pixels and then it is done growing
2:04
And same thing here, it's going to shrink all the way until it gets down to 8 pixels. And as you can see now that it's at 8 pixels, the border is no longer shrinking down at all
2:11
Clamp is an incredibly useful property because you can use it on pretty much anything at all
2:15
that you want. And it allows you to do easy scaling without having to worry about media queries, percentages
2:20
or anything crazy like that. It just allows you to do all of it right here inside of one selector
2:25
Now this next property is one I've been waiting for since grid came out, and that is the ability to have subgrids, essentially grids inside of other grids that follow the parent grid
2:34
It's not possible to do a CSS right now, but you can do it with subgrid
2:38
Unfortunately, though, subgrid is only available in Firefox, which is why I have Firefox open right now to test this out
2:44
So all we have inside of here is a simple div with a grid class and we have a bunch of items inside of there and then we have a subgrid that also has some items inside of it And if we go up to our CSS real quick our grid is pretty simple We just have four different columns all 50 pixels wide and all of our rows are also 50 pixels tall
3:02
and we have a gap of 10 pixels between each one of our elements. Then we have our subgrid, which is also a display of grid
3:07
and you notice that our template columns and our template rows are both set to subgrid
3:11
That essentially means it inherits all of the template columns and template rows from the actual grid parent
3:17
So it's inheriting these 50 pixel wide columns with four of them, and it's inheriting that 50 pixel tall row
3:23
Then what we're doing is specifying the space our subgrid takes up inside of our normal grid
3:27
We're essentially saying it takes up three different columns between one and four, and it takes up three different rows between two and five
3:33
And our items are going to be red, but if they're inside of our subgrid, they're going to be green
3:38
And that goes to display over here where we have all these red items all the way around here, and we have our green sub items in the middle here
3:43
And it's because this area right here is where I told our subgrid to take up its side
3:47
space. And you'll notice, I didn't specify what the rows or columns look like for our subgrid
3:51
It's inheriting from the parent. So if we change this to be 40 pixels wide, you'll notice that
3:55
our child's subgrid here is also making sure all of the rows are 40 pixels wide
4:00
We can go back to 50, and as you can see now here, we have 50 pixel wide columns. And if you want, we can also change the gap. We could say that our gap is going to be zero
4:07
for our subgrid. Now you can see all these items have a zero gap. It'll be a little easier if we
4:11
put one pixel here. You can see there's only one pixel space, but it still follows the same
4:15
general grid template columns specified up here. We just can override that gap if we want to
4:20
Otherwise, that gap will be inherited. And you're probably a little confused why there's this gap here
4:24
and these red elements are kind of going around and then showing up all the way down here. And if we enable our subgrid here
4:30
you can see that our subgrid is essentially this section that's being highlighted in blue. It's this three by three right here
4:35
because we told it to take up three columns and three rows. So it's taking up all of this space
4:39
It's reserving that space within the parent. And then all of the rest of our items are just filling in around it
4:44
because they aren't part of the subgrid. only these six items in our subgrid to take up that space
4:48
So if we start adding more items, you can see they fill up inside of that subgrid. And if we remove them, you can see, obviously, there are less items inside of that subgrid
4:56
But these other items just fill in around that space. They can't go inside the subgrid because they're not inside of our subgrid
5:02
They're only inside of our parent grid here. And with the Firefox Dev tools, we can kind of toggle on and off the different grid displays
5:08
so you can really see exactly what's going on, which is one reason the Firefox Dev tools are really amazing
5:12
Now, like I said, this is only available in Firefox right now, which kind of sucks, but once
5:16
subgrid comes to all the browsers, I can guarantee you I'll be using this all the time because
5:19
it just allows nesting grids to be so much easier to work with, and I run into problems all the time
5:23
where I need to nest grids, and there's no good way to do it right now other than subgrid
5:28
Now, with the idea of browser support freshen our mind, I want to talk about how you can actually
5:32
check browser support inside a CSS using the at supports keyword. Actually in an entire video on this that I'm going to link in the cards in description for you
5:39
but a quick overview. Essentially, all you have to do is say at supports
5:43
and then inside of parentheses you put the property value you want to check So you want to say you know does this support a subgrid So we going to say does this support grid template columns of subgrid
5:53
Okay, so if this is true, then the code inside of supports will run. And if this is false, as in this browser does not support this property, it will not run this code
6:01
So we can say that we're going to have subgrid, and we're going to change the background color to be red
6:06
Actually, let's make it green. So if we support subgrid, this will turn green
6:10
And you notice it's not turning green because we're in Chrome. Chrome does not support subgrid
6:15
But if we go to something that Chrome does support, let's just say, for example, we check
6:18
does this support display grid? Well, Chrome does support display grid. So now you can see that this has turned green because the at supports is true
6:26
So what you want to do is have a fallback code, for example, in this normal dot subgrid
6:30
we would have our fallback for if we don't have a subgrid. And then inside of our ad supports where we have subgrid, then we can write out the actual code
6:37
for subgrid itself. This is really useful for you have some like performance concerns or if there's something
6:42
you want to do that can only be done with certain CSS such as subgrid, you can make sure
6:46
that'll work on browsers that support it, and then on browsers that don't support it, you can have some other type of fallback design that you can use to support that syntax
6:54
instead of having to use the actual subgrid syntax, just write it so it looks slightly different
6:59
Obviously, these background colors are kind of contrived, but it is a really easy visual way for you to see exactly how this works
7:04
Really, the main use case for ad supports is to make it so that you can use the future of CSS
7:09
right now without having to worry as much about browser compatibility, because the browser
7:12
that can support it will use these properties while the browsers that don't support it you
7:16
can have some type of fallback for and like i said again i have a full video on this only in the
7:20
cards and description down below the next property i want to talk about is a pretty simple one you've
7:24
probably seen on quite a few websites before and that's the idea of scroll snapping so essentially
7:28
we have all these different containers and with scroll snapping when i scroll it should direct me to
7:32
exactly the top of the next element in the top of the next element top of the next element and so on
7:37
So in order to do that, we need to essentially set up a scroll, snap, align on the things that we want to snap to
7:43
And we're going to say start because we want to align them with the start of the element. Then what we need to do is select the thing that's going to be scrolling
7:50
And it's important if you're doing this on the body that you select both HTML and body
7:53
because depending on the browser you use, only one or the other will work. So if you select both, it should work in all browsers
8:00
And then from here you can select your scroll snap type, and you can determine if you want it to be mandatory or proximity
8:05
I'm going to show you both of them. And you can also define the dimension. In our case, we only want to snap on the wide dimension, and we're making it mandatory
8:12
which means it will always do the scroll snap. So now if I save, and if I come in here and I scroll somewhere, let's say I stop right here
8:18
it's going to snap me immediately down to the screen section. If I scroll here, again, it's snapping me down to purple
8:23
If I scroll here, it's snapping me back up to the top of the purple. That's what mandatory does
8:27
It will always snap you to the next closest element. With proximity, instead what's going to happen is as you're scrolling
8:33
let's say you kind of stop in the middle somewhere, there's not going to be any snapping. But if you stop close to an element it going to snap you down to that element So it only going to snap you when you get close to an element instead of forcing you to always be stuck within these different snap positions Now it really kind of scary to be messing with the user scroll ability so I recommend
8:50
that you only really do this in specific scenarios where it's a good idea to snap them to those
8:54
specific points because if you do too much messing with the user's scrollability, they're going
8:59
to get frustrated and leave your site, so make sure that you only use this in specific scenarios where it really makes sense
9:04
Now this final property is going to change the way that we're going to change the way that we're going to write CSS in the coming years because it's going to completely replace pretty much everything
9:11
you know from padding, border, margin, and so on. And that is the idea of CSS logical properties
9:18
These properties are essentially ways that you can define CSS styles. Instead of using left, right, top, bottom, you're going to be using start and block inline
9:26
very similar to how flexbox has justified in a line, and depending on the orientation of your
9:31
flex box container, it's either going to be horizontal or vertical positioning
9:35
This is the same thing with logical properties. Depending on the way that your writing mode is, for example, we have left to right here
9:40
what if we have a vertical writing mode, for example, where we're writing vertically instead
9:44
of horizontally, but we want to maybe change how our padding and margin are going to work
9:48
If we just use a normal padding where we say, you know, padding top is going to be 10 pixels
9:53
you can see this padding is at the top of our element, but it's not at the top of our text
9:57
If we have the left to right, you can see it's showing up above our text, but when we're doing
10:01
this vertical right to left, you can see top should be over here above our text, but it's actually
10:05
shown up at the top of our container. This is where those logical properties come in
10:09
Instead of doing padding top, you can say padding block start. What this is going to do is going to be the block direction, and it's going to be the start
10:17
So in our case, for the normal writing mode, left to right here, it's going to show up
10:21
at the top of our container because block is going to be the vertical dimension for normal writing mode, and start is going to be the top
10:27
But if we change our writing mode to be vertical right left, you can see now that padding
10:31
is showing up over here on the right-hand side of our container. But that's because that is the start
10:35
of the block dimension when you're in the vertical right-left mode. If we change this to vertical left-right, you can now see that our padding is over here
10:43
on the left-hand side, and that's again purely because of the fact that our block is starting
10:47
on this left-hand side now instead of starting on the right-hand side
10:51
These different dimensions for padding, margin, border, and so on are all going to be super
10:55
super important as CSS starts to mature, and we have different writing modes being more common
11:00
on the internet, so it's going to be inevitable that these different types of padding are
11:04
are going to replace the current padding margin and border that we are currently using
11:08
Unfortunately, browser support isn't really 100% there for a lot of these, and it's going
11:13
to take quite a while until it gets to that point, but this is something you should definitely know because it will change CSS completely
11:19
And speaking of changing CSS completely, if you want to change your CSS skills for the better
11:24
make sure you check up my free CSS selector cheat sheet in the description down below, and if you
11:28
download that now, I'm going to throw in a bonus cheat sheet for you as well, which are going to completely revolutionize your CSS skills
11:33
Thank you very much for watching. and have a good day
#Internet Software
#Programming
#Software