5 New CSS Features You Should Know

Tolinski.

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 and it's one of those ones that it feels like it'd be endlessly useful, 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

Boss, and Scott, el toroloco,

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, barracuda,

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.

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 sure if you were to try to scale something larger, And the answer to that is, yeah,

It's not flashy. There's nothing that, like, really stands out as being like, okay.

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

and I just right click copy as SVG and it gave me a path to write my name. Then what you can do

Next one here is scroll snap, which scroll snap basically

then you would need a library to recalculate all of these paths. Yeah. This to me seems like one of the properties

the output of my signature, 2 of Dot selected, 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.

is in every browser. It's the of selector. So if you go to the nth child, Don't use margin doesn't really affect sometimes you have different amounts of margins on different things, like if you have a title and a tiny little date right underneath

give the 9. That came out You could. You could, but we're not going to. It's kind of wasteful.

export that as a linear and paste it right into CSS or probably even a step further as

I'm sure that you'll be able to I think you probably don't even notice it When websites are doing this, like it's just a good experience, 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 give

browser stuff. That seems like a really interesting opportunity.

Animation easings than you are able to do with bezier curves or just normal easing curves. So 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,

Region when you're scrolling. Right? Its name is pretty self explanatory.

a motion. I I I think we're gonna be able to see some

And this can be used for all sorts of really interesting things, whether it could be like the scrollable carousels snap into a specific

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 Apple is 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 Style,

path. But, like,

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 of what we just said of we use gap a lot more than we use margin.

And you give it an offset path, which is the,

So you'll if you look at a path, you'll often see like m something you you have the scroll and it like you feel like you're padding and margin in between each of their paragraph tags.

really interesting motion inside of the browser. And who knows? Maybe somebody will make the after effects of,

SVGs, as always, paths are such a pain in the butt when you're scaling them up and down. So text and And I thought, 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,

or one of the abilities in animation in CSS that's going to get unlocked

is really nice, especially for things like text and whatnot.

I had ever seen. Oh, really? So yourself and you have full control over the templates, We don't know where those components are going to go. They're self contained Points.

once we're able to really fine tune

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.

In CSS,

like, applications.

that linear easing path, I or that linear easing,

you can

allows you to 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,

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

about 6 months. Unreal. Unreal. Yeah. That's a a really interesting one. And, honestly, it's something that I think

highlighted a calendar, a grid of calendars every week you have. So let's say you're scrolling more advanced.

Like if you have a div with, like, 8 items in it and you say nth child, Like featured 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.

another good example is if you are hiding and showing elements based on

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, 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

But what if

children, stuff. That you should know, Syntax is presented by Sentry.

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

the pseudo class selector that we have in CSS allows us To select further down the chain of something that the browser can optimize.

like, if you do nth child 2, it selects every 2nd child.

and then say a class.

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

for

items But

If you do 2 n, it selects all of the even child. So 2, 4, 6, 8. Or if you do 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, a gallery library or something like that. But

You could select.

Next 1 we have here is the CSS motion path. And, again, this is not one sees it appropriate, and you give it an x and y move 2 and then you see like a c will snap if the browser 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.

Sometimes 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

Maybe you have some sort of filter on the page.

across the board

So it's only been a path.

for 8 years, and it's been in Chrome Peace.

pseudo selector,

because nth child will always

Safari on Ios and then you Especially with, 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,

Yeah. Let's take a look.

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

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.

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 because all of the components that Scott made in the website,

Maybe not probably, but in many cases, yeah, it's easier just to throw a class on that thing.

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 And what if we had, like, a little

But I do feel like this one will be used. So the nth child,

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

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

probably, So you have to generate a path from the audio wavelength

The of selector supported

nth child?

so I'm pretty sure we could roll the tape and go back to our CSS wishlist the 2nd odd one. So you would say nth child who is currently speaking.

You can use an of keyword

5, almost 8 years, almost 10 years. Yeah. It's been and that's kind of cool. So I would imagine, like, Let's say you have Like you could use some sort of animation application.

But

display none and display block.

2015.

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 audio analysis 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?

or if you have even odd and you want to select scrolling forever just to get to the actual content. Totally.

you can get away from doing that. Yeah. With with a lot of these, like, selectors that are 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, CSS Grid gap We'll And then just like in Figma, how you can right click copy

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

Jeff. You know, designers like what that thing. They like to curate how the screen looks above the fold.

or sorry. Like, the search the search. Right? You have the search bar. You're scrolling through all the episodes.

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

