 Happy New Year, my friend and friends, and to celebrate entering the new year. First of all, I can't believe it's already 2024. That's crazy. I thought it would be fun to take a look at some of the newer CSS features that we have that sort of go under the radar, but that would probably be good to be included in a CSS reset. So let's jump on right over to here where I have nothing set up and I have talked about a very simple reset before that looked something like this right here. Then there you go. It's not doing too much. But if we look, it gives us a dark mode. It is a little bit opinionated because we're doing a font inherit on the star selector here, which you definitely don't have to do, but a nice very simple, very short reset. And it does basically the job we want it to, but there's some improvements we can make to this. Now to highlight what some of those improvements are, I'm going to put some font sizes here on the titles just because it makes them a lot bigger and a little bit easier to see and explain what some of these other parts are. Because the first thing I want to do is to deal with large font sizes, which is this right here where you select all your headings and do a text wrap of balance. And when I do that, you'll see this part here, this section two that I have, if I turn that off, it's going all the way across. And then we get these two little lonely words all the way over here. And so text wrap balance is a nice one that balances out when we have headings or things like that. One reason I'm only doing it on my headings is it only works with text that is between two, and I believe four lines long might even only be three. It's really meant to balance out long bits of text that are more for headlines than anything else. And we do actually have an alternative that is for our longer text, which I also think is worth putting into our reset for our paragraphs. And maybe you could include a few other selectors here, which is a text wrap of pretty. And when I do that right now, we're not actually seeing a difference. But before I worry about why this isn't doing anything yet. And it's just where my line breaks are, I am going to come in and suggest another thing that we put on our paragraphs, which is a max width. And what this is is completely up to you, but it should be no bigger than 75 CH, because that's a comfortable line length to read on anything longer than that is a little bit long. So these two together very nice, they work well. And the nice thing with using the CH unit here is if I did change my font size, you probably do this on your body and not your paragraph, but just to illustrate how it works. Let's really exaggerate by making it a 1.5 or maybe even a 1.75. But you'll notice that the lines are breaking at the same place. It's not a fixed unit, it's based on the font size that we're using. So bigger, smaller fonts, it's always going to keep a nice balance there. And you just come in with something that works. And maybe this could even be a custom property within your reset that you then change project to project depending on what you need. So that I think looks much better. So I think that is definitely worth including in your reset. But circling back to that idea of pretty, it really depends on how these are breaking. So I mucked around here for a minute, and I got this max width of 62. And you'll notice this paragraph here. And actually, while we're here, let's do a margin bottom of two RAM just to really separate our paragraphs. So we can see them a little bit more clearly, because again, part of my original reset did nuke all of the margins. So just for demo purposes, we'll bring that back in there. And notice how you get this one little lonely word there. And when this happens in typography, this is called an orphan. And we don't want to have any orphans, we want to avoid them. And in typography, in general, this is sort of a bad thing that you don't want to happen, just because it creates awkward gaps and stuff. This is where text wrap pretty will come in, and it will prevent any orphans from happening. You can see this other word has come down onto that line. And so just like the text wrap balance here is not this big change that it's making, it's just a really small improvement. And in both cases, the pretty does not have the greatest browser support and balance isn't the best in the world either. But if browsers don't have it, that's fine. Nothing breaks on your website. It's just a nice little progressive enhancement. And as more browsers gain support for it, and more people have, then they get the nicer experience. So a nice little solution right there. Now, another thing, and just to highlight a little bit more how these next two are going to work, let's just come all the way in my body here, do not do this, this is not part of it. I'm just going to say padding of like 4 RAM or something just to get everything off the edges of the screen. Because it wasn't looking too fantastic. And so with that in place, let's come down to here, and I'm going to throw this in here. And this is an interesting one because it's definitely a bit newer because we're using the has pseudo selector here. But you'll notice I'm putting all this in a prefers reduced motion, no preference. And the idea here is that if we have a site that has, you know, different sections or something that has in page scrolling, we're going to introduce that in. But in general, if you do that, it is better to have this one inside of the prefers reduced motion, no preference, just so somebody is opted out, they're not going to get scrolling because they've opted out of having those types of motions. So we want to respect that. And then we bring this in and you might be saying, Kevin, we do not need to do that. We could do something like this instead. If you prefer, this is completely fine. This is definitely something that you could do and have in there. And you'll notice it's working exactly the same. So if it works exactly the same, then why would I want to do this? And the reason for that is, and this, it's definitely a little bit more of like a niche use case. But it's in the world where let's just pretend we had something like this, where we have this like limited scroll bar area where we're scrolling inside. So I have the scroll bar here. If I do this as my HTML here, HTML. And actually, it's just doing max max width of 50 VW this way to just so you can see the scroll bar and it's not under my head. So we can see we get the scroll bar here. If I have this on my HTML, well, then this does not have smooth scrolling. It just jumps around. Definitely a bit of a niche use case, but one of those things that could come up. So instead we can say has target. If anything has something that's being targeted inside and anything that's being targeted inside is when you have these types of links that are, you know, an anchor link actually anchoring to somewhere within the same page. And now whether we have this, you know, area here with its own scroll bar, or if we're looking at the HTML element, my scroll behavior smooth is going to come in. And while we're on this note, another thing that I would add with the scroll behavior smooth here is to also have a scroll padding top. And let's just come in with like a three ram or something like that. And what that means is if I click on section three, you'll notice, you know what we're going to do here on the content. Let's put a border of five pixels solid lime. So when I click, let's go to my section two, you'll see that there's a space above the text here. If I take this scroll margin top off, and let's go back down and click on section two, that section two is right here at the top. And it says nice that when it scrolls and it stops, we wanted to stop with a little bit of extra space, what unit you put, how much space you put here, it's completely up to you. I tend to go with a larger number of three to five ram. I know some people do very small amounts. It does change depending on your use case. Also, if you have a sticky header, this would prevent things from going underneath your sticky header, which is super useful. You just have to make sure it's big enough to prevent it from going underneath. So that can be really good. And of course, even if we turn all of this weird stuff off, and I'm doing it on like a page by page basis, when I go to section one, I'm not stopping right at the top here where section one is there it's sort of overshooting it just by a little bit. And then nice section two same thing where we're keeping it from being glued right to the top I just think it makes her a little bit of a nicer user experience. Let's get rid of that now though, because we wouldn't want to include that but these two being in here I think is definitely worth it. But again, if you want just a bit more better browser support, you could definitely come in here just with the HTML and that would be fine as well. And just before we get to the next one that we're going to be looking at here, I'd like to know if there's any things that you include in your reset that you don't normally see other people doing they could be progressive enhancements or just stuff that I haven't covered here maybe there's a font that you do some line height stuff whatever it is, leave some comments down below and let me know because maybe it'd be fun to actually create like a full reset that I could share with everybody and I would love to incorporate your own ideas into it. So please let me know in the comments what you would like to see in a general reset and don't be shy about including modern CSS and some other stuff along the way in there if you think that it helps out. Now with that let's get into the next one. Another thing that I would suggest doing is a little bit of an interesting one because what we're going to be doing is if we look here in my text let's go up to my section one and you'll see here whoops I have an extra character I have two extra characters but I'm starting the paragraph off with the quotation mark here and just to make it a little bit more obvious first of all let's shrink this down so we can see it properly but you'll notice I made that large class we're going to say large has a font size of three rem and you'll notice I have a quotation mark here and no it's really ugly just like we have orphans that are ugly when you start with a quotation mark or a few other things here you get this really awkward like lining up of space and everything and it does not look so good so just like we have the text wrap balance and a text wrap of pretty another thing that I would recommend is actually going all the way to my html where I have my color scheme that was coming in from that original reset that we talked about and to come in here and actually say that we're going to do a hanging punctuation first last and that looks really weird and when I hit save nothing changes because it's not supported in chrome which isn't the end of the world but if I come and I take a look at what this would look like in a webkit browser and I do apologize because the dark mode isn't working in here but over here in webkit you'll notice that the L is actually lining up with the letters underneath and this hanging off the side because we have hanging punctuation and this is just saying that it will be hanging punctuation if it is either the first or the last letter the last you probably won't get it too much but if ever you're in a weird situation where maybe it needs to happen at least it's going to look a little bit better and it won't wrap something just because of that final punctuation that you have at the end it doesn't do it for all characters if you'd like to know more information about this I'll put a link to the mdm as well as this article where I got the idea from on chris coyer's blog right here so I'll link that and you have some examples of of what it looks like and stuff but definitely I find it looks really ugly when it's like that and it looks so much nicer when it's like this hopefully other browsers start supporting this because safari's actually supported this since like 2006 or something ridiculous it's been forever I said six it's probably 2016 still that's a long time and no other browser supports it yet but just like my text drop balance like I said as more browsers start supporting it eventually hopefully maybe people will just get a better user experience and you know in the meantime it's not the end of the world that it's like this especially when like the font sizes are a little bit smaller and you'll notice I am putting this on the html and it's inheriting which is handy we don't have to put it wherever we need it yeah when the text sizes are smaller it's not as bad though it does still leave that little small awkward space right there so just when you have it again let's just bring this up here and take a look it just looks a little bit better it's more natural when it hangs off the side and from you know any typography fans would would much prefer that and people in general you won't really notice it but it's just a nice little improvement on the overall look of your site and actually I keep bringing this up and talking about this webkit browser and you might notice I am on windows and this isn't actually safari but it is running webkit which is the engine behind safari on my windows computer if you'd like to know how I'm doing that so I can test how things are working there well I have covered that in a previous video that you can see right here and with that I would like to thank my neighbors of awesome who are johnny tim simon andrew and web on demand as well as all of my other patrons 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