5 CSS tips every developer should know

Key Takeaways

Hello, my front-end friends. There are so many CSS techniques and features that people simply aren't aware of. And this can often lead to hacky solutions or writing a bunch of JavaScript that sometimes just one line of CSS can solve. Which is why I've put this video together where I'm looking at five of my favorite CSS features that not enough people are using and that solve common problems. As a bonus, none of these are using cuttingedge CSS that you'll have to worry about browser support for. though at the end I'm going to look at a bonus one that is a bit more cutting edge but it might be one of the biggest game changers to come to CSS since flexbox and so we're going to jump into this demo that I have set up right here where we're going to be first looking at single color gradients and that might seem like a really silly thing like why would you want a single color gradient the whole point of them is to have things go you know from one color to another but there's a lot of good use cases for them and we're going to be looking at two of them in this demo so the first thing we're going to look at is this button that's right here where we just have a a fun effect but what if I wanted that border to be a gradient. Well, we could use a border image for that. But with border image, you're never going to get the round corners, which is really frustrating. So, we can do that with a single the help of a single color gradient anyway. So, here where I have the border, I'm just going to switch this one over to trans parent instead. So, we no longer have our border and we got to spell trans parent correctly. So, we now have a border, but the border is transparent. And then I'm going to come in with a background on this. That's going to be a uh we'll go with the linear gradient and for I'm going to say - 455° and I already have a gradient set up as a variable. So we're just going to say gradient here and like that with a semicolon at the end. We're going to come in and we get a gradient there. And you'll notice something weird about it is around the outsides you sort of see the gradient starting over again or something weird going on. And it's because the gradient normally is only within the padding box and then it's repeating itself the way background images do. So it repeats itself on each side kind of in a weird way right now. And so to be able to fix that a little bit because we need it to be where the border was is we can just come here and I am using the shortand here. This is makes this trick a lot easier if you do use the background shorthand instead of the background image longand because we're going to be setting also the background origin which might be a property you don't know or use very often. But we're going to come here and say this is my border box which is going to take the gradient and pull it out into the border area. And you can see it's now filling up the entire thing. Where's the single color gradient? Well, that's coming right now where I'm going to come here and I'm going to say another linear gradient. So, we can have multiple images or background images on here. And this one is going to be for now red red. So, I can just write those. We'll switch these out in a minute to make something that looks a little bit better. And we can see that red is filling up the entire thing. But I can change this to be only on my padding box. And that means it's going to get pulled inside. And you can actually see the gradient is appearing on the outside there. Kind of neat, right? And of course, I don't want red red. I would come in with white white or whatever color variable you'd want for the the fill that would be on the middle of the button like that. And then we can come in and get that nice border that's coming on there like that. Now, there is a little bit of an easier way to write this, which might look a little bit weird, but instead of just white like this, eventually we're actually going to be allowed to do this, but you can see it's breaking right now. I think if you did this in Chrome Canary, it would work. All the browsers have actually implemented it, but it's really like just cutting edge a little bit. So, uh, you can just do the white white and it will work fine. Or you can come in with a white 0 0 and this will work as well because we're setting the color stops. Uh, so you can see just by doing that it works. Looks a little bit weird, so you might want to leave a comment for it, but uh, this is sort of an easier approach, especially because if you do want to change or transition this color, it's easier than repeating it two times. Again, single color stops are on the way, but they're sort of as of the time of recording this are really new. Check browser support cuz it might be better. I'll put a link to the browser support table in the description. Uh so maybe it's a viable option for you at this point. But uh you might have noticed when I did that, we're not transitioning the background color anymore. And what we can't do is actually transition the background right now the same way I was doing because I might want to just, you know, say I want the whole thing to fill in. I want that white to become transparent or something like that or whatever it is. I want to change I want to change the fill to the blue color. I don't know, something like that. But there is a way to do that with modern CSS. It's not part of one of my tips, so I'm not going to cover it now. I'll put a link in the description, but it's really fast to show it, and you can I'll remind you at the end of this video to check this out if you've never seen it before, but we can register custom properties. And when we register a custom property, what it allows us to do, if we go find our button again here, is instead of transitioning the background color, I can actually transition that custom property. So here, I can come in with my var gradient button fill. It's going to look exactly the same way cuz that is set to white right now. And then here I can change that custom property. So I actually transition this over 250 milliseconds. And then over here I can say that this is going to be my var or we can let's just say transparent even. And by doing that we can actually transition the gradient that was there because we're not transitioning the gradient, we're transitioning the colors within the gradient instead. Uh and then so maybe we want to change the color to white or whatever else. Yeah, if you don't know about the app property, again, I'll put a link in the description and I'll remind you at the end of the video because I want to look at more of what we can do here with these other tips that you should know cuz this is that was I guess a bon a second bonus tip cuz there's another one at the end like I said. But as I said, I do have another use case that I want to look at for the single color gradients. And we're going to do that over here where I have a hero image set up here right now where I'm actually going to come here and I'm going to say the background position is going to be bottom just to bring more of the image up so we can see now. And it makes my text a lot harder to read based depending on what's there, right? And sometimes we get these images where we need to have another layer on top of it and you end up creating an extra div or a pseudo class and then you're trying to position everything to add like an overlay on top of it to make sure that your text is still readable. Well, we can just do that with an extra layer here. So, I can come here where and just add a second background image where we do a linear gradient. And actually, if you want to save a character, you can also do this as a conic gradient. Uh, it's one character less, I think. And we can just say in this case, once again, white if we wanted to. And now we're just going to lose everything, right? So if I did the red uh the red red again, we would just get this full red that comes on top of it. Uh which we don't want. But it does mean we could come here and say something like HSL. And on my HSL, I'm going to do zero. I'm going to do a 0% for saturation, 100% to get pure white. But then we can say this is like a comma.3 or something like that. And then I'm going to do that 0 0 trick again so I don't have to repeat the same color. And now we're getting this color coming in that's like closer to white. And I go maybe I need it to be more white. So I darken my over or make the overlay a little bit more or a 75. And so I can easily add an overlay on top of an image. Still get the texture of it, but make sure my text is really easy to read. And with that done, it's time to move on to our second tip. These are going to be a little bit more fast-paced after that one. And this one is about user select. And I'm going to be looking at this example right here. Uh cuz we can use user select to change how people select text. So the first one is the one I generally don't want you to do, but there are use cases for it, which is our user select none. Um, and actually this there's uh use cases for this on like buttons or other things like that where the user might click on it. It's the small things where you wouldn't want to copy and paste the text. So like a button where you might want to do a user select of none. And it just means that if a user is either with a touch device or more with a mouse, if they're clicking and like accidentally dragging a little bit, they can't accidentally select any of the text because now we're saying that we can't select it. So, I'm doing that there. But let's just say I did that on my paragraphs. And then we do a user select of none. And now, if I tried to come into here to select my text, I can't select any of this. I'm clicking. You can hear my mouse going and I can't select my paragraphs. I've seen websites that do this to try and prevent copying and pasting and then they'll have like the right click is disabled and everything. Like, please don't do that. Allow users to copy and paste your text. Uh there's always ways around anything you try and do against it. It just makes a bad user experience. But for certain elements, sometimes it does make sense. Uh, also if you're doing like a drag and drop, you don't want text to be selected as the user's dragging across where it's something you can use to set its sight wide even when the user's dragging something and then disable it once they've let go. But we also have a few other options, uh, such as all. And all can be useful for certain things, though we need to be a little bit careful with it because it seems like something like this would actually be a really good example of using it, right? So say you had code blocks that you wanted and you could come in and on this in we could do our user select and make that all instead of on the text and then if the we click one time it selects everything and that seems like a really cool idea cuz then you can copy and paste code snippets really easily. But say you have a code snippet like this one I don't want all of that. I just want this user select of all well anything I do is selecting the entire thing. So please don't do that. So be really careful with that. I don't think this is the right use case for it. I would say if you have things like API keys that you know the user wants to select all of, that's a really good use case. Or anytime it's like a small thing where they just, you know, the user needs that entire string to copy and paste into something else. That's where you'd want to use the all. Uh the none could also get used on like things like footnotes or if you have like sub elements. So if a user is copying and pasting, they're not getting all those like one two three things coming through. So just a few ideas there. Uh but I will say if you do want to create like a code thing like this that's easy for users to copy and paste, which there should be. You should have like a copy button that's floating there. For that, I'm going to include a link to this post here from Salma who had this how to build and a copy and code snippet button and why it matters. I really would encourage you to give it a read. Uh so nice big copy button you can do there. But looking at how to build it and get it working the way you want it to, it's actually quite straightforward. So I'll include that down below in case you want to know how to implement that on your own projects. And actually talking about user select all and the all thing that we have there. Uh, I'm just going to switch this back over to text so it goes back to what it was. Uh, actually really fast. You might also see uh things about contain. It doesn't actually it's not a thing. It was supposed to be a thing. It's not a thing. I don't know. Um, I didn't spend too much time on it. I just know that if you see it, it won't do what it says it does. So, don't worry about it. Um, but yeah, looking at or speaking of the all there, we have another thing called the all property. And what the all property does is it sets the same value for all of the properties. Uh, right. So, if I said uh let's just say body for fun and I say all, I'm selecting every single property on the body and I'm setting it to one specific value. And that might seem a little bit strange cuz like obviously for rem here wouldn't make sense cuz form might make sense for your margin but it won't make sense for your font family or something like that, right? So why would we have an all property like this? And it only actually uh accepts a limited set of values. So we can only set like initial onset revert inherit as well as revert layer. And I'm not going to talk about revert layer today because it's a bit of an advanced use case if you're using layers in your CSS. Uh but just some things you probably don't want to do uh cuz some people think of it doing like star all initial, right? Let's like get rid of our user agent styles and we're just going to go all out. But oh my goodness, that breaks everything. And there's some extra styling that's coming in from my other styles up top, but like this is my CSS. This is my title I'm seeing here. uh the initial doesn't do what you probably think it would actually do because initial doesn't go back to the user agent style. So if you're trying to reset a style back to what it was, initial isn't doing that. Initial is going before the user agent styles are applied. And generally speaking, that's really bad. Uh there's times where you want that, but a lot of the time what you'd actually be after cuz another one is onset. Onsets just don't worry about onset. You probably don't want onset. You probably want revert. And what revert does is it goes back to the user agent style. And now my website's working fine or this demo is working fine because I all it's a low specificity selector and I'm I'm replacing it with all my regular styles anyway. Uh and what revert's doing is it's reverting back to the user agent style. And if you revert layer, it would revert to a previous layer. But again, I'm not going to worry too much about that one now. Now, why would you want to use this though? Like what's the real use cases? Cuz we saw we probably don't want to do it on our star selector anyway. Uh, but it could be where you have like a generic selector. And I have an A set up here. And on these links, you might have something where you using markdown to write a blog where you just might need some generic selectors for things that have styles on them. And in this case, I'm setting like a fancy underline coming on here. And that's fun. If you want to know how to do that, I'll put a link in the description to a video that explores that as well. But when you do this, it could also have unintended consequences. Like if we come back over to my button here and let's say on these buttons we didn't come in with this new styling uh that we were doing but we stayed just with a background color of uh was our var color blue. I think if I did that and we have our button that's coming there again you can see when I'm hovering on top of it I'm actually getting that weird line that's shooting through all of a sudden and that weird line that's coming in there is coming from the link here having a background image with some other things. and that background image on the hover is getting changed and it's showing up and it looks really terrible. And so this isn't the best or the most obvious use case in the world, but it's one of those things where it's like, okay, it's there's some weird thing that's being inherited and you're trying to figure out what it is and you, you know, it's annoying or there might even be several things coming in. So you have all these styles, you just go, "No, this one situation is so different from the generic styling I've set up. I can just come in with an all revert here." And now I know that I'm just resetting all of the styles on this element back to what the user agent styles were. And then I can style it up how I need and I don't have to worry about overwriting a whole bunch of existing styles again. So now when I hover on there, I'm not getting that weird line coming in because I don't have anything that's would be causing it anymore. This could potentially also be useful in media queries. If you're doing something it's like completely different and you're like, "Oh, I need to change so much stuff." And I'm just reover like I'm setting like seven things back to the default that they were before. You could come in with an all revert as well. Uh it's not something that I have to say I use terribly often, but every now and then I'm super happy to know that it exists and it's just a really easy way to set the slate clean for this one selector and then go from there and build on top of it. The next thing we're going to be looking at is masks. And I'm not a mask expert, but we're going to look at a fun use case. And then I'll look at some some cool stuff you can do. Or I'm going to look at a simple use case, I guess. I'm going to do it on this introduction that we have right here, where I'm going to come in with a mask. And masks use images, but as we've just seen, when we have images, we can do the gradients with them, right? So, I'm going to come in here with a mask just like this. And we're going to do this as a linear gradient. And let's just do red, black, and see what happens where the entire introduction area is nothing's happening. Why? Why is nothing happening? Well, let's come here and actually change this to transparent now and let's see what happens where all of a sudden something is going to happen and the transparent areas are literally becoming transparent. And so the way masks work is they look at the alpha values of the different colors you're using in a gradient. And if it's an image, it's going to work a little bit different. But if we're doing it with gradients like this, so here the alpha value is 100%. So that's solid at the top and we're going down to the transparent that we have at the bottom. So, not the most useful use case here, but we could do something. Instead of red, I could come here and my padding on here is six rem at the top and six rim at the bottom. And this would work better if I was using a custom property, but I'm not going to bother for now. I'm just going to come here and add a color stop. I'm going to say cal is 100%. And actually, if we just left it at 100%, it just means it's solid all the way down. We're doing red all the way. But then I can say minus 6 rem because I know it matches my padding. Again, you'd probably want to use a custom property there. But then what I'm doing is I'm fading it out from the bottom into here. And the nice thing with that is that means if I change the background color on my body, let's go find the body up a bit higher. If I change this background color to purple, let's say, that means that the background color is actually going to sneak in behind there and it's going to fade in that way. So you're not trying to find weird ways to hack that or make it happen or add extra overlays or add a gradient at the bottom. whatever the background color is is just going to come through. And this could be especially useful if you have like a light and dark mode, right? So, I do have uh my system preferences are set to dark. So, if I were to switch this and have a dark mode, the mask is set up there. I'd have to change my font colors at the top, but you can see that the I'm masking it out that way. And then I could even have probably cuz it doesn't look great with the white at the top here anyway. Uh so, my with that I probably want to switch the overlay to be a dark overlay. and then this wouldn't look as ugly as it looks right now. Uh but yeah, just wanted to show that using a quick mask, we can do something like that. Or if you're up to something a bit more creative and you want different shapes or other things, there is CSS generators here by Tammani Fif. Uh he has just CSS generators.com. There's a million of them in here that are all awesome, but there's these cool border shapes that you can do. And it's all using masks because these are all set just with repeating gradients. So I can copy the CSS that's right there. I can come back over here and instead of my simple mask that I had on that introduction right here, I can replace it with the much better mask that he's using with a couple of gradients uh that are on there. And now I get this kind of interesting, crazy, weird looking pattern coming in instead. And this is really just like the tip of the iceberg of some of the stuff I've seen people do with masks. So, uh something that you can dive into and have some fun with if it is uh something that you think looks interesting and fun. And then for this next one, we're actually going to switch over onto this one right here where I have some a bit of a ridiculous example set up where did you know I have a newsletter and then you click the thing and you have this modal show up and then we have the the modal has like a ton of stuff in here, right? This you want to sign up for this newsletter, you just you have to put in like a million different things into the and that's kind of annoying. Let's fix this even more now cuz it's way too high. So I'm going to go find my dialogue here where maybe even come in with like a max block size which is basically height. Uh, and let's say I say 50 VH, right? Because it's we don't want it the whole thing. And okay, that's better. But I'm scrolling this whole way, but I have this close button, and I don't want my close button to go off. I want my close button to actually stay up over here and and be right there. So, I'm going to go find that close button, which I've conveniently done this way. And I'm doing position absolute to get it in the top corner. And then I translate it to move it off. And when I translate to move it off, it's hiding. It's hidden because I had the overflow on there, right? And the dialogues by default have an overflow of auto I believe. So it be the same overflow. We up and down be Y. You wanted the auto here. And that just doesn't matter what we do. It's it's we're getting the scrolling that way. Or it could be hidden in the other direction. Uh but we can't escape out because we have of how that's working, right? Cuz even here, let's do overflow uh overflow visible, which breaks everything cuz now those are all going to shoot out the bottom. And then I say only an overflow y of uh auto. Let's say like that. And as soon as I do that, my button comes back in there and it's hidden and we get the scrolling this way because overflow is kind of annoying that way. Uh we can't have visible in one direction and scrolling in another direction. And this type of annoyance can happen with buttons like this. It can also happen with like drop down menus that you might have in a smaller thing or something that's limited like this. There's a lot of different situations where this comes up. And the trick for dealing with it is if we come and take a look here, I have this dialogue that's coming and we go all the way down and we have the end of the dialogue there with all of the stuff in it. And what I actually want to do is just inside this dialogue, we can just do like dialogue content like this and grab that and bring this closing div all the way down here to the end of my dialogue to right here. We can close that div off. And I'm just going to do a quick format in here in code pen. And all right, we're ready to go. And the reason I'm saying we do that is because I'm actually going to make my overflow visible here. So we'll take off this. And depending on what you're doing, you might not need to do this. But if it is a dialogue, you will have to because they will hide the content outside of them or add the scrolling. And I'm going to say that my dialogue content has the overflow Y of scroll. Now, if I do that, I'm also going to want to come in here, and I'm saying scroll. This could obviously be auto instead. And I'm just going to move that max block size up onto the content itself rather than on the dialogue. So the dialogue is going to match the height of whatever is inside of it. So it's matching the height of this content right now, which has the scrolling happening in here. Right? So like here maybe then the padding on this becomes zero. And I move my padding up to here. Padding of one ram or two RAM or whatever it is. I basically would style this the way the original one was. Uh, and I've also broken my close button because I was lazy and didn't give it a class. Let's go and fix that really fast where I can just do a class is equal to close on here. And we'll fix that right here as well with a dot close. And maybe that doesn't need to be nested anymore. So yeah, taking shortcuts, that's why taking shortcuts can sometimes be a bad idea uh when we style things, right? And look at that. Like magic, it's actually fixed the problem. I didn't even have to really do anything else. My close button is now out here. I think we my border isn't inheriting. So, we'll just say this is 3 pixels solid white as well. Uh but now my my close is out there. And why is this working? And the reason it's working is and I didn't have to do it. Dialogue's coming with it. But this has a position on it. It has a position of fixed. So because this is the position of fixed and my dialogue content doesn't have any positioning on it, the button, my close button here with the position of absolute isn't absolute relative to the content in of there that has the overflow thing. It's getting pulled out of that and is getting positioned relative to the dialogue itself, which I'm allowing. I have the visible overflow on there. So just setting up this extra div that's sort of setting the size. This is overflowing, but it has no position on it. no position relative, nothing like that. That's going to limit where my close button is. And then the positioning is then instead of being on here is coming on here. So we're pulling it that extra layer out deeper and then it works and we don't run into those problems we were running into before. So just understanding how to set up the containing block, which is what we call it here. The dialogue is the containing block of my close button and not the direct parent. And so many people always just out of reflex make the parent the containing block. Whereas in this case, I don't want that. I want to take advantage of how CSS works and pull it one level deeper out of there. So one thing can deal with the overflow issues and this other thing can deal with positioning it and it all ends up working fine. And the only thing with this in in this case, it actually works out really well because it's simple enough. Sometimes if you have a drop down or something else that you're having to do, it could be a lot harder. Luckily, first of all, selects go outside of uh, you know, if you have an overflow of hidden and you have a regular select, it will go outside. And customizable selects are on the way. They're really like around the corner. I think they're landing in Chrome now. So, you could play around with them and they'll eventually be a thing you can use and not have to worry about it where you have a fully customized select dropping out uh, and not worrying about overflow issues. But another thing that's newer and isn't fully supported, but there is a polyfill for it that works decently. You just have to be careful with the limitations of it is anchor positioning. So in looking in here, I have this nav over here that has the button. So that's this KP is my button right here. And then when I click on that, it's going to open this over here, which is this dialogue that I have set up over here. So that's awesome. We can close and open it. Except I want that to be positioned to close to here. And this dialogue, how would I do that? And it would just need a JavaScript plugin, basically a third party thing, right? To be able to do that easily. We don't need to do that anymore. What we can do is I can say and this could be useful for that other use case uh I was talking about as well uh where I give an anchor name to my user button. So the button has this name. Then on the menu itself, this dialogue that I'm opening has this class of profile menu. I can go on there and say the position anchor is that button. So I'm saying I'm position absolute and I'm anchored to this button. Now when I first do that, it doesn't actually change anything. But then when I come in with say a top, I can say it would be my anchor bottom. And then I can say my left is my anchor left. Let's say I think that's what we want. Let's try that out. And we should actually see uh there we go. It's now anchored to that spot. The left is anchored to the left and the top of it is aligning to the bottom of that button. I can just add a margin to move it down a little bit. Or there's these are fine and we can do some fine stuff with it. Uh, and you can probably be a little bit more precise, but one of the ones I really like is just doing uh, position area. And position area is my favorite cuz you just say I want it to be bottom center. And by saying the position area is bottom center, it's just bottom and it's perfectly centered. Uh, or I could say this is bottom left and then it's going to be on the bottom left. And there we go. So bottom on the left side. Or let's say we want this to be center right. And we're going to see why this could also be really really useful is that's going to position it over here. So when it opens, it's positioned right there. But then what happens when we get smaller on a small thing, we're losing it off to the side. And so for situations like that, here's a quick example cuz I don't want to deep dive it right now, but just to show you what's possible is when we run out of room, it actually jumps down automatically. And it's really easy to do. I just have this position try fallbacks. So when it runs out of room, it's going and trying the fallback that I have set right here instead. Uh, and it's just so easy and wonderful. And if you want a full video on this, I've done a deep dive on it and so it's right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome, Andrew, Simon, and Tim, as well as all my other channel members for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.