More CSS quick tips

Hello, my friend and friends. A little while ago, I put out a video looking at five quick tips. People really seem to like that. They suggested some, and I have a few of my own that I want to share. So, today I have five quick tips that we're going to be taking a look at, including a few bonus ones. So, it's more like seven or eight tips. Why am I saying five? I don't know. It's my favorite number, so we're doing five. Uh, let's start with overcroll behavior, which you can see here. I have this scrolling thing that I have set up. And if you get to the bottom of something like that and you keep scrolling, it will continue to scroll the entire page, which can be annoying. Or if I'm scrolling up, uh, then the same thing can happen if we're, you know, it can actually scroll up when you want to be scrolling only within an element. So to fix this, and there is a be a watch out for this one that we're going to look at as well, but let's let's get it set up first. So overcroll behavior of contain. And uh, code pen does not like it apparently. But now if I'm scrolling down and scrolling down, I'm still scrolling and it's locked into this area. And then the same thing going up. We're locked into this. Uh the reason I'm saying to watch out for this is uh especially on mobile, it's less of an issue on desktop cuz you can always find a way around. But if you're on a mobile device that's a touch device, people ask me about this all the time, by the way. Uh this is just the responsive mode that's built into the dev tools of all the browsers, I think. Uh, so same thing, the overcroll behavior. I can scroll in this area. So I can scroll down. I can scroll down. If I get to the bottom and I'm trying to scroll with my finger, it's not going to continue scrolling. This can be a good thing for like sides swiping things. So if you have uh horizontal scrolling, this can be a good idea to put in. The thing you want to watch out for is say this is 120 viewport block size. Uh so it's a nice big tall area. So the user scrolls down and then they get to like this part and they're scrolling and I have space on the side. So I can actually like I can still grab a hold outside of that area. But like I'm I'm at the bottom and I can't even see the bottom and that's really annoying, right? And there's no way for me to keep going. Whereas if I turn this off, let's remove that and this will have to update. So now once again we click, we scroll down, but we get to like here if I'm scrolling, I'm scrolling. We get all the way down to the bottom and then I keep clicking and just scrolling it will actually pull me down still. So, it's one of those things you definitely want to test. Double check that it's giving you the desired results that you're after. But, uh, again, for horizontal scrolling, especially on touch devices, it can be handy. Uh, and there are other times where you definitely might want to implement this, but just be careful with it if the things are getting tall. Cool. Next up, we have carrot color, which is a fun one in that uh, not a lot of people know about it. So, you can see I'm set up carrot color orange red right here. And that means when I click into these, you can see the carrot is actually orange red. It's getting the color in there. If we don't have that, it's just going to be the default of white, which there we go. It is updated. Uh so if you want something a little bit more on brand, you can just use your carrot color on your inputs. And nice and easy. Uh the only problem here, and this is our first bonus tip, uh is the carrot by itself isn't super obvious, right? It's kind of small. There's not a lot you can see. We can actually change the carrot shape now. Sort of. This is a progressive enhancement. It's only in Chrome at the moment. So, let's I am in Chrome. Uh, so it's we have my carrot color set up. So, we can come here and say carrot carrot shape. And if you're going to be changing the carrot color, you might as well change the shape while you're at it, just to add a little something. Uh, so I think the default is bar. Let's see if that actually changes anything. Uh, no. Yeah, that's the default one. So, that hasn't changed. We could change this to a block. And block is if you want to do like the old, you know, like these. Uh, and you might not want orange red that's like super deep like this. Let's see if we can do a uh HSL from I should probably use okay LCH. We're going to say orange red LHSL over.5 to lower the opacity of it. I haven't tried this. This is we're we're we're freelancing here. Yeah, you can reduce the opacity of it. Uh so yeah, that could be something interesting that you bring in just to make things look a little bit more interesting along the way. Uh if you, you know, have a certain style that you're after with a monospace font or something. [snorts] So that is the color shape. The other option you do have here is under line or underscore. I'm seeing on underline as the autocomplete, but I'm pretty sure it's underscore uh that we want to use here. And there you go. I've come in. It's kind of hard to see. Let's just put this opacity back up to one. This is a relative color, by the way, if you've never seen it before. Uh, and yeah, you can have underscores coming in as well. So, we have a few different options there. And moving on from carrot shape, we have accent color, which is the same idea of getting into the world of coloring things. Uh so you can see I have my checkbox here. Uh this we want to get things more on brand to match our carrot color that we just changed. So on the HTML, this is an inherited property. So just declare it as high up as you need to. We can say accent color accent color just accent. And we're going to do with orange red here as well. And all of these will change over to using that color. Uh there's a few good things with this. First of all, it the support's pretty good. It will work for all of these elements. Uh, and you'll notice the checkbox, the color of the check mark is black right now. If we change this to say yellow, actually no, yellow would would stay black cuz yellow is very bright. Uh, let's change this to, let's say, dark color. I can't think of a good dark color off the top of my head for some reason. I always use light keywords. And the dark ones are never dark, right? Let's try a dark green, I'm guessing, is actually dark. Ah, there we go. [laughter] And now you can see the check mark is automatically switched to white. So, it's always going to take the higher contrast. The same with our radios. The color of the radio there will always use the higher contrast color automatically. And so, yeah, nice easy win there. Accent color. And then you can just get on brand super easily. So, a nice quick win uh with that one. This can definitely be something that's included in your CSS resets even. I think it's a a nice one to throw in there. Now, next up, we're bit of a warning. It'll be a bit of a flashbang cuz I want to talk about colors. So, the background will be white on this one and it will be bright. Uh, and the reason I want to talk about that is because I want to look at the color scheme. Uh, shorthand. Once again, this is something I include in most of my resets. If I'm going to have a light and a dark color scheme, I'm going to put a light and a dark here. And that means use whichever is the user preference. For me, it is dark. So, you can see everything is switched over. If you don't know about color scheme, the reason it's fantastic is the default is it will change the text colors. So I don't have anything declaring my my text colors other than my my title up up at the top there. Uh so because of that the text color is automatically changing the background colors automatically changing the inputs are even switching my scroll bar is switching everything automatically switches when we switch over cuz what it's doing is putting the user agent styles into a dark mode. So if you forget some styling along the way say for an input you don't have these bright white inputs sitting around. uh or it could be many other things. But uh if ever you forget to style something, it won't stick out like a sore thumb, which is quite nice. There is some limitation to this. If you're going to do it, you probably want to have some way for a user to also manually switch between because people will have their user preferences set up that they might not want to be reading a website in. A lot of people who have dark user preferences still prefer light websites for long reading or people want to switch. if it's night time, they might want to switch to a dark theme, even if their system settings are in a light theme. So, this is a nice first step, and I'll put a link in the description to a video where I look at how we can go more in depth with this and build out an actual uh toggle and everything else cuz I've done that. So, I'll include a link in the description to a video that goes a bit more in depth on this, how we can build a bit of a color scheme with the toggle while also using the light dark here. uh as a little bit of a bonus in future CSS or if you don't mind not as great uh color handling another or not color handling but browser support uh it's getting there but it's not perfect yet uh is you could do something like color and use the light dark function and that allows you to pass two colors here. So, these could be custom properties that I'm putting in, but let's just say that my color on my light text color should be red, which will look terrible, but we're going to say red. And we're going to say uh what? Let's do the light blue. So, if I have a maybe we'll do Yeah, we'll just say red. Whatever. You can see the text has actually changed over to light blue right now. And if I emulate this, so if you go into your dev tools, I guess this is another bonus tip. in your dev tools, control shift or command shift on a Mac. Uh P brings up your command palette and you can emulate emulate your different things. So preferred color scheme of light and now you can see the text color switched over to red and then control shiftp command shift P on a Mac emulate and you can do not emulate or you can switch over to other ones. You can emulate all the different media query stuff. So do not. We go back over to our baby blue right there. And yeah, color scheme is fantastic and makes life really easy. And I'm really looking forward to light dark getting to the point where browser support's good enough to start using it in production. And I had to look uh this is of the time of recording, it is baseline newly available. We're at about 85% support as far back as Safari 17.5. So probably a little bit longer realistically unless it's a personal project. But yeah, that we're getting to the point where we're going to be hitting that crossover pretty soon, I think. Uh anyway, that's it for our color scheme. Let's jump on over to our last one, which uh is our place content, where my demo apparently did not want to load when I got to the page here. There it is. Uh and this is place content or place items. And we're also looking at another one along the way. So here on my section, I I still think this is the easiest way to center things in CSS these days is throwing uh a display grid on the thing and then using either a place items of center or a place content of center. And both of these can work with grid. Uh the place items will work if you only have one thing in there. So if I only had an H2, the item is going to be centered horizontally and vertically. When we have multiple items, it's creating two rows of content. So, it's centering them vertically within the rows, which isn't quite what I want. So, instead, we can use our place content center, which places the entire grid in the center. Uh, and it's probably the easiest way to center something. You can actually do this now. Again, browser support's not good enough anyway, but you can also do this in a div now, or block level elements, I should say. Uh, cuz this is a section, not a div. uh even though semantically they're more similar than you might expect unless you're like actually attaching a title to the section. But I digress. Uh we can do a align content of center and a uh and then a justify items of center and it will center things. Let's see. There we go. Uh you might be going, "Wait, Kevin, shouldn't this be the other way around?" Yeah, in flexbox world you would use the opposite of these two, but in the block context we do it this way. That definitely feels frustrating. I know a lot of people got mad when when this came came out that it's the opposite of what we would use with flexbox. It actually does make sense when you look at how the items versus the content keywords work when we're doing alignment on things like this. Uh it's just one of those things that we've built a pattern we're familiar with. So it is kind of frustrating uh that they they are like that. You still need two lines here to be able to do this. So just having a display grid and a place content center is better browser support anyway. So we might as well use that I think. Um even in the future. I don't really unless you really don't need a grid context for some reason. Um I'm probably still going to go this route, but there's probably situations where maybe the other one would be handy to have. The other one I did want to mention is if the content inside is the let's just take this off. Uh we can take this off and we're going to add a position relative here. Position relative because I want to talk about the place things. Um so on a positioned element now you can use the item or self things if that makes sense. So let's do that. That's my H2. So my h2 is going to get a position of absolute and I can actually do a place self. Oh no, we we need one more thing. I'm going to say inset of zero. So top, bottom, left and right of zero. And then I can do a place self of center and that will work and go in the middle. So this is the you know the placement of things uh would work. So this is the same as an align self and a justify self of center cuz all of those have been brought over to the positioning as well. Right? So if I say justify self center, we'll get it on the justify axis. So it's centered this way. And if I did an align self, we're going to center it vertically uh instead because whenever we use the place, it's a shorthand for the justify and align. So it's justify self and align self of center. same as when I did it over here with the place content of center. That's the shorthand for align content and align uh and justify content of of center. So yeah, a bunch of different ways you can center things. A few bonus tips along the way there. I'll put links to the original video down below and they should be on screen to the couple I mentioned along the way, including that one on the color scheme stuff that I talked about. And with that, I want to say a very big thank you to my enabler of awesome Johnny, as well as all my other patrons and channel members for their continued support. And of course, until next time, don't forget to make your corner of the internet a little bit more awesome. And we're almost at a million subs as the time of this going out. Probably really close. Maybe we passed it, maybe not. Just want to say a very big thank you to everyone for helping me get there. If we haven't yet hit it and you haven't yet subscribed, please do consider subscribing to help me get there. Uh that'd be pretty cool. It's a big milestone for us YouTubers. So yeah, thank you to everybody who has continued to support me. Uh whether it's through Patreon, channel membership, or just watching and sharing my videos. Uh yeah, it's it's been a fun ride and we finally got to a million or are getting to a million. But whatever it is, thank you so much everybody.