5 New CSS Features You Should Know

Welcome to Syntax. On this Monday, hasty treat. We're gonna be talking about 5 interesting new CSS properties stuff. That you should know, Syntax is presented by Sentry.

If you're shipping software and users are using it, you wanna make sure that you have a handle on your bugs before your users hit them. Not only does Sentry give you access to finding and fixing all of those bugs, but they also give you incredibly useful tools Like session replay, test coverage, performance metrics, and tons more. So head on over to century dot I, oh, use the coupon code tasty treat, all lowercase, all one word, and you'll get 2 months for free. These are ones that Some of them can be used today. Some of them are going to be able to be used in the future, but let's just say all of them are straight up cool and ones that you should have in your brain. My name is Scott Talensky. I'm a developer from Denver, and with me as always is Wes Bos. What's up, my man? Hey. I I've been keeping this list of 5 new CSS features

or different things that have popped up. And we've done that. We've done a few of these, but these are five Freshies, especially the first one. Mhmm. I am. If we were click baity, we would leave this to the last one. But I'm very excited about this. Jeff. Yeah. And I had not even heard about this. Have you? It's the it's called the nth child micro syntax. No. And in fact, when you put this on here It's the 1st time that I had seen this.

And and it's one of those ones that it feels like it'd be endlessly useful, but in the same regard, It's not flashy. There's nothing that, like, really stands out as being like, okay.

Let's let's shout this one from the rooftops.

But I do feel like this one will be used. So the nth child, pseudo selector, the pseudo class selector that we have in CSS allows us To select children, like, if you do nth child 2, it selects every 2nd child.

If you do 2 n, it selects all of the even child. So 2, 4, 6, 8. Or if you do math inside of there, like 2 n plus 1, you could do the first, the 3rd, the 5th, and the odd numbers. Right? So it allows you to basically select all types of things based on numbers. Right? That sounds super useful.

But what if we wanted to have a little bit more control over that? And that's where the micro syntax comes in because You can use an of keyword and then say a class.

So or or a selector, so to say. So nth child 4 of Neat. So this is essentially nth of selected

because nth child will always Like if you have a div with, like, 8 items in it and you say nth child, 2, right? It gets a second one and there's no way for you to say, okay, I want the second one, but only the second one that is highlighted or has a class of selected or highlighted or neat or anything like that. And this will allow you to further fill down your selector into the specific selector that you want. So another good example is if you are hiding and showing elements based on display none and display block.

Maybe you have some sort of filter on the page.

You could select.

Let's say you want to select the 2nd one and highlight it.

If something is displayed none, it's still a child. So the nth Child selectors don't work in that regard. So you could use this to say 4 of not visible, basically, which is nth child of visible.

And that is really cool, even like if you have.

Like featured items or if you have even odd and you want to select the 2nd odd one. So you would say nth child 2 of Dot selected, so I'm pretty sure we could roll the tape and go back to our CSS wishlist So I said I want Enthub selected, and now we have it. So this is going to be super handy when you need it. Stuff. What what is the browser support looking like for micro

nth child?

Yeah. Let's take a look.

The of selector supported across the board in every browser. It's the of selector. So if you go to the nth child, The support for it, and it's only been in all of the browsers, Chrome 110 and Firefox 113.

So it's only been couple of months in all the browsers.

So you can go ahead. But like, but it's old enough that, like, you can probably the one that always gets you is Safari, and it's been in Safari forever.

Safari on Ios 9. That came out 2015.

Sometimes Apple is like Apple's been doing really well. We talked about that. But sometimes Apple is years ahead because I guarantee they just needed that for something And they're like, well, let's throw it in. You know, like we same with all the color stuff. They're like, oh, we needed that. So, like, it's been in Safari for 5, almost 8 years, almost 10 years. Yeah. It's been for 8 years, and it's been in Chrome for

about 6 months. Unreal. Unreal. Yeah. That's a a really interesting one. And, honestly, it's something that I think it's something I probably would have just done with JavaScript in a way before. You know? Yeah. You you do it in your templating syntax, and now

you can get away from doing that. Yeah. With with a lot of these, like, selectors that are more advanced.

Whenever I post them, people are always like, well, why would I need that? Why don't I just add a class? And the answer to that is, yeah, If you have access to that index and you are rendering it yourself and you have full control over the templates, probably, Maybe not probably, but in many cases, yeah, it's easier just to throw a class on that thing.

