 Recently, I looked at five CSS solutions to sometimes hard to solve JavaScript problems that people can run into, and it seemed to be pretty popular. So this week we're looking at a few more tips, but instead of looking at specifically those types of problems, I want to look at just some sort of underrated properties and properties that don't get enough love within CSS, and that can help us either overcome problems and get us out of issues that we might be having, or sometimes just to help add that nice little final touch to our websites. Hello, my front-end friends. Thank you so much for coming to join me once again, and if you're new here, my name is Kevin, and here at my channel, I help you fall madly, deeply in love with CSS, and if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it, and what better way to do it than exploring the parts of CSS that a lot of people don't know about that can really help you out. So let's dive right into the code. We are here in VS Code, and the first one we're going to look at, if you've been watching me for a while, you might have seen me use it, but every time I use it in a video, people are like, what is that? So it is isolation, isolate, and I've set up this div here, and actually, let's go look at the structure. It's right here. We have this isolation example. That's what has the blue background on it. Then I have this isolation div, which is the green one, and then the isolation inner, my naming here probably could have been better, but CSS naming is hard. The inner one is this one with a gradient on there. We're going to look at, it's a little bit of a contrived example, but we'll look at, we'll turn this into something a bit more useful as we develop it and work on it. And what I want to show you, first of all, is let's take this isolation inner, and let's say we need to play with the Z index on this a little bit, right? So I actually want to come on here and we do a position of absolute, absolute like that. And if we come and take a look here, this isolation inner is inside of the isolation here, which is inside the isolation example. And if I come on that, and I do position absolute, and well, let's just do a save and it sort of just pulls out of the flow. So it's still there and it hasn't moved, but it's not in the flow. So the padding of this doesn't incorporate or worry about that anymore. And then let's say there's text in here. We might not want to do this, but let's just say we do a Z index of negative one and hit save and it vanishes. And the reason it's vanishing is it's going behind the blue background that I have over here. And that's just because of the way stacking works, right? We do a Z index, negative one, it means go to the back, all the way to the back. And there's different ways to overcome this, but the best way to control something like this is to create a new stacking context. And what that means is I don't want this negative one to be able to escape outside of either here or here, depending on the type of thing that I'm trying to do. So let's come up to the isolation example. Again, that's the one at the blue background. Maybe I should have called it isolation outer, but anyway. Here, let's come and we're going to try this. We're going to do an isolation, isolate, hit save. And notice we can actually see it poking its head out now. That's kind of interesting, right? So what this is doing is it still has the stacking context, but we're creating a new one where items can't escape out of that isolation example. So like this div right here, it has its own stacking context. So the negative one is relative to everything that's inside of there. So it can go behind this, but it can't go further than that. And we could even step this up where I could come on just the isolation. So that's the green one. You can see lime green and do an isolation, isolate. And if we do that and hit save, now it can't even go behind that anymore because it's limited to within this item right here. Now there are other ways of doing this. You do a position relative and then give it an item, its own Zed index. And then that now has a stacking context. And there's a whole bunch of weird ways we can also create stacking contexts. But the isolation, isolate was created. So we have something that has no other side effects. It's doing nothing else other than creating a new stacking context to help control where things are going. And if you're wondering, like, why would I ever want to do something like that is we might want to do something with, say, this background gradient. I'm going to cut that out of there, comment this out just so it disappears away. Let's comment this out from here too. And so we have this isolation here. And on that isolation, what we're going to do is come in with an isolation after. And this is a fun trick where we can do, we need a content on that. We can throw a, we're going to throw a position of absolute on there. And because this is the absolute on the isolation itself, so the green thing, I'm actually going to remove this and put a position of relative relative. Then we can come in here and do a, I was going to do index. I want to put a inset of zero, which is top bottom left and right of zero. And then let's put that background on there. So it covers the entire thing. Okay. So why would that be useful? And so what we could do on here is a filter, filter, and do a blur on there. We'll say like 2M, something like that, just to make it nice and blurry. Maybe a 1M would be enough actually. And then we can also come in with a transform of scale and maybe like a 1.2. Just make it a little bit bigger or you could play around. Maybe the inset would actually make more sense here of like negative 1M. So it's a bit more proportional with how it's been pulled out. So we have this like blurry thing that's been pulled out like that with a gradient on there. So here we have the isolation isolate on the blue background. So I can then do a Z index of negative one. And then we get a gradient shadow. And I've looked at this before, let's turn off that background. So you get a cool gradient shadow like that. And I've looked at doing things like this in the past, but this isolation isolates a nice way to do it without having to come on here and have to do position relative in a Z index or other things like that to be able to control where, you know, how things are stacking up on each other. So yeah, a really fun one that can be extremely useful. But next up, what do we want to do? Well, we can give our unordered lists some life with the marker pseudo element. So let's come down a little bit and let's come take a look actually here. I have these lists that are right here. And actually we can come below this one. That was what we had before. And let's just say my unordered lists, so UL. And on the UL, we're going to do space and marker. And we can just do marker like this, actually, to be honest. But we have some, but that could, I don't know if that would affect ordered lists or not. I'm assuming it would, but I could be wrong. Good question. Something worth looking into. And we'll check that out in a second. But basically I could go start with color. Color is red. And look at that. We get the red color coming in on my bullet points. Super cool. But even better than that, we can come in and say content and give it something else here. So I could come in here and let's just get my emoji picker up. And yeah, we can do party mode for this and hit save. And I've talked about these before, but there we go. We get that coming in. And maybe here you do a UL, LI, LI. So you're getting like nested allies that are coming in. And then that can have a different one. Content could be, I don't know, what else could we do? This one's laughing, whatever it is. I mean, I'm using emojis. Oh, I was like, why is that not working? You need the marker on there. And now we get the laughing emojis on these nested ones. You can play around, do different things with your bulleted lists like that. And just for fun, let's come in and make this in OL and see. And it does actually change ordered lists as well. So we do have to be careful with that. And so it might be useful on this one to actually say UL, space marker. And we can even do it like that. So it's only getting like the first level allies. Because the marker's always on the LI. So we could say like that. And then this one here could be, again, if it's UL, LI. So then we keep our numbered lists in those cases. Or, you know, I guess it could even be like that, whatever you need. But just be careful that you're not accidentally changing numbered lists to something if you want to keep your numbers. But speaking of numbering, another thing I want to look at is numbering things without ordered lists with counter. And so you can see here I have this one and this is a section of content. And then two, and if we come and look here, those aren't actually in my markup. Both of those are right here. My H3 of my list title and my list title right here. I put list title, but this is paragraphs. I guess that could be section title. Let's change those. Section title would make more sense. It's going to break things. That's okay. But we can have like numbered section title. And you can do this to like steps and have like subsections and other things. Now this is for when a OL isn't the appropriate thing. So this is not to replace ordered lists. It's for say you do have section heads where an H3 or another heading is the appropriate markup to be using. But what you want to do is have some numbering on those. So here in my, you can see I've set some a few things up here. So counters section. And on these, so this is my list title. So we're going to change this over to a section title instead. And then this one also to my section title. And you can see that's come in. And basically there's a few things coming in here. We have things that are going to reset counters. And this could even be on your body. There's also a set counter actually, I think it's called. But you want to have something that's going to make sure your counter is at one and you can change the number. You can even have like a number starting at seven or a negative eight, whatever you need. You can do different things with it. But we can do a counter reset just to create like this section counter. And then every time I have a section title that is inside a counter section. So here's my counters section right there. So every time I have a section title inside one of those, it's going to increment the number. So we had a one, then it becomes a two, then it becomes a three, a four, and so on. And then we can use our count or our content property on the before element. I can do it on an after two, I guess if you wanted to. And we have the on the cut on the content property here, what we can actually do is use this counter. And what you do is you say, what counter do I want to put? Well, I want to use my section counter. And then if there's anything else you want to put, so maybe you want it to, this is so my section counters just putting the number one there. And then anything I put here is what follows after that. So it's going to have these, the number one, the number two, a colon and then a space. So if I wanted to, we could even have this be section and section one. So if I do that, you get section put a space. So section, then we get our counter, then we get our colon. So section one, this is a section of content, section two, section three, and so on and so forth. If you'd like to go more into counters and more into the different things you can do with the content property, I've talked about it in a lot more detail in a video that is linked down below. And there should be a card popping up for it as well. And you'll notice here, this is nothing. So we'll delete that. I was playing around with some stuff. All right. And next up, this is more a couple of fun touches that you can do, rather than set things up very specifically. But we have our carrot color. And we also have an accent color property. So two for one on this one. So say I come in here and I have these form elements where I'm writing some stuff in them, and then obviously my content here. And when we click into these, we get the carrot, right? This, the flashing, the flashing thing there. And we can actually style that. So if I come here, I can just say that, let's say we do form. So everything in my form, the carrot color is going to be my var color primary 400, which is just a bluish color. And now if I come take a look, you can see, it's not very super obvious. Let's also do font size of like two RAM, make it really big, just so it's a little bit more obvious. And you can see that it's a little blue flashing carrot there. So that's kind of cool. And whatever we're in, it's always going to be there. So if you have a brand color, and again, when these little touches, they can go a long way, along with our accent color right here. So here I have my radio buttons. And if ever, you know, you don't want to come up with a completely custom radio button, but let's say you want to just add that little touch to them. We could do this and I'll do it on my route, but you could do this specifically for different things. But it is something that inherits, so you can do it anywhere. And it's your accent color. And once again, we can use my var primary 400 is blue. So let's say it's lime green, just so we get something that, wow, look at that. It just pops right off now. And we get that bright green coming in there. And also, if these were instead of having them as radio, these were checkboxes, it also works on those. Let's go find that checkbox, not check, Kevin. There we go. So if it's a checkbox, you can have it check and other stuff. And there's a few other elements that this works for as well. Once again, I've talked about this before. So if you want more details, you can check the description down below. And this last one, I will, I lied to you, I guess, a little bit. This is a unit. Once again, these are all things I brought up into bigger contexts or had different things on. But I still want to talk about it, because not enough people know about them. So this isn't a property, it's a unit. But we can really make our text a lot more readable when we're using it. So let's come down here. If we come and take a look just really fast. We're going to come up here and we have all these. We'll just do it for all my paragraphs. I was going to do it specific for some. Let's just come to here. And we're going to do p. And we're going to say, don't use a width for this. If you do it, just make sure it's a max width. And I'm going to say like 60ch. There's different levels of thing. And it's not perfect because it's roughly the width of the number zero of a font. So like obviously a capital M is much wider than the number zero. So if you counted all the characters here, probably doesn't add up to exactly 60, but it's a ballpark figure. And it's a lot easier than saying like, oh, it's 70 ram or 60 ram or 50 ram or 500 pixels, 600 pixels. Really those are magic numbers. Just you finally get to roughly what you want. Whereas the advantage with this is I've set up a few classes. So I have a font size 300, which would be smaller. So say we do font size of 16 pixels. So you can see this one is shrunk down and we even have another one on here. Let's do a font size of 200. So font size on that can be like 12 pixels. And you'll notice that like the width of them is shrinking with the font size. And this is super handy and super awesome that the maximum font size is limited by this one. So we're setting our width relative to the font size of what's happening in there. And that's a good practice to have to increase readability because we don't want to go over about 70 characters wide or it starts really stretching out. It's just harder to read. So it's a nice easy way to fix things. It does raise a problem if ever you have centered text though. So you'll notice this is centered. But usually if you have centered text you actually want it to be centered in the viewport, right? And this is clearly not centered in the viewport. And that does raise an issue. So in this case what we could do is say a P with a text center. And we're going to look at a few different things because this isn't usually how I do things. But then we could just do a margin in line of auto which would then keep that also centered. So that it has the max width and it's staying centered within the space that it has available to it. So that's definitely an option that you could use. But a lot of the time I don't actually put this text center on a paragraph itself because you might have several paragraphs that all have it, right? So you might come and you have a div up here, div text center. And that div is ending all the way down here. So now what's happened and the issue is like I don't have a P with a text center. I have P nested inside of text centers. And that's kind of awkward and not very nice. And well, how do I fix that? And well, there's again, another way we can have that or we could do a text center P and then do the same thing. Or I mean, this could be one selector that's doing both. So then we're getting it like that. Another option is I like to use SAS a lot. And if I'm using SAS, I do this a little bit differently where let's just actually open this up really fast. We're going to rename this dot SCSS. And I'm going to do this like the really, really fast way. Not the way I would necessarily normally be working, but we can do a SAS watch my style dot SCSS. And output that as a style dot CSS. And that should fix everything. There we go. Things have come back together. And if I come in down here, one thing that I often would do if I have something like this with my text centers is within my P, you could come down and then also say text center because we have nesting within SAS and do the trailing ampersand. And on there, do a margin in line of center. And one of the things I like about this is it keeps all of the paragraph styles together rather than having like your paragraph and then your text center things somewhere else, just how I'm used to working. And this doesn't really affect anything with text centered. It's only affecting paragraphs. So I sort of like doing things like this. Now, the one impact with this is it's definitely a little bit obtuse in the readability of it. So if you do like this type of approach, you definitely would want to throw a comment in here, probably just to keep it from someone coming across and going, what, right? So yeah, but I do think that it's a useful way that we can be working and a fun way to author your style sheets. And if you'd like to know more fun and useful CSS tips and tricks and stuff, I put a short playlist of my recent videos where I look at these types of things right here for your viewing pleasure. And if you would like to learn more about SAS and into that world of things, I have a course that's just about ready. There's a link for more information just down below. It goes into much more than just SAS, but that is part of the course. And with that, I want to say a very big thank you to my supporters of awesome. Dan, Johnny, Patrick, Simon, and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your call on the internet just a little bit more awesome.