the scroll snapper, and you're reaching, like I said, for, like, a, 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, 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,

this has been in the browser

snapping left and right. Like, I don't want it to be there. I want it to 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, did very, very cool. If you go to scroll driven animations.

Since Oh, I love it. It's it's so perfectly fitting

Scrolling and you want it to specifically end. Maybe, like, you have a horizontal

snapping, meaning that mandatory will always snap to the closest bound, 30 pixels And that idea gap Then we are margin, which I thought was was pretty interesting in that like, yeah, when you need to space things out, Yeah. It's it's a very,

And it it's really pretty neat. You know what? I guess another Like, reverse scrolling Now you got that double space where you have a margin

Go exactly where I want. So that's

whereas it's bad if you're like, oh, my gosh, this thing is so that it works or even like, Yeah. All right. That's it for now. I'll I'll stop adding little things on. Thanks for everything in. Catch you later.

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

like, fussy thing to get right.

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

whereas Proximity people said, I don't need that because,

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

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

2018.

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

And then use CSS motion path to follow it along Whenever I post them, people are always like, well, why would I need that? Why don't I just add a class?

I use

that,

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

CSS motion path for that.

you go. I truly love the way you think, Wes,

GAAP is maybe even a better use case. But it's it's not It doesn't have to be that day. So scroll snap has both mandatory and proximity

margins 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 Let's let's shout this one from the rooftops.

No one's

you then have to apply some CSS. So sometimes people say, okay. If it's the 1st child but in the same regard, 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

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

trim

as they're going because you could use the

carousels.

if it's, 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 we wanted to have a little bit more control over that? And that's where the micro syntax comes in because Welcome to Syntax. On this Monday, hasty treat. We're gonna be talking about 5 interesting new CSS properties Like session replay, test coverage, performance metrics,

that does the couple of months in all the browsers.

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 For things that are variable, things that you don't have control over.

and they shouldn't have any effect on what is outside of it. So if that's the case, then

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.

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 That's So I said I want Enthub selected,

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.

and we're using way more

first of all, a lot of people says I use Tailwind, you can see a bunch of examples. This one is currently I think only in Chrome. Is that right? template and add a bunch of logic or even like sometimes you have a parent that renders a child component

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, 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.

Output wavelengths selector of an element. So, like, in my example, I was Really neat carousels Put margin in between each of them. And then the other thing is that

What if their face was going up and down the wavelength

That's, like, So Scroll Snap has

some sort of gap. And that's the whole idea behind don't use margin, use gap that

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

run the analysis in everybody's browser every single time.

why not use use gap like margin for content.

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 If you have access to that index and you are rendering it You see 2 more things. That means curve 2.

You have, like, a card.

of syntax and make it into a single A little curvy, yeah.

Wow.

if, basically, it's reaching the end of a container. Let's

using heading a merge. Right? Yeah. Totally.

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

a hypothetical situation here is this is probably a situation many of you have hit.

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.

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

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

The face of the person writing a blog post and using GAP to put It's often nice to have a little bit more of the week before I I kinda always hate those sites that, like,

And you have a padding, and, basically,

I Selecting a circle that would sort of look like a pen that was writing my name on the page.

a little tip on this a couple of months ago, and overwhelmingly

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 Yeah. And and we went pretty hard on on GAP

none of those components have margin on them because everything And you tell me what you think about this. Gap for layout,

I have some code somewhere basically, which is nth child of visible.

of the MP3

for a blog post title.

because or a lot of things you would have reached for JavaScript for in the past.

as you you have an image gallery, If you do want spacing between these components, that's where you should use Safari, and it's been in Safari forever.

a use case for absolutely everything. Case in point, They're they're The support for it, and it's only been in all of the browsers, Chrome 110 and Firefox 113.

as with all things, we'll find nice,

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 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 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 So you select the little dot, which is the pen.

But it's existed in Safari since version 16.4,

really super good demo page that shows, like, the kind of cool stuff you could do, good support, and you can use Scroll Snap today.

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, It's it's in Chrome behind a flag. So it's not even really Yeah. Yeah.

I'm pretty excited about this type of thing. I think with it, we'll see a lot of new, obnoxious websites. But an offset distance from 0 to a 100%

Next one here is margin trim, which if you haven't heard about margin trim, this one only exists in Safari, 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.

That sounds like something I would use all the time.

We'll have that linked up. And then he has a really,

and margin trim is an interesting little helper that When I first heard about this, it was like, okay.

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,

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.