Up next in 10
5 More Must Know CSS Tricks That Almost Nobody Knows
3K views
Feb 7, 2024
"5 More Must Know CSS Tricks That Almost Nobody Knows" is an educational video highlighting five additional lesser-known CSS techniques that can enhance web development projects. Viewers are introduced to advanced CSS tricks that offer creative solutions to common challenges faced in front-end development. These tricks may include innovative layout techniques, unconventional styling approaches, or unique ways to leverage CSS properties for specific effects. The tutorial provides clear demonstrations and explanations for each trick, enabling viewers to grasp their implementation and potential applications effectively. Whether you're a novice or an experienced developer, this video offers valuable insights into optimizing CSS code and exploring creative solutions for web design endeavors.
View Video Transcript
0:00
And I've seen some crazy JavaScript solutions to try to do this when it's really just one single line of CSS
0:09
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 project sooner
0:16
So if that sounds interesting, make sure you subscribe to the channel for more videos just like this
0:20
Now in this really simple example, I have a button class up here that just defines all the styles for the button so you can see on the right here
0:26
We haven't minimized because it's not important at all. And in this button style right here, we have a transform that scales the button up slightly and rotates it slightly
0:33
And then down here we have four instances of that button. But you'll notice that some of them have this class big, some have the class tilted
0:39
and finally the last one has the class big and tilted applied to it. And all that these classes are going to do is change our scaling to be larger or make our rotation to be the opposite
0:48
So big will make it larger and tilted will make it an opposite rotation. But the problem is with transform, this is pretty difficult to do
0:54
So I'm going to show you how you would by default through this. and then I'm going to show you one trick that changed how I use transform completely
1:00
So what's just coming here, we'll say dot big, and we know that we want the scale to be larger on this one
1:06
so we're going to say transform scale of two. And this is essentially going to be two times as big
1:10
And now when we save this, you're going to notice that these items are twice as big. But you'll notice they lost their rotation
1:15
And that's because when you define transform, we're overriding the entire transform. So this entire transform appears being overwritten by this one right here
1:22
So we need to copy down this rotation to keep it saved. and now you can see they're properly rotated
1:27
If we try to do a similar thing with tilted, we know that in this, we want to essentially reverse our rotation
1:33
so we'll say transform, and we want our rotation to be negative 10 degrees
1:40
And again, if I say this, you'll notice they're rotated, but the one with the class of big, which is our final one
1:44
no longer is big. And that's because we need to make sure that we keep our original scale of 1.2 inside of here
1:50
That's going to make these slightly bigger, but they're still not as big as they should be. This final one should be as big as the second one
1:55
So what we need to do is have another class here for dot big and dot tilted
1:59
And inside of here, we essentially want to have both these transforms combined
2:03
So our scale is going to be two and our rotation is negative 10. And now this one is properly built and tilted the opposite way
2:09
This one's tilted and default. This one's big and not tilted, and this one up here is just the default one
2:14
But this is a lot of code. What happens if we have, you know, five different classes
2:18
Then we are going to have so many different permutations of all of this code, and it's becoming
2:21
so difficult to work with. And this is where CSS variables come in because they can. take all of this and make it dead simple to work with
2:28
So we're going to start up here with our button class. Our scale, we know by default, is going to be 1.2
2:32
but we're going to store this in a variable. And this variable, we're just going to call here something along the lines of scale
2:37
And then we're going to default it to 1.2. And if you're unfamiliar with how CSS variables or custom properties work
2:43
I have an entire video on it. I'll link into the cards and description for you. But essentially all we're doing is defining a variable called scale with a default of 1.2
2:49
Instead of here, we're going to define a variable called rotation. We're going to give it the default value of 10 degrees
2:55
And there we go and we can even put this on a different line make it a little bit easier to read so we have our scale which is the scale variable and rotate which is our rotate variable Then in our big class we don redefine our transform We never going to redefine our transform We just going to come in here and change our scale to B2
3:10
make sure that's our scale variable. In Tilted, we're just going to come in here, and we're going to change our rotation
3:15
And our rotation, if I spell that properly, is going to be set to negative 10 degrees
3:20
And we can get rid of this class down here completely. So now you can see this is so much easier to work with
3:24
We have just single transform defined up here, which has all of the, of our default values, and then we define all of our overwrites
3:30
And the nice thing is, since these are CSS variables, we don't have to worry about combining big and tilted together because we're not ever overwriting anything
3:36
And when I save, you'll notice the result on the right is exactly the same. Nothing actually changed. But this code is way easier to read, and I can extend this as far as I want
3:44
If my transform has 50 different variables inside of it, I would just need 50 classes
3:48
and that's it. While in the other example, your class list would explode so large you would never be able
3:52
to keep track of any of it. Another really great thing about this approach is if for some reason, you know
3:56
we want to change our big scale to be three, well, we change it in one place, and it updates everywhere
4:00
But in the other code, we had to change it in every single class that had this big reference
4:04
So we had to change it in big, then we had to change it in big and tilted. And if we had another one, we'd have to change it in big, tilted
4:09
and whatever that other one is, and it would just become snowball effect of things that you don't want to deal with
4:13
While with CSS variables, this is just dead simple to work with. This next concept really blew my mind
4:18
because I always thought it was something you needed JavaScript for, and that is the ability to resize elements
4:24
You can actually do this entirely, 100% with just CSS. Think about a text area component
4:29
You know that when you have a text area component, you can actually resize that inside the browser
4:34
but you can actually add that resizeability to any component you want
4:37
So I have this simple resizable class that have added to these two cards over here
4:41
And if I just come in here and use the resize CSS property, and I set it to, for example, both
4:46
well this will let me resize these horizontally and vertically. You can see I get the little grabber down here
4:50
I can drag them side to side. I can drag them up and down. As you can see, I can resize them all over the place
4:55
Also, I could change the little bit of the place. change this to resize only in the horizontal direction, which is generally probably something you'd
5:00
want to do. And now I can resize these horizontally, as you can see. So I can, you know, make them
5:05
really small. I can make them really big and I can make it, you know, kind of push into the other one
5:08
It's a super cool thing that you can do. One important thing to note, though, when you're doing
5:12
resizing, is you probably want to set your overflow to hidden just to make sure none of the
5:16
content expands outside the area that you're expanding and collapsing, and that'll just make it
5:21
a little bit of an easier experience to work with. Another really cool thing you can do is
5:24
actually set up restrictions. So I could say, you know what? I want a minimum width on this to be
5:28
400 pixels. I want the default width to be 500 pixels, which is what I already have set up right
5:34
here, essentially. And I want the max width for this to be 600 pixels. So if I save, you can see that
5:40
we have this, and if I shrink this down, it only likes me shrink it down to 400 pixels, and it only
5:44
makes me grow it up to 600 pixels. And if I tweak these a little bit, we'll just maybe say 300, 400
5:49
and 500, make it a little bit easier to fit on the screen. Actually, let's just go all the way down to 200, 300, and 400
5:56
Now as you can see I can shrink this down to 200 pixels all the way up to 400 pixels but it won let me go beyond those points So it a really cool way to make like dynamically resizable components and all I doing is using CSS no JavaScript nothing else just CSS This next property seriously is going to change CSS
6:13
and that is the idea of being able to maintain an aspect ratio, but not having to do a hack to get around to it
6:18
A lot of times when you're dealing with aspect ratios, you would use the hack of padding
6:25
top, and you would set it to some percentage based on your aspect ratio. So if you want like two by one aspect ratio
6:29
you'd do padding top as 50% and that's going to give you a 2x1 aspect ratio
6:33
It's a huge pain to do. It's kind of a hack. It doesn't make much sense
6:37
So CSS said, you know what, why don't we just add our own aspect ratio property
6:41
So if you want a 16 by 9 aspect ratio for like a video, for example, just use the aspect
6:46
ratio property, put in 16 slash 9, save, and now you have a 16 by 9 square
6:51
And you can see as I increase my browser size, the aspect ratio is perfectly being maintained
6:56
no matter what size my browser's at. Same thing down here, I want a one-by-one aspect ratio
7:00
I'm just going to set my aspect ratio to one by one. And now you can see, as I changed my browser size, this box is perfectly being resized
7:08
to the exact size to always be one by one. And if I specify, you know, a width in here of like 100 pixels, you can now see this
7:14
is essentially rendering a 100 by 100 square. Having this aspect ratio is great because it makes dealing with images and videos and
7:20
other things where you care about aspect ratio so much easier, especially when dealing with like flexible grid sizes where you don't know what the width is going to be, in our case
7:27
this 16 by 9 is full width, so we don't know, you know, is it going to be this wide
7:31
Is it going to be this wide? We can't set a manual width and height because it's dynamic, so aspect ratio just takes care
7:36
all that automatically for us. There is one slight downside, though, and that is, if we look at can I use for aspect
7:43
ratio, it's not the greatest support. As you can see, we get this out of here, Chrome and Edge have pretty good support for
7:50
this, it's entirely supported there, but Firefox doesn't have any support, and pretty much no other browser really has main support for this
7:55
So as you can see up here, the percentage is only about 65% of users. This is going to get better as time goes on, but it's one thing to be noted of
8:02
For aspect ratio, you can't really use it quite yet, but I'm so excited for this finally
8:07
lands in the browsers. This next tip is super simple, but really useful, especially if you're using JavaScript with CSS variables
8:14
So we have this simple div on our screen, just blue div, and you can imagine that this is like
8:18
a progress bar of sorts, and you want to be able to change this based on percentage. Well, in your JavaScript code, you're getting information about what percentage this
8:25
is and in JavaScript, you're setting this CSS variable called percentage to the exact percentage
8:31
of where you are in your download or upload or whatever is going on. And then we're setting our width to that percentage
8:36
But you'll notice something interesting. Our bar is still 100% full. That's because this percentage variable is just the number 20, so we don't know is this 20 pixels
8:44
20%, 20% REM. We don't actually know. So what we could do is, you know, have 20% right here, and now you can see our progress
8:51
bar has changed. But generally, when you're working with JavaScript and setting it CSS very, you know
8:55
you just going to be setting it to the value of 20 because you doing some type of math and you figuring out what the percentage is and the percentage is 20 So you set the variable to 20 and you want to convert this number 20 to an actual value that you can use inside your code so a percentage in our case Well to do that with CSS really easily you just take a calculation
9:13
and you take your variable you want to convert, and then you multiply it times one of the actual
9:17
thing you want. So we multiply it by 1%. And now when we save, you're going to see this 20 has been
9:23
converted to a percentage value, and it's properly showing up as a 20% on our screen, even though
9:28
our percentage variable is only set to 20. If we wanted to convert to pixels, we'd multiply. We'd
9:32
multiply by one pixel, and it now converts this number 20 to one pixel
9:37
And this is going to work for any value that you want. Let's say we want to do REMs. Now we convert this to RAMs, and you can see we have this really long bar because 20 RAM
9:44
is pretty long. Now you're not going to use this tip all the time, but knowing that you can convert between
9:48
different values and two different values using the calculation is super handy and something
9:52
I use a lot when I'm doing with JavaScript. This final topic is something that literally everyone is run into, and it's such a pain
9:59
to fix. And that's what happens when you try to scroll to an anchor tag on your page
10:04
So you can see where this anchor tag that goes to heading to. And if we scroll down, we have this heading to right here
10:09
And if we click on this link to go to heading two, you're going to know something interesting. Our heading shows up behind our actual header, our nav bar up here
10:16
That's because this is stuck to the top of our page. We're using position sticky to have it at the top, very similar to position fixed
10:21
And when we click this, it's covering up the thing that we're scrolling to. Terrible user experience, and it's something that's kind of a pain to fix
10:28
you use the property scroll padding top. So let me show you how you can fix this
10:32
Let's just come in here, we're going to select the root of our document. It's the same thing as the HTML
10:36
We're going to create a variable called header height. In our case, our header is 50 pixels wide, right up here
10:42
So we're going to go with a var here, and we're going to use our header height
10:47
This just makes it easier to repeat and use this header height in other places. So we set our height to 50 pixels
10:51
Nothing has changed at all. Then what we want to do is take our scroll padding on the top, so we'll say scroll padding
10:57
top, and what we want to do is we want to come in here, and we're going to say that is equal to our header height
11:02
So we'll use a var for that. And now immediately, if we save and we click this, you're going to notice it gives us
11:07
enough room above to see this actual header. You can see it scrolls right to the header instead of covering it, and we can go a step
11:13
further and just say that our scroll behavior is going to be smooth, so it smoothly scrolls
11:17
And now if we click this, you can see it smoothly scrolls down there right to where our header is
11:22
It doesn't cover it. It shows exactly where it is. And if you want a little bit of extra space, we can just throw in a calc here
11:25
And let's just say, you know, we want 10 extra pixels of space on the top
11:30
So we save that. Now we click. And you can see there's 10 extra pixels of padding above our heading where it's going to scroll to
11:36
This is something I guarantee you're going to run into if you have any type of navigation bar on your site and you're going to be navigating to different headers, links, comments
11:43
whatever it is. Having this simple trick of just adding scroll padding top solves all of those problems
11:47
And I've seen some crazy JavaScript solutions to try to do this when it's really just
11:51
one single line of CSS. If you enjoyed those crazy CSS tricks, then you're going to definitely love my full CSS selector cheat sheet
11:59
which is linked out in the description below. It gives you a cheat sheet of all the different CSS selectors, what they do, how they work
12:04
and how you can use them in your own projects, so I highly recommend you check that out. Thank you very much for watching and have a good day
#Development Tools
#Other