Under the radar CSS features for your CSS reset

Key Takeaways

Happy New Year my frontend 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 um then there you go it's not doing too much but if we look it gives us a dark mode uh it is a little bit opinionated because we're doing a font inherent 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 am going to put some font sizes here on the titles just cuz it makes them a lot bigger and a little bit easier to see uh 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 W balance is a nice one that balances out when we have headings or things like that uh 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 and 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 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 cuz that's a comfortable line length to read on any 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 and 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 uh 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 uh project to project depending on what you need so that I think looks uh much better so I think that is definitely worth including in your reset but circling back to that idea of pretty uh 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 parag graph 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 uh for demo purposes we'll bring that back in there uh 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 drop 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 WP balance here this 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 on my body here do not do this this is not part of it but I'm just going to say padding of like four rem or something just to get everything off the edges of the screen uh cuz 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 cuz it's definitely a bit newer cuz we're using the has pseudo selector here um but you'll notice I'm putting all this in a prefer 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 in ruce that in uh but in general if you do that it is better to have this one inside of the prefers reduced motion no preference just so if somebody is opted out they're not going to get scrolling because well 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 um this this is definitely something that you could do uh and have in there and you'll notice it's working exactly the same so if it works exactly the same then 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 let's just do a Max Max width of 50 VW this way too just so you can see the scroll bar and it's not under my head um 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 a something that's being targeted inside and anything that's being targeted inside is when you have these types of links uh 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 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 uh you know what we're going to do here on the content let's put a border of 5 pixels solid lime uh so when I click let's go to my section two you'll see there's like 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's just nice that when it Scrolls and it stops we want it 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 3 to five REM I know some people do very small amounts uh 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 uh 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 uh and then the section two same thing we're we're keeping it from being glued right to the top I just think it makes for a little bit of a nicer user experience let's get rid of that now though uh cuz 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 show 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 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 um paragraph off with the a 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 uh but you'll notice I made that large class we're going to say large has a font size of 3 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 uh 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 uh 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 uh 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 cuz it's not supported in Chrome uh 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 cuz the dark mode isn't working in here uh but over here in webkit you'll notice that the L is actually lining up with the letters underneath and this is 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 uh 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 uh 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 uh I'll put a link to the MDM as well as this article where I got the idea from uh on Chris Ker's blog right here so I'll link that and you have some examples of of what it looks like and stuff but definitely uh 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 cuz Safari's actually supported this since like 2006 or something ridiculous um 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 owers start supporting it eventually hopefully maybe uh people will just get a better user experience and you know in the meantime it's not the end of the world um 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 um 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 um and people in general you won't really notice it but it's just a nice little Improvement uh 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 enablers of aome 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