5 super useful CSS properties that don't get enough attention

hi there my front end friends there's some things in CSS that often seem like they should have very easy solutions to but you end up having to take these like backward ways of actually getting there with many things there actually are Simple Solutions that just people don't know about and so we're going to start off with one that I use in a lot of my demos but that whenever I use it people always wonder what it is so I want to spend a bit of time taking a look at it and we're going to start off with a property that I use from time to time in my demos when I'm doing bigger projects and people always wonder what it is or are just so happy to find out about it and that is isolation isolate which we can see I haven't started using it but we're going to be taking a look at it here and the only thing that's really important right now is I have this div that is right here with the class of isolation on it now jumping on over to my CSS you can see that I don't actually have anything going on here yet and what I'm going to start with is by putting the pseudo element on here which is a before pseudo element using content of open quote which is another cool thing that isn't really part of these things that we're looking at but you can see that's actually added these quotation marks sort of floating off up over here and what I'm going to do is position them closer over here so it is using a position absolute so the first thing I'm going to do is add a position of relative onto the isolation itself and you can see it's moved to over here now though the problem is it's on front of my text and I need to move it behind the text and another thing that's very important with this if we come and take a look in the dev tools there's the isolation div but just below that inside of there before the paragraph is my actual before element so it is inside the isolation if we use an after it'd be the same thing but it would come after the paragraph right there but because I am using position absolute whether it's a before or and after it's always going to be on top of the text to move it back we can throw a negative Z index on there so I've done that just now and the problem with that is my quotation mark has disappeared and the reason for that is I have a background color over here on my isolation section because of the Z index negative one means just go on back it's out of the flow it's flying all the way back and that's happening because while we have a position absolute on here and this is the containing block because of the position relative that's not enough to create a new stacking context and stacking context is something that doesn't get enough attention in CSS but just like position relative take something that's positioned inside of there and sort of limits the scope to that element we can create a new stacking context that prevents negatives that indexes from actually escaping out the back of things and so to do that I can come on here and do an isolation isolate and the only options for isolation are isolate or Auto auto is the default isolate means that we're creating a new stacking context that's the whole purpose of it and it prevents this negative one Z index from going behind it which means that negative one Z index is now stuck inside of here and can escape outside of that div so it is stuck inside of this just behind all the content that's in there and it never reaches this isolation section which is what has the background color on it so it can never go behind that background color there are a lot of other ways to create stacking context most of them it's an odd side effect of that thing so there's other solutions to this than just this but the reason I like doing this is this is literally the purpose of it isolation isolate we have a way of creating a stacking context it has no other implications whatsoever so I was just going through the footage after the edit of this and I realized I've missed something a little bit here that I want to take a look at where if you do have something like this we're looking at cool CSS tips and stuff so this is a little bonus one where if I take this isolation in and I paste it down here so we have two of them or let's just make three of them there's a problem where the following up ones have single quotes instead of double quotes and this is like say you're doing JavaScript and you have double quotes inside those you do single quotes So the same thing here CSS is looking at it going well we have an open quote so this must be a nested quote just because we never closed our quote and a simple way we can get around that if we want to use quotes as decorative items like this is here we're I'm going to switch this isolation after to a before just so I can use a close quote for my after but we're not going to use a regular close quote this is the the fun trick here so what we're going to do is on an isolation after and actually for now I said we're not going to use a closed quote let's put a close quote for now just to see how it fixes it and you can see that it's added a little tiny close quote there but it's also fixed these open quotes that come after because we have an open quote we have all the text and then we have this little tiny close quote coming there which means the next set of quotes is an open one but we can actually use a no close quote and what the no close quote will do will say that we don't have a closing quote but we want to simulate that there is one there and so we get the open one and then we never have the closed because we have this but it's saying but you know at the end of this isolation let's we we're closing the quote without putting a quotation mark so a little bonus tip there we can keep on going with the rest of this video now now the next one is inset inset is one of those ones once again that has been around for a little bit now and I just want to say all the these things do have very good browser support so there's no issues there as long as it's modern browsers not including Internet Explorer you're more or less fine but I will include links to the browser support tables down below for each one of these properties just in case you're worried about one of them now for this inset section once again let's go to the HTML and just take a quick look at it where we have the inset section then down here I have a div with a class of inset on it and this is what we're going to be playing with which is inside of the section now I've already put the position of relative on the section over here and what we're going to do is add some basic styling here and there we go I've just created this sort of purple box that's within the dotted lines that we can see there and I've put top bottom left and right on there just to declare a whole bunch of properties so we can see it and we're just saying we've down one ram this way move two ram off the side one REM off the bottom and 50 from that side and it's always annoying having to write out a whole bunch of properties when you're used to shorthands and that's what inset is it's the shorthand for all of these and it's part of The Logical property the spec so if we said inset we just do it like you would margins and all of that so the same thing would be a two Ram here a one ram there and a 50 so we're doing our top our right our bottom and our left so if I hit save absolutely nothing changes just to show you that it's working let's change that to 20. now just like the shorthands we can also do this where it's going to be the top the left and the right and then this one is the bottom or if I remove that one then we're looking at the top and the bottom and this one is my left and my right and another cool thing that we can actually do with this is to set auto on some of them so I could say Auto for the top one REM for the right two REM for the bottom and let's come back with a one REM here and you'll notice it's at the bottom because the top is set to Auto it's as if I'm not setting a top property so it's completely ignoring that so it's setting it to a bottom of two REM the left and the right of one REM and the top of Auto which just means we're not setting a top property so it just has its natural height but it has to be too Ram from the bottom so if ever you need to Omit properties but you still want to use it just use the auto keyword to do that now we can move on to this next section which is CSS counters and counters are fun if not kind of weird but it basically lets us add a counter or like an almost like a numbered list to any element on the page but they don't have to be contained within one element a little bit and you can even use these to add additional styling two uh I said numbered lists ordered lists um same thing really so what we're going to do is in this case I'm going to look at every section because every one of these I've created has its own section just Rel your normal element and then we have classes on each of them so the first thing we're going to do is choose every one of our sections then inside each one of those sections we're going to set a counter increment which means we're going to start counting and the counter needs in names and this name is up to you whatever you want to name it you can name it so just give this whatever name makes sense make it really obvious what it's doing and you should be all right so that means every time we get to a new section it's going to increment my counter it's going to add one to my counter of section counter but how do we use it well for that we want to use a before now for that I'm going to be using another pseudo element now it doesn't have to be a pseudo element necessarily I don't think anyway I think we could do it in other ways but pseudo elements make the most sense for this so I think in general you would be using one I don't know if it would work without it I've never tried maybe something you could experiment with but basically what we then do is in the content we can instead of you know usually on your pseudo elements you just end up with a blank string like that in this case what we're going to do is we're going to write the counter function so we do a counter like that and then you don't have to let's get rid of this actually let's just do the counter function so with the counter function inside of that you put the name of the counter so let's hit save and take a look and you can see now it's numbered each one of my sections because each section Title Here we have a section title section title each one of those is getting the number coming before it and every section is incrementing that number now it looks kind of ugly with how it is set up like that so that's why we could come here and then it's a little bit like JavaScript or you can add a string afterward just don't put a plus or anything like that you just come here and you can just do a point and then save and it adds the point and the space or we could do a parenthesis or whatever you want inside your string here and it's going to place that as well so I'm going to leave it with the dot and then we can set them up and of course you could style these as well so we could come in with an opacity of like 0.5 or something if we wanted it lighter or you could change the color the font size the font weight whatever you want now there's a lot more to counters than just this so I'll link to a video down below and there should be a card popping up as well that goes into sort of the the depth that you can do with these but it's a fun way to be able to just add like a simple thing like that to headings or or again there's other use cases we can use these for the next one is going to be filters and filters are kind of fun and I think people already know a bit about filters they've seen them use for certain things but I don't think people really take enough advantage of filters or know all the things and sometimes there's one like there's the backdrop blur that came up with the whole glass glass morphism thing that people found out about and then you sort of forget about them a little bit so so we're going to look at a few different use cases here where it's kind of interesting and the first one I'm going to look at is with my cards here with these images so one nice thing with filters is you can really manipulate how images look so let's say I could make them completely grayscale by saying grayscale 100 and I could also increase their contrast ratio and make it a much higher contrast and then we could make it so when we're on when we hover on top of them of course they switch over and there's another fun thing we're going to look at with this a little bonus tip but before we get to that we could also throw a transition on here so we could transition our filter or say 500 milliseconds and we'll just throw a knees for Simplicity and then we sort of get this interesting effect coming on them now the one issue is we don't really only want that to be on the image let's say you want to change it when you're because we can't actually like Tab and focus onto an image right but let's say we wanted to actually be able to change those even if somebody is keyboard navigating well there is a way that we can do that now of course this wouldn't work because I can't focus on an image and I don't really want to start making my images focusable there's ways of doing that but what I could say is card Focus within and that means if my card has focus on anything inside of it it's going to get that effect on it so if I come here and I Tab and the link gets focused you can see that it's also changing things over so just a fun little extra bonus there on some things we can do with a focus within it's not a property though even though I guess the last one we looked at wasn't either it was a function with the counters or actually we looked at counter increment and that was a property and this was a sort of a function but whatever I'm still counting it um and so yeah there we go we have the filters and a fun little bonus there with our Focus within now another way we could use the filter and this is probably maybe a bit of an underappreciated one but say you have icons like this ideally these are svgs maybe you're inlining them so you can manipulate them but maybe you don't have that luxury so you're stuck with this icon and you have like a light and dark mode for your site and on the dark mode you have this dark icon that you can barely see ah there is a solution to to that though now I'm setting this up in the simplest way possible you might have to do a little bit more work where let's say you have a class of light or dark that's being placed on your HTML or on your body that's controlling it you could just Nest this inside of there where if we're in something with a dark mode we can use the invert 100 and you can see my icon has actually switched over from being dark to light because it's flipping the colors on it it's completely inverting the colors and if you have a dark icon it will become a light icon maybe not the perfect solution but for quick things that you're working on and you need to have both I think that's kind of a fun way to be able to do it and one last bonus thing here as well with filters is being able to add a drop shadow so the advantage with the filter drop shadow is it actually works with transparency because you can see that that shadow is coming through underneath and like in these transparent parts of my icon this is not something that would work if you did the same thing with a box Shadow so here I've put the Box Shadow on there you'll notice I put purple here and it's actually green because remember we have an invert that's coming here and actually switching everything on it so that is kind of interesting but notice how the shadow is on the outside and not like it's following the Box itself and whenever we do a box Shadow it follows the elements box whereas the drop shadow doesn't and as we can see it also isn't affected by the invert that we have on there too so a couple nice things there that we can do with filter and now last but not least is going to be CSS contain and CSS containment and in this section notice I have five number fives and the reason we have five number fives is I have my H2 and H3 and H3 but I put a section title on all of them so they're all getting a number on them this number unlike these other ones isn't changing and this comes back to CSS counters and the reason this is happening is each section incremented things and it wasn't my H2S or h3s so the section switches it to the number five that we have here and then the number five never changes so it's always just showing it for each one of them because we have nothing that's actually incrementing this section but maybe I actually want these to be like a 1 and a 2 and we want to change things around a little bit for this specific section but I don't want to have to create like a whole new counter system and everything else I just want to sort of isolate this counter system within the bigger site there's an interesting way we can do that with CSS contain and CSS containment and actually CSS containment is a big part of why container queries are possible now which is really exciting but this is a much simpler example of what we can do with it so to be able to do that what I can actually say is contain style and this is happening because we've now said like the styles of other things we've done outside aren't bleeding into here and this is sort of its own self-isolated area and sadly this contains style only really works with this just really fast what we could do is add something like this just so we get like its own numbering system within here where we're counter incrementing again on the section titles instead of uh in another way and then now we have the four here this has no impact on anything and then we get to the number five coming after it so it becomes its own little area which is kind of neat the issue with this is it only really works with counter increments right now and while that might seem really limited for what we can do with contain there's a lot of other things as well we can contain layouts we can contain paints and other things and this is very useful if you have animations going on and you don't want the animation to cause reflow in other parts of your page you want to just say that this element is isolated on its own if things are happening in here that are causing height changes and other stuff to happen don't have it affect the rest of the page that could be a really nice boost for performance there are a few little side effects and other things with that though so just to be careful with it but it might be worth experimenting with and if you like quick little tips and underutilized things I've also looked at some layout solutions that we can use CSS grid for that are really fast simple to put together and things that grid often gets overlooked for for more complex Solutions if that sounds interesting to you that video is right here for your viewing pleasure and with that I'd like to thank my enablers of awesome Jan Johnny Michael Patrick Simon and Tim as well as all my other patrons for their month support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 111,134

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, css tips, css tricks, isolation, inset, counter, css counter, counter-increment, filter, css filter, css filters, contain, css contain, css containment

Id: o1HzOJfgugE

Length: 16min 23sec (983 seconds)

Published: Tue Feb 21 2023