But For things that are variable, things that you don't have control over.

It's often nice to have a little bit more umf in your selectors a little bit more power over what you can select because not every single person is able to go into their template and add a bunch of logic or even like sometimes you have a parent that renders a child component And there's no that information isn't passed down to the child component and you're not about to start opening up a bunch of contacts or passing that data in and Breaking a bunch of tests.

It's just not not doable for some applications that we work on. Totally.

Next 1 we have here is the CSS motion path. And, again, this is not one I had ever seen. Oh, really? So

Yeah. Have you have you seen this one before? Yeah. It's one of those ones that you know, like the when you have the the text that you can clip around an image or whatever, stuff. I I said I saw this in my my journeys. Right? And it's one of those ones where you're just like, that looks great. I have no use for it. I guess I'll just ignore it,

but it's been in my brain. CSS motion path. What it is is you take a SVG path, and the SVG path is a series of Points.

So you'll if you look at a path, you'll often see like m something and you give it an x and y move 2 and then you see like a c You see 2 more things. That means curve 2.

And that's how you draw a path, right? If you go into Figma and you click on the pen tool and you draw your name, that's what I did. I wrote my name in cursive and I just right click copy as SVG and it gave me a path to write my name. Then what you can do is In CSS, you can give the selector of an element. So, like, in my example, I was Selecting a circle that would sort of look like a pen that was writing my name on the page.

So you select the little dot, which is the pen.

And you give it an offset path, which is the, the output of my signature, and then you give an offset distance from 0 to a 100% or pixel based or whatever value you want. And what that will do is it will Move it like like if you were to move something to the left or to the right, but instead of moving it to the left or the right, it's going to move it 10% of the path, 10% in of the path, and we've been able to do this in SVG land for a long, long time. But being able to take a regular old DOM element and move it along is really nice, especially for things like text and whatnot.

SVGs, as always, paths are such a pain in the butt when you're scaling them up and down. So I'm sure if you were to try to scale something larger, then you would need a library to recalculate all of these paths. Yeah. This to me seems like one of the properties

or one of the abilities in animation in CSS that's going to get unlocked Really, with the new linear function. If you have not heard of linear, it allows you to define Yes. Individual points for your animations. And You may have heard that linear animations are bad, but what linear does is it allows you to define much more nuanced, really custom Animation easings than you are able to do with bezier curves or just normal easing curves. So When I were to have seen CSS motion path animations in the past, it looks kind of hokey. You know, you got, like, a little butterfly moving around a a Predefined path. But, like, once we're able to really fine tune that linear easing path, I or that linear easing, a motion. I I I think we're gonna be able to see some really interesting motion inside of the browser. And who knows? Maybe somebody will make the after effects of, browser stuff. That seems like a really interesting opportunity.

Especially with, like, applications.

Like you could use some sort of animation application.

And then just like in Figma, how you can right click copy a path.

I'm sure that you'll be able to export that as a linear and paste it right into CSS or probably even a step further as You just design the thing directly in Figma or whatever animation tool you're using, and you could just export it directly to your code. Yeah. Word.

Next one here is scroll snap, which scroll snap basically allows you to snap into a specific Region when you're scrolling. Right? Its name is pretty self explanatory.

And this can be used for all sorts of really interesting things, whether it could be like the scrollable carousels or a lot of things you would have reached for JavaScript for in the past.

And scroll snap to me always seemed neat, but I haven't needed to build anything with this in a long type long time where you're, like, Scrolling and you want it to specifically end. Maybe, like, you have a horizontal scroll snapper, and you're reaching, like I said, for, like, a, a gallery library or something like that. But this has been in the browser for Forever. Ever. It's not even new. Which is crazy because this is one of those properties that I always looked at as being like, alright. Well, whenever it arrives, I I'll be interested in using it. But it has been in Chrome Since 2018.

So it's been in Chrome for a long time. Heck, there's even, like, minor support for it in Internet Explorer 10.

So Scroll Snap has good support, and you can use Scroll Snap today.

And it it's really pretty neat. You know what? I guess another the Jeff. You know, designers like what that thing. They like to curate how the screen looks above the fold.

I I kinda always hate those sites that, like, you you have the scroll and it like you feel like you're scrolling forever just to get to the actual content. Totally.

