Keeping up with CSS: The features released in 2023

hi there my front and friends there were a lot of amazing things that were added to CSS this year and actually while I was recording and researching for this video I just kept coming across things and being like oh yeah that was added this year or wow this feature has better browser support than I thought it would and I can't lie it's a really good time to have a YouTube channel that's dedicated to CSS now I'm making this video because I'm always asked about how I keep up with all of the new features that are coming to CSS so I figured this would be a nice way to highlight a lot of the new things for everyone to look forward to as we move into the next year and also highlight some features that might have better browser support than you might realize as we dive into this I just want to say that it is very possible that I do miss a few features along the way here but if I do miss any of the ones that you're excited about please let me know in the comments so that I can highlight them the next time I do one of these updates because going forward I'd like to do one of these updates probably every quarter as long as there's enough to talk about each one uh and I think there will be just because of how fast CSS is expanding and growing also any of the browser support numbers that I do are of the time of recording this uh so you can check the date when this was published and they're all based on can I uses Global numbers uh if you have access to your own sites analytics those are always the best things to check and if you're watching this at any point in the future you might want to check what the actual browser support numbers are using can iuse and we might as well finally jump into the first thing that I want to talk about which is nesting which first gained support in Chrome in April of this year and has since gained support from both Safari and Firefox as well nesting allows us to well Nest selectors inside of other ones like we've always been able to do with pre-processors like SAS and less but there are a few little differences between them but some of those differences are actually being reduced because there is a new more relaxed syntax that only Firefox uh supports right now but that is on the way for both Safari and chrome as well and if you don't know what nesting is at all you can see right here the don't worry about my grid template columns and rows you can see here I have this hero grid and inside of there I have a nested media query with all the Styles I want for that and then even in here I have this button selector and my page title selector that are nested within my hero text uh the syntax highlighting is a little bit off just cuz vs code maybe there's something I could add here uh that would help out I'm not sure I haven't looked but uh I'm fine with it not looking fantastic but the main thing is it's just really nice to do and I love being able to Nest media queries it's by far the my favorite thing so I don't have to put my hero grid again I can just put the media query and keep going from there and for me I think one of the most exciting things about nesting is we have a feature that was added first just this past April and it's already supported by the three browser engines and it currently has over 80% support when we use the original syntax uh which is absolutely just wild and if you use the the current syntax or the the original syntax of it and you know as the browsers gain support for the newer syntax the older stuff still works it's just it's less strict than it used to be um I'm not going to dive into it too much in this one you can look into it a bit if you want to know the difference between the two um but it basically you can just do an element selector nested without a symbol in front of it going forward now moving on to another feature that has even better browser support is the has pseudo selector I think is what we call it uh which is coming in at a shade under 90% support and the main reason I actually wanted to talk about this cuz it's been around for a little while it wasn't introduced this year but Firefox is finally getting support for it with version 121 uh and I love has so much it opens up so many new things that were never possible before in CSS uh just really fast here is like one example that I like to look at here I have my my cards uh and I might have this media inside of it but like normally my card actually I don't think I need that here normally my card would have some padding on it and so I what I could do is if my card uh let's go find it if my card has a media we're going over to a display grid and setting up two columns and the rest of the time we don't have that and other things too you can play with your padding depending on stuff but you know we're saying if my card has this as a child or not even a direct child but if it has this media thing in here then we're just going to say okay now we're changing how this element is working so great uh and there's so many really other awesome stuff you can do with it I've covered this in videos before I'll link to those in the description and most of the things I'm talking about in this video I have done videos on so if there's something you do want to learn more about check the description and you should find a link either to a video I've done and if I don't have a video I'll link off to another resource instead yeah it's really exciting to see how with has being in all three browsers now and it's just sort of gradually inching up higher and higher in the browser support tables really really awesome to see uh but up next we're going to look at another one which is text wrap balance which was first added to Chrome in May of this year and quickly followed by Safari in June sadly Firefox doesn't actually support it yet but it's a very nice Progressive enhancement as it's primarily to prevent um like issues in our text or actually let's just take a look CU I think it'd be easier to explain uh so here we have this where you can see that this is uh a demo by the Chrome for developers blog they put together uh which is nice in handy uh and here we have the on balance text and here is with the balance text so it's mostly for headlines or headings uh short bits of text I think it only works if you have two to three lines of text and after that it has no impact uh but it just balances text out to prevent the bottom you know for having two lines on a headline that are unbalanced uh and you know if a browser doesn't support it they just get this version so nothing breaks it just it might look a little bit nicer if you're on a browser that does support it and the one that's may be a little bit more exciting here is text wrap pretty which also by the same team uh they have another demo here where this is for longer pieces of text your paragraphs where you go three or more lines long uh where sometimes we get orphans and an orphan in typography is just when you get this lonely little one single short word all by itself on its Lonesome down there H and if we turn on pretty balancing it just prevents an orphan from being there uh so nice and handy uh it won't be like perfect it's not going to do the balancing so the line won't get super short to try and you know balance everything out the same way here where it makes a pretty big difference at times uh it's just going to make sure that there's no single word sitting all on its Lonesome at the end of a paragraph now this is only supported by Chrome which only landed in version 117 uh but I think it does a nice job and once again it's a really nice Progressive enhancement and as more browsers get support for it you'll just have more and more users getting a slightly nicer experience so it's just one of those sort of like things you can throw in there as part of a reset it's going to work and you don't really have to worry about it too much after that and slowly over time more and more people will get that better experience next up we're going to talk a little bit about color mix which is I'm going to count it as a new feature for 2023 even though Safari started supporting it back in 2022 because it only gained support about halfway through December of that year in Safari and it was followed by Chrome adding it in March and Firefox adding it in May and now with all three browser engines having support for it color mix is already at about 85% support which is incredible for such a new feature and just a really fast look at how this one works uh it's basically you can mix two colors I have a purple here and a cyan here and then my one in the middle I'm just doing a color mix and I'm mixing my color one and my color two now there are a few things uh that are a little bit strange but you have to you do have to choose what color mode you're mixing with and that will actually change the result as you can see there uh and there is a shorter and longer thing that's even a little bit different so here if I did uh if I switch shorter to longer uh we'll see that I think yeah we go the other way around the circle anyway it can be a little bit funky but it's actually a really powerful feature that can be really useful for color schemes and everything so definitely worth checking out and while we're on the topic of colors and here I put in lch both lab and lch gained support in Safari way back in September of 2021 but they only landed in Chrome and Firefox this year and lch here is for lightness Chroma and Hue and because hue is one of the things here one of the ones that we can play with uh it's a little bit similar to hsl where it's easy to know what color you're getting but it has the added benefit where it lines up better with human perception and so if I go with this like sort of washed out yellow I think it's a nice example because as I go through the queue here you can see it's always sort of like the same we're getting a few fallbacks but don't worry but we're we're getting sort of the same level of color if you want to say whereas if I compare that to hsl which is right here um if I'm and here's the final output so let's get a really saturated color and as we go through here like the blue is actually kind of dark and then as we go into this like that's really bright yellows tend to be really really bright and then as soon as you get to the orange it's sort of Darker again so lch in terms of just shifting through the Hue gives you much uh more uniform results and it's much more as I said in line with human perception the problem with uh lch is it's a little bit weird to use uh because you have to deal with the chroma and there's has to do with how color models work um and you know where the what colors are actually available to see um and what our monitors can actually output but let's say I go into like a very high lightness so we're going bright I can actually get into like this really bright green over here so here you know uh let's go right there I get this really bright we can even go a bit more this way there we go I can get this like super vibrant really bright green but the problem is I have a really small window where I I have this lightness chroma uh yeah this lightness and chroma that are available because as soon as I go out of that like there there is no greens and like if I go into the blues they don't exist within this color model so it all of a sudden that Hue that was really easy to follow it becomes a little bit trickier because I just don't have a blue in there and then the opposite as I go darker my blues uh and actually darker not darker is it darker I see this is well here as I'm going through the lightness you can see the chroma that's what I was thinking but as go through the lightness the chroma shifts and it's more the purples I was thinking um so here the purples in this area has this like huge range of chroma available that's only in a few of the different colors or Hues and and stuff so you can see it's a little bit weird in that sense um and definitely takes a little bit of playing around with maybe to get the colors you want and I was hoping it would be easier to use there's definitely some tricks to lch but I'm still really happy that we have it cuz it actually does open up more colors than are available uh if than if you're using hsl and RGB the other thing is you have lch and OK lch and I would actually recommend using the okay lch version you're just going to get a little bit more consistency with your colors uh and everything along the way so just there is those two and you also have the lab as I said you probably aren't going to use that so much for actually writing in colors but you might use it for when you're doing color mixes and you're uh mixing two colors you might be mixing it using lab or something like that and continuing on our trend of color function that Safari was the first to add we have relative colors as well which was only added in safari in March of this year followed by Chrome just last month and well we're still waiting on Firefox for this one and I won't lie this one looks really strange you can see here I have uh some CSS looking at it uh but it's really cool because what we can do is we can take a color and then I can choose something like hsl or RGB and I can actually change parts of it so I'm saying I want my color from so we're basic it on steel blue but I'm taking my H my S my L and then you know maybe I need it to be transparent I just do a five here and then I'm getting the 50% opacity on that color even though it's steel blue which is just a keyword cool right uh and this could be anything this could be an hsl an RGB a lab whatever you want any color could be here but then the next thing that's cool is I can also play around with these so I could say Cal and I could just say I want my Hue to be plus 100 and then it changes my Hue it adds 100 to the Hue that was steel blue if steel blue is an hsl or I can go to my saturation I can do calc and on the Cal here let's say times 1.5 and it will become more saturated or I can say times 0.5 and it's going to become less saturated so this one definitely opens up a lot of possibilities but because it's not in Firefox yet and because Chrome just added it support for it is below 50% right now but with chrome having added it in it should go up pretty fast fast from here now moving on to a feature that people were asking about for a really long time we have container queries which are about to hit 90% support and that also means they are in all of our browsers as well so let's take a look at this one I'm going to jump on over uh to this demo that I have set up and you can see this sidebar here where I have these items that are stacked on top of each other as this gets narrower at one point it runs out a room and it jumps underneath here and when it goes down below it has a lot more room and they stack one next to don't stack they go one next to each other instead of being stacked and then as we continue to go smaller in space everything Stacks once again and this is all happening because I'm using a container query so if I come and I take a look in here let's Zoom way in on my Dev tools I have this container that's set up around there and then if I take a look at my uh o that's right here it just has this display of grid uh right there but as we get more room for it you can see I have my container coming in so when the container so in this element the parent of my o has a width of 35 or bigger I get my grid template columns coming in and it gives me three columns and what's nice about this is I'm not worrying about the viewport I'm worried about how much room this o has to live in so if we go even bigger once again now even though we're at a larger viewport these are going and stacking again here because the apparent doesn't have a lot of room if I was doing this with a media query I'd need one to say at the large screen size I need them to stack then I would need to worry about where my break point is for this to switch match that breakpoint to make it go to three columns and then also come down and match whatever break point this is to make it go back to the way it was before and now I don't have to worry about any of that I just say if it has enough room then it goes next to each other if it doesn't have enough room it stacks and that's it it's wonderful and this is just like a really simple example container queries are something we waited for for a long time everyone was excited they're here here and we can see why they're just they're going to make our lives so much easier going forward and another feature that has even better browser support than that is Cascade layers which now have over 93% support at the time of recording this uh and these allow us to create layers within our CSS and you at layer right there uh and this isn't something I've actually used a ton of even though I have done a demo or a video here on YouTube about them uh and it's just because I haven't really had a huge need for them but I do see their usefulness and now that support is getting better it might be something that I actually do start looking into a little bit more going forward and I recently did a survey and from the results of that one of the biggest complaints with CSS that people had was Project maintenance and if that's the same for you you might want to look into how layers work because just as an example here uh I have these components that are set up so my layer of components if you see here I have my layout and then I have my components coming after that and so if I come and I look at my component uh right here I have my background set and my color set right here and this button if we come and look at my HTML is right here and it's a link within uh right here right I have these two links that are inside of my UL which are in my nav list this is just a DOT button if I come down into my layout now I have this really high specificity selector changing the color of my links because I wanted those links to be this green color that we can see right here normally if we weren't using layers or if I change let's just change the order of these I can take layout off from here and put layout afterward which makes it more higher specificity you can see I've lost the text uh the text is still there it's just now that you know now that this selector is overwriting it so it's getting the color of lime green as my text color so this is so if we go back now we have even though this is a lower specificity selector and this is a really high specificity selector this one is winning because it's on what's considered the more important layer so this could be a really nice way to deal with project maintenance and not having to worry so much about specificity uh as much because you group things you have your reset maybe a framework your base layer your layout your utilities you organize them in the order that you want them to work and then they're just going to work every time your utilities could even be element selectors doesn't really make sense but if they were element selectors they would overwrite ID selectors coming from your components so it could be a nice way to improve the maintenance of your projects without having to worry so much about how other people are authoring their CSS as long as they're organizing it in the correct layer and now let's go on to the next one which is one that we're going to throw in here even though it gained support way back in March of 2022 uh which is the CSS trigonomic functions and it was Safari once again that added them way back then but Chrome and Firefox only got around to them in March of this year but with all three of them on board they're already at over 88% support right now and I'm really not much of a math person at all but I've looked at them before I see how they can be really useful and other people that are much better at math like anti Tudor who put this video together uh highlights some of the amazing things we can do where all of the animation stuff that's happening here that used to have to rely on JavaScript now we can do a CSS we're just basically updating a couple of things here in the JavaScript but all of the styling stuff uh is done with CSS using trig if you need circles and animations around circles or anything like that uh it's it's exactly what you're looking for and if you know about how these things work better than I do you can probably already think of other things that they could be useful for as well and as we go through all of these uh things if you'd like to keep up with CSS but you'd like to do so on a more regular schedule than waiting for me to put out one of these videos every now and then I do also have a Weekly Newsletter where I share general advice as well as resources and interesting sites that I come across every week and also what I've been up to each week as well and and if you don't want any other emails in your inbox you can also get it as a podcast or if you prefer video you can get the same content over on my second YouTube channel you can find links to all of those in the description below but back to the update uh there's no way I could go through an update like this one without talking about subgrid I've already made five videos on them and four of those videos I actually made in 2021 I've been championing for subgrid for so long now basically ever since Firefox gained support for it back in 2019 so it feels a little bit funny to be doing a new features list for something that a browser supported for 4 years now but it only gained support within Safari in the middle of last year and it only landed in Chrome in September of this year it's super frustrating that it took this long but better late than never it does have only about 79% support right now thanks to Chrome adopting it so recently but it should rise quickly from here and once again uh for a quick demo I actually used subgrid on this part of the same one we was doing a lot of new features here uh on this one and once again in the dev tools if I move my face out of the way you can see that we have a grid setup and then I have a subgrid setup and the reason I wanted to have a subgrid here is because I wanted this text to live across these two columns of the main grid but I didn't want this one to go outside of this part here and I could have done this without subgrid by having just not bothering with this hero text the problem then is you're sort of getting all of these extra rows that are being created on the main grid that I didn't want I I wanted one row on my main grid uh so I just wanted a text box in there but then I needed this text to go out I didn't want to muck around with negative margins or weird stuff or having to come on this one and add a margin to it or something I just wanted that you know my button and my text here to fit the First Column and this text to go across too and with sub grid I just tell the parent that you're going across two columns and this text goes on two and then this one goes on one and it just works it's it's fabulous uh and there's a lot of really good use cases for subgrid this one once again is a simple one but if you want to know more as I said I've done several videos on them and you can check for the links in the description uh to find out more cuz I'm in love with subgrid I'm so happy it's finally here and moving on to the next one it's actually something I've been keeping a close eye on for a really long time now and I actually do have a bit of content planned around it as well which should be coming out really soon either just before this or just after this video uh which is view transitions now sadly view transitions are only in Chrome right now having been added in March of this year but it also goes to show you the dominance that Chrome has on the market as it already has over 66% browser support and there's actually two different parts to view transitions one of them that's the currently supported Thing by Chrome at the moment is for making it easy to transition things when you update your Dom on on a single page so you have a bit of JavaScript make a change you know you click a button you update the Dom and then you can just have a transition from the old state to the new state super simply the more impressive thing though which is only behind a flagging Chrome right now allows for transitions between Pages making multi-page sites feel like single Page Apps and Astro has actually completely leaned into this in a very big way and I absolutely love this demo that they put together for it so not only have they leaned into it but they've also built in uh you know a polyfill into the system so even though I don't have it enabled in my Flags right now it works and so this is a multi-page site you can see that this image if I go back the image you know I click this one the image transitions over isn't that just amazing and this is a multi-page site as I go through these if it's playing what if I go back and it's still playing down here at the bottom as well um not sure how the music part of it down here works but just this transition is so nice they've put together several demos this one's like a really simple one but it just shows that you can have something animate across makes it feel much more just amazing and you can do other transitions in this you can just have the whole page fade like cross fade from one thing to the other uh but it's all the ones where like the the titles and other stuff like move from one place to the other that makes it feel much more just immersive and much more like an Spa uh and something I'm really looking forward to gaining more browser support and sticking with animation related things I recently took a look at how we can use the new animation timeline with the scroll function to make a CSS only Parallax which we can see right here and so we just scroll down you can see like all these different pieces are moving at different speeds which is really really awesome uh and we can pull the code for that one up I have it right here off screen and so just looking we can see that I'm all I'm really doing is this animation timeline of scroll so I put animation I give it a name uh the animation is just transitioning stuff up and down and I have a scroll on there and it it works and so you can do link your animations to scroll without having to use JavaScript which is just really nice uh and in this video I sort of just scratched the surface of what we can do with it I do have plans to do a much bigger Deep dive on everything about it coming up at one point in the not too distant future now as for support for this it is only in Chrome right now and it's about 65% support uh although it is behind a flag in Firefox as well and for me for some reason this is one of those features that doesn't seem to be getting enough attention yet as I really think it's going to make a lot of really complex animations a heck of a lot easier and getting you know these ones are only supported in Chrome and getting even more into The Cutting Edge we have scoped CSS which just landed with chrome 118 at the beginning of October and scope has been something or a feature that people have wanted as part of CSS for a really long time now and it's finally starting to become a reality and scope's really interesting and just as a really quick example here if we take take a look uh here we have a class of title a class of title and a class of title on all three of the headings here and so if I came in and I said my title is color lime green for some reason obviously they would all become lime green but maybe you only want to affect the ones that are inside of an article and nothing else now of course we could say that this is my article and then choose mytitle that way but we do have more options than that so what we can do instead is here I can do an scope and we can say scope for my article and then we're going to select all of that and we're almost there there we go uh you can see that it is working and we're only selecting our titles that are inside of the article but even more interesting than that is you can choose where your scope is starting and finishing and all I have to do is here where I have my at scope I can just write two and then I write where I want the scope to finish so in this case I want anything that's inside an article but I don't want it to affect my email sign up so I just say to email sign up and by doing that you can see that we've styled this one but we're not selecting anything that's here and let's just come and we'll copy this and we'll paste it down here so we're still in my article we'll close that paragraph off and you can see this is still getting styled here so we're staying as long as we're inside the scope of the title it's working but if we reach an email sign up that styling won't actually B lead off and go into the email signup but it will work anywhere else so it's a really interesting thing that I think might look a little bit weird it's going to take some proper planning to use it correctly but it allows us to scope our styles to use them in specific areas and I think it's going to be really powerful and something we start seeing more and more often once browser support for it starts to increase shifting gears a little bit we have a simpler feature which is user valid and user invalid and these are two pseudo classes that have been supported by Firefox since 2020 1 but only landed in Safari back in May and in Chrome this month uh which is November they're actually very similar to valid and invalid which you're probably already familiar with uh but here's a very quick example where we just have this form element and so because it's a type of email and there's nothing that means it's invalid which is really annoying but as soon as I come in here and let's just say I do like I put in something it's still saying it's invalid which is correct uh but as soon as we turn that into an ATS something.com now it's a valid one this one down here instead of using the invalid I'm using user invalid and what that means is it's waiting for the user to interact with it before it decides whether it's actually invalid or not and this makes so much more sense right so we have an email field it's a required field we need them to put an email address in if I click in and click out I haven't really interacted with it yet I haven't done anything with that field so it goes okay whatever we're going to leave it but as soon as we come in and we put in my email address and.com well it's completely fine but if I stopped here now it's saying that it's invalid I've started to input something I left the field I didn't fill it out the way I needed it to and we're getting the error there and of course this isn't perfect you still want to be doing server side validation and stuff but you could even have it this checking uh using Rex and other things to make sure you're getting much better matches here or if you need passwords that have certain requirements and stuff just for a really simple inval like user invalid and styling it up that way uh you know that could be really helpful but again don't rely on this instead of serers side validation this is just to make sure that you're getting through this first step and it just makes it so much easier to style and is so much better than using the invalid version and one other new feature that I'm really really looking forward to is the text box trim and it also it's textbox trim and text boox Edge and this is a really fun one uh even though it's supported by zero% of all browsers now I thought it would be a good one to talk about uh first of all because it's coming it is in this Safari technical preview right now and it's something that I've been waiting for for a really long time this article here came out in 2020 to sort of talk about the idea behind it uh Ethan W here has been championing this for a long time uh and even I sat in on a meeting uh with Ethan and some others as part of the working group that was going over the inline element spec which this included uh and it's something I really hope actually becomes a thing and basically if you come in and like select text you know there's like that extra space on the top of the bottom and this can be really annoying if you have a button and then you put padding on the top and bottom of the button sometimes the padding on the top and bottom is not the same because when you have your text selected the height of the text is different on the top and the bottom right and this really depends on on the text itself we'll probably see it even look at all that extra space on the top and there's not very much on the bottom when you take the descenders into account on this font and it's different for every font too uh the idea originally was going to be letting trim from what I understand that's now our text box trim and uh text box Edge where we Define The Edge and then we can trim to that edge uh and basically it lets us like slice off that extra space uh and there's a nice example here where you might have some a setup like this and you have a gap of 32 pixels on your grid but the problem is because of that extra spacing you actually end up with 39 on the top and 42 on the bottom even though you wanted 32 on both and you define 32 on both you got a lot more with this feature let's go away medium with this feature we're going to be able to like slice off that ra all all these extra pieces of that text and just line things up exactly where we're going to want to and it's something like I said that I've been waiting around for for so long now and I'm happy to see a browser finally making some progress on it and that was a really big update and I'm sure I've missed out on a few things along the way here so if there was a feature I didn't mention that you're really looking forward to and you'd like me to talk about in a future video please leave a comment down below and let me know about it once again if there was any features along the way that you're interested in there should be a ton of links down below this video and with that I would like to thank my neers of awesome 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

Channel: Kevin Powell

Views: 89,818

Keywords: Kevin Powell, css, front-end, frontend, html, web development, new css features, css tips, new css, new css version, new css release, modern css, css tips and tricks, css tricks, css tricks and tips

Id: LGRogkgRrOs

Length: 31min 13sec (1873 seconds)

Published: Thu Nov 23 2023