It doesn't have to be that day. So scroll snap has both mandatory and proximity snapping, meaning that mandatory will always snap to the closest bound, whereas Proximity will snap if the browser sees it appropriate, and that's kind of cool. So I would imagine, like, Let's say you have a calendar, a grid of calendars every week you have. So let's say you're scrolling and there's like 30 pixels of the week before there. What it would do is you just snap up so that the The next week is at the top of the thing, right? Like little helpful things where you, the user, don't have to perfectly position everything so that it works or even like, you have an image gallery, and you want to be able to just swipe Through a bunch of images. Like, that was a lot of JavaScript Yeah. Before PCD this type of thing.

What was the The classic jQuery plug in that everybody used for that. Yep. Lickety.

Lickety or yeah. There's so many of these. Slick slider.

Junk. That's the one I was thinking of. I can picture the website now, the the web 2 point o style. You know what? Those were unreal. Yeah. Something else, you know, even as you're talking made me think like, oh, in our podcast listing for the episodes Yep. I mean, why not just throw that in a position where you could, or sorry. Like, the search the search. Right? You have the search bar. You're scrolling through all the episodes.

You'd want it to kinda snap to the top of each one

Yeah. It's it's a very, like, fussy thing to get right.

But I think you probably don't even notice it When websites are doing this, like it's just a good experience, whereas it's bad if you're like, oh, my gosh, this thing is snapping left and right. Like, I don't want it to be there. I want it to Go exactly where I want. So that's

tread lightly, but I do a lot of video editing. And with that editing, You have, like, a one key to turn off snapping. And I'll tell you what. Snapping is one of those things that when you want it, you're so the Thankful that it's there. And when you don't want it, you're get it out of here. Right now, I'm so angry with the snapping. So, yeah, be be cognizant of that, folks. Next one we have here is scroll driven animations. This one is

very, very cool. If you go to scroll driven animations.

Style, you can see a bunch of examples. This one is currently I think only in Chrome. Is that right?

It's it's in Chrome behind a flag. So it's not even really Yeah. Yeah.

There there is a polyfill for it. So this one this one's not maybe something you can use just yet today. But Again, it's coming down the pipeline and these will be pretty helpful. The way that it works is, As you scroll, you'll get access to how far in you have scrolled. You can get it. There's a CSS API and a JavaScript API, So you can do them in a bunch of different ways. But the reverse, if you can do some really cool image galleries and some Really neat carousels you can see, like, you know, sometimes when you have a long blog post and you want to show somebody how far they have scrolled through the page, You could do that entirely in CSS. I've got a couple of examples I've been poking around at over the last couple of months. I'm waiting for it to Like, I have all these things I want to do tips on, but I'm sort of like waiting for them to hit a bit more browser support. Otherwise, people say, yeah, that's cool. But, like, are we ever actually You're gonna be able to use it, you know? And not only that. That was exciting when But people can't use it, you know? So like Yeah. You can't even link them to a demo unless they turn on a flag. So, I'm pretty excited about this type of thing. I think with it, we'll see a lot of new, obnoxious websites. But as with all things, we'll find nice,

uh-uh subtle ways to introduce it. Yeah. Totally. And if you wanna learn more about scroll driven animations, we talked to Bramas about this on episode 6/19.

We'll have that linked up. And then he has a really, really super good demo page that shows, like, the kind of cool stuff you could do, Like, reverse scrolling columns or or just the the type of imagery when you scroll type of things, again, that we're often using JavaScript for right now. Stuff. And that's that's what you gotta love about most of these new CSS features is that they're eliminating, situations where we'd have to reach For JavaScript. And then guess what? You're installing a React plug in or something, and you're just getting yourself, further down the chain of something that the browser can optimize.

Next one here is margin trim, which if you haven't heard about margin trim, this one only exists in Safari, But it's existed in Safari since version 16.4, and margin trim is an interesting little helper that When I first heard about this, it was like, okay.

That sounds like something I would use all the time.

Give it to me now, but, here we are, and it's still only in Safari. So what is margin trim? Well, it basically allows you trim margins if it's, if, basically, it's reaching the end of a container. Let's a hypothetical situation here is this is probably a situation many of you have hit.

You have, like, a card.

You have an h two. That h two is inside of the card or an h three, whatever it may be. Right? Inside of the card, now all of a sudden, what do you got? You got that that h three with the margin. Your card probably has padding. It's getting pushed down. Or, likewise, your card finishes with paragraph.

Now you got that double space where you have a margin And you have a padding, and, basically, you then have to apply some CSS. So sometimes people say, okay. If it's the 1st child of a card, margin top none. If it's the last child of a card, margin top bottom. What this basically does is allows you to say, hey. Trim the margin so that way when it approaches the container edge that there will be no margins. And there's a lot of interesting properties for this where you can say, hey. Trim the margins for block, block start, block end, inline, inline start, and inline end, giving you really full control over what the heck you're trimming at any given point.

Jump. But, again, this is just like a nice little helper that, hey, it feels like we should have had a long time ago considering how obnoxious that is. Yeah. You don't have to write those 1st of child, last of child selectors.

I did a little tip on this a couple of months ago, and overwhelmingly people said, I don't need that because, I use first of all, a lot of people says I use Tailwind, And Tailwind has a like a spacing helper, which will essentially do the same thing, which is take it off the first one, take it off the bottom of the last one and Put margin in between each of them. And then the other thing is that why not use use gap like CSS Grid gap We'll put padding in between all of the items, but it doesn't give you padding at the start or the end or the left or the right of the item. And That's actually very valid. We ran some stats on the Syntax website and we're using way more gap Then we are margin, which I thought was was pretty interesting in that like, yeah, when you need to space things out, GAAP is maybe even a better use case. But it's it's not a use case for absolutely everything. Case in point, sometimes you have different amounts of margins on different things, like if you have a title and a tiny little date right underneath that, that thing. You could probably wrap it in a div, but that's kind of annoying. If that's the case, you might want just like 5 pixels of margin, whereas if the rest with gap, it's a uniform margin for everyone. And no one's at least I think so.

No one's writing a blog post and using GAP to put padding and margin in between each of their paragraph tags.

They're they're using heading a merge. Right? Yeah. Totally.

So Yeah. And and we went pretty hard on on GAP because we did vertical grid layouts for a lot of stuff on the new syntax website, but, again, we're still using margin. There's there's still plenty of scenarios where this would be, Much needed and appreciated. It feels like the type of thing Yeah. That should have been in CSS for a long time. So I'm gonna I'm gonna make a a rule,

And you tell me what you think about this. Gap for layout, margin for content.

Oh, I love it. It's it's so perfectly fitting for a blog post title.

That's, like,

lovely. There you go. Oh, maybe we should say one more thing is You may also hear people say don't use margin.

And that idea of what we just said of we use gap a lot more than we use margin.

That's because all of the components that Scott made in the website, none of those components have margin on them because We don't know where those components are going to go. They're self contained and they shouldn't have any effect on what is outside of it. So if that's the case, then If you do want spacing between these components, that's where you should use some sort of gap. And that's the whole idea behind don't use margin, use gap that Don't use margin doesn't really affect text and block quotes and heading tags. Smart. Sweet. Alright. I think that's it. Hopefully, you enjoyed that and learned a few new things. I'm excited to use these things on our new website. Yeah. You got you really got me thinking on scroll snap. That's one that I you know, I've kinda had in my brain, but I've never really thought about it beyond

carousels.

So now that I'm thinking about it about user experience. I'm interested a little bit more. So you know, I'll say one more thing. One other thing I'm excited or I want to try is I want to take the Output wavelengths of syntax and make it into a single A little curvy, yeah.

Yeah, like like a little bit like a simplified curve of of what we said. You know, if there's, like, a bit of a gap or, like, we could color them based on who's speaking we have that information.

And I thought, like, what if we put that we want we want to make, like, an embeddable player.

And what if we had, like, a little The face of the person who is currently speaking.

What if their face was going up and down the wavelength as they're going because you could use the CSS motion path for that.

So you have to generate a path from the audio wavelength And then use CSS motion path to follow it along as you

you go. I truly love the way you think, Wes, because That's not something that I thought about. That's not all I can think about as you said that. I'm like, oh, that's a that's a great idea.

Wow.

I have some code somewhere that does the audio analysis of the MP3 and comes out with a wavelength because I've done it in a couple of my courses, but we got to figure out how do you do that? Server side. I've done that as well. And then you got to save that path in a database. You can't like load the entire MP3 and run the analysis in everybody's browser every single time.

You could. You could, but we're not going to. It's kind of wasteful.

Yeah. All right. That's it for now. I'll I'll stop adding little things on. Thanks for everything in. Catch you later.

Peace.

Head on over to syntax dot f m for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.