13 New CSS Features You Can Start Using Today

Welcome to Syntax. Today, we're gonna be talking about some of the latest and greatest new features in CSS. These are things that have been added to the browser in the past couple of years that are available just about in every modern version of all of the browsers today, meaning that even if they don't have, like, massive, like, 95% support, they should at least be mostly available in all browsers. Now there's some minor exceptions to that for little things here. We'll talk fallbacks, whatever. But these are some features that I believe have fallen largely under the radar. And I don't know about you, Wes, but there's some really cool stuff in here. So,

strap yourselves in and and get ready. There's a lot of CSS stuff. So my name is Scott Tolinski. I'm a developer from Denver. With me, as always, is Wes Bos. What's up, my man? Hey. I'm excited about this because I feel like the last year or so of CSS, there's been so many new things. And we've we've had many shows kind of going into all these new features, but a lot of them had been like, it's coming. Here here it comes. But we're at a point now, maybe six months since we've done one of these shows, there's, I don't know, seven or eight things where you can start confidently using today in your projects and not have to worry about, like, older browsers or, like, fallbacks or polyfills or any of that. Yeah. And a lot of cool stuff too. You know? I I think that, for me, when I was

researching some of the things that I missed, I was like, oh, you can do this? Of of all people, I feel like I'm on top of so much of this stuff. And so I would imagine that many of you are going to be surprised at some of these new features. So this first one is one that, I do feel like has gone underneath the radar. And even for me personally, it took a little bit to understand why exactly this is interesting at all. And the first one is the shape function. Now shape is something that can be used in something like clip path.

Anywhere that you would typically have used the path function in the past, shape can be used. Now why have something completely that largely does very similar things to Path? Right? Well, if we look at this and and by all means, I'm gonna be having a demo code on the screen. We'll talk through it. I'm not going to make this a bad experience for audio listeners. But if you're watching on YouTube or or you're watching on audio and you wanna see some of this stuff, head on over to YouTube and give this a rip because there will be some visual demos that could help you understand. So in the past, like, if we were making a star, you would use clip path, and you're using this syntax. This syntax is man, sometimes when we do our CSS battles, I think maybe I could use clip path and, SVG. And then I'm like, I can't imagine authoring this by hand. If you don't know the syntax, it's SVG SVG. Right? That's what this is? Yeah. SVG has

basically, when you want to draw a path in SVG, you basically say where you wanna start and then you want to have a line to.

That's what the l's are. And then if you wanna move to somewhere without having drawing a line, you put an m in front of that. And there's, there's six or seven different, like, commands that you can use to draw something.

Node. That's that's the kind of code that's behind a lot of these, like, graphics editors as well. Right? But Yeah. Writing that by by hand Can you imagine? Is like, I've done it. I've have a bunch of utilities that will will draw them and and add rounded corners to these types of things, but it's not something that does well. And the values are are absolute in pixel value, so it's very hard to do something that is responsive or or at least flexible or dynamic based on variables.

That's right. And and I think if for a basic shape, if you're looking at this, you'd see m 50 comma zero, l 61 comma 35. Like, you could reason about that. It's like, alright. L would be like line, and you're going from spot number 61 pixel and 35 pixel and then two l 98 pixel l 35 pixel. Right? Like, you could reason about that. But with the new shape function, it is all CSS, baby, as in we get access to you know, the the clip path JS in a big old long magic string. Right? It's a big old string SVG.

But within this new syntax, you are specifically writing CSS.

You're using actual CSS values.

The the way that it's it's written is way more readable. So the syntax is from 50 pix, zero pix, comma, line two, sixty one pix, 35 pix, comma, line two. And then you can even do curves really easily as well, like, with curve two. Beziers.

Without having to memorize crazy bezier syntax or anything like that.

And the coolest thing about any of this is it does support all CSS units. You can use relative units, m's, percentages.

You can use variables. You can use all of this stuff. And to to me, if I was doing a CSS battle and I was like, oh, maybe I should do a shape here for this, this seems way more like I could possibly do it given the fact that you would be able to use it, like, even, like, viewport units or something like that. So I have a star here. Queries.

Like, you want something to clip see queue units. 25% of a a parent container. Like, if you're drawing, like, a, like, a receipt and you wanna, like, clip like, do some jagged jagged edges on the bottom, it's really nice to be able to scale that up and down with the component rather than having to explicitly use a pixel value and then, like, scale them up. You know?

It's such a pain in the butt. So, man, shape, super cool. Not a property that I was expecting to be like, oh, yeah. But for me Yeah. Path and clip path has always been one of those things where I'm like, yeah. I guess I'm gonna open up some generator for this or have to dig into SVG to actually handle this. It's not something I would author. And maybe it's not going to be something I'll author, but still, I do feel like this syntax is way more author friendly and way more usable and, honestly, more functional overall. So,

stoked about CSS shape for sure. So I'm just, like, taking a look here. What else would you use a shape for? Clip path is the obvious one, and the docs are also saying offset path.

What is an offset path?

Is an offset path what you use to, like, draw on an SVG or, like, move things along a path?

The offset CSS property specifies a path for an element to follow Yes. And determines the element's position within the path's parent. Oh, so if you is that for, like, a, like, an animation?

Yeah. If you wanted to, like, have something follow a path over a course of time, you would change that offset path. Like, the what is it? The offset you change the offset.

I don't remember the exact, property. I'd have to look that up right now.

Oh. Oh, I see. I see. So if you're drawing a stroke, you wanna offset that stroke.

Yeah. It's a pretty common way to do, like, writing or fill in a path as you go. Okay. I see. I see. But it can also be used for for animations if you wanna Along. Yeah. Like, explicitly move something along a a certain line. You can convert, like, an an SVG path to an offset path. Okay. That makes sense. Yeah. You could have a butterfly flying around on a specific trajectory. Yeah. More more of this SVG stuff just landing straightaway

in CSS is is what we need. Big fan of that. This is this is Node. And I love that you can use variables and CSS units in this thing. So Yeah. Super, super cool. So Zoom is an interesting property that I didn't realize existed, really, until I started looking into CSS baseline stuff.

And the way that Zoom functions is very similar to scale, but scale is kind of interesting. So I'll I'll have a demo here where you'll see zoom here Wes we're zooming in on a or or zooming pnpm element here, and the sibling that's next to it, it what happens with this element is that it kind of, like, when you scale something, it just scales it

in place, and nothing else moves. Right? It as soon as you scale something up, you give up elements being able to be positioned relative to them. Right? Because you're you're sort of Yeah. It still takes its space up in the DOM, but it's not increasing how much space it takes,

for being painted. If you wanted multiple elements to zoom or scale correctly, you'd have to scale the container or anything like that.

But then those elements themselves would get scaled. So yeah, there there's a lot of challenges there. And let's say you wanted to scale an item in place and have everything reflow around that new scale.

That's what you use Zoom for. So in this demo, you'll see that the sibling remains to the side of the Zoom property even though this item is being zoomed by one and a half. In fact, if we were to, bump this down to say, like, zoom back to one, you can see that the way that things are positioned stays the same. We zoom it up to size two. Things are still relative to each other even though this, big zoomed area is increasing in size. Where with scale, again, it is scaling it in place and will overlap or or anything like that, which can be super useful, by all means. Scale, it it has its own set of use cases. But this zoom element property thing is a a means of sizing something up in place relative to its other items while also essentially scaling it. It it's pretty neat. I I was really surprised to hear this thing existed at all. I didn't even think about this. And now I'm like, oh, there's so many nice use cases where, like, you'd want something to get larger in place and have everything reflow around it.

Yeah. I I often will like like a grid item. You know, if you had, like, a a grid of of three items and you wanna scale the the middle one up, you can use Scott, and they'll overlap the left and the right.

You can change the width and the height, but then the contents inside of that don't get larger unless you use, like, a container query. But with the zoom, you could just literally make the entire thing larger, and the elements on the left and the right will will reflow or or resize themselves. That I actually had no idea that this was a thing. And Yeah. I I wonder if it's because every time I see Zoom, I think, like, yeah. Like, we we used to have Zoom in Zoomer. Yeah. In IE.

We had underscore Zoom as, like, an IE fix. Maybe I had just been disregarding it because that was a

a leftover thing from, like, IE six days. I'm gonna tell you what. I I disregard it just because I I didn't think it'd be useful or cool, and I may have seen the word zoom in the eye. Okay. Whatever. Like, same thing. Like you said, maybe it's just a a leftover or whatever. Also, another another small thing that, you know, not not that new, but you may notice that we're using man, stop scrolling. That we're using scale as a property instead of transform scale. I feel like I cannot say this enough, but you can use scale, rotate, and translate all as individual properties without using transform.

You can do that, and it's a good thing to do because you can animate them all separately or control them all separately without having to overwrite your past ones each time. So Mhmm. Big fan of just using those properties.

Next one we have here is scroll bar styling. This is a hilarious one because we've had the ability to style scroll bars for, like, twenty five years Node. But the Mhmm. Syntax for being able to do them and the feature set of what you can then style has been always different in all the the browsers.

So now with the the new, like, scroll bar CSS, you're able to what is there? Is there there's three parts to it? Yeah. Well so the scroll bar itself has numerous parts to it, but this API for scroll bar styling is the scroll bar gutter, the scroll bar width, and the scroll bar color, where color is an interesting property for scroll bar color because you can specify two values for the scroll bar color. And the way that this works is the property itself is scroll bar hyphen color, and then the first value in that is the thumb itself, which is the little thing you grab onto. And the second value is the track. Now if you're looking on my screen, you're seeing a pink scroll bar right now even though the track color is set to blue.

The reason why it looks like this is because I'm on a Mac, and we are using these, like, overlaying, style scroll bars.

If this was on a PC or one where the scroll bars are always visible and that gutter's always visible, you'd see that the the track of it would, in fact, be blue. There's also a scroll bar, gutter and scroll bar width. Now scroll bar width can be set to auto, thin, or none. So if you want to pnpm any scroll container, scroll bar width, none, to hide it, right, and still maintain that scrollable area, you should probably think about whether or not your users would actually like that. There are definitely some circumstances where that makes sense, though.

And then, like, thin obviously makes it thin, and auto is just the normal version of it. Now scroll Bos gutter itself allows you to preserve space even when there is no scroll bar needed. So let's say you have a div that has x amount of text into it, and then you add some text. And now all of a sudden that that's that, like, area becomes bigger, and it now needs to have a scroll bar. Well, that scroll bar is gonna pop in and and it'll shift your content a bit. So the scroll bar gutter is going to allow you to say, hey. Wait a second. This this there's a chance this is going to get longer or that there will be scroll bars here, and, therefore, we'll be able to make sure, that there will be no layout shift. So just a lot of control.

Generally, when you have, like, a either your body of, like, a, like, a blog post or something like this or you have some sort of long scrolling text area, you should always throw on the scroll bar regardless of if there is any scrolling or not, especially with, like, single page applications. As you go from page to page, my own personal website, I was going from, like, a a page that was just had a couple words on it to, like, a very long page. And then as you click between those two pages, you're the whole website shifts Yes. Over, like, 20 pixels, and it's it's really disorienting. And you don't necessarily know what that is until you're like, oh, it's the the scroll bar showing up here. So just even if you're not scrolling, throw it on there.

Yeah. Oh, anything you can do to prevent that, like, shift of of layout is is for your benefit. It's annoying for users, honestly. So the next one here is text wrap. Now text wrap, these ones are pretty neat because we got a couple of do ways to specify text wrap. We've always had, for as long as I can remember, text wrap wrap and Text Wrap no wrap. Text Wrap no wrap in case you want to have something that doesn't line break and once it's hitting the edges of its container.

But with Text Wrap Balance and Text Wrap, pretty, they offer offer you new ways of wrapping your text around. Because when you have wrapped text, it kind of just does it in like, it goes to the edge of the the the warp, and then next Node. Goes to the edge of wall, breaks it at the the the next space. Right? And it does that just kind of as it would.

Balance tries to do sort of, like, not justified, because justified fills that area, but it does kind of justify in a way where it's trying to keep it all balanced as into Yeah. It tries to put a similar amount of text

on each of the lines.

So if you you've often had that, like if you have, like, a heading, text wrap balance is really handy for heading. In fact, I'm I'm considering putting text wrap balance on all in my reset on h one through h six, because often, you'll have, like, one word that's just wrapped onto the next line. It looks really weird.

Yeah. And you can't you can't really explicitly put in line breaks in there because you don't don't necessarily know how wide it's gonna be. So Text Wrap Balance will try to put the same amount of words on or the same amount of not words, but the same amount of width of text on each of them, which Text Wrap balances now in in every single browser.

Text Wrap, balances in every browser.

And then the next one that is only in Chrome, which I did mention briefly because balance is the one you'll want to use today if you want to use something that is available.

But a future version of this is Text Wrap Pretty Wes it's in text technology preview of Safari, and it's not currently in Firefox.

But the the difference between balance and pretty is that pretty is more similar to Text Wrap wrap, but it's going to I have a demo here where text wrap wrap will have, like, a single word on the last line. They're calling that, like, an orphan, where text wrap pretty is going to prioritize not having those types of situations.

So it's not going to make it balanced, but what it's going to do is kind of get you into, save you from situations where you have just, like, one word on a line making the whole thing look Node. And it just makes it look prettier JS really what it is. They say it's good for, areas where, like, typography is super important.

So text wrap, pretty one of those things to look forward to, but text wrap balance, certainly a great option to use today if you want to have nicer looking text wrapping.

The algorithms that must go into this type of thing is must be wild. I should look up the the actual code in the, like, Chrome code Bos at some point because I'm sure that it's just edge cases all the way down. And then you probably also have, like, these weird, like, looping conditions.

It says in the docs that text wrap pretty can be performance intensive, and it's probably because they need to run lots of calculations as to what would be the best best way to wrap these things.

Yeah. And the nice thing about these things is that you can start using them today. It balances in all of them. But if if pretty is not in all of them, it doesn't necessarily matter because it just falls back to regular wrap.

That's right. Yeah. And and if that's not yeah. Actually, I think a number of these Hagen things have good good fallbacks. Right? Like, the scroll bar stuff, the fallback is just that you don't get that styling. You know? Yeah. Is that the end of the world? Absolutely not. But Zoom has a pretty good support, and Shape has pretty good support. This next one, media query range syntax, has good support. You can very easily use the post CSS plug in to just modify this one if you are using post CSS.

The the thing that's neat about this syntax, which is the media query range syntax.

So I've been using this for so long with PostCSS that I do not even remember what the previous media query syntax was because it was so confusing to me as somebody

You'd be like so, like, if you want to do something between 304 pixels, you would do, like, at media max width 300 and at media max width less than Yeah. 400. And it's it was very, very verbose. In this case, you can simply do at media 300 pixels less or equal to width and then less or equal to 400, and that will get you right in between there. But I I even like what we have on the Sanity Node even better.

Yeah. Well, we use and I'm showing on screen now just Vercel of these custom media queries. Now custom media is not a feature you can use today without something like post CSS, but the media query itself is what we have here, which is just something like width is less than 400 pix. That is so dang readable. Hey. If the width is less than 400 pixels, this applies. Oh. Mhmm. Who would have thought? That's a a nice way of doing it. So width is greater than x pix or whatever CSS value you might want in there. So I I do really love this syntax. And for me, again, as just somebody who never found the previous media query syntax to be that readable I know I know that sounds stupid, but, this just is so much more readable to me. Is that going to be a thing at one point where you can stick

custom media queries into variables? Because that's not something we could do right now. Right? You can't make a variable called below small and and stick that in a variable.

Yeah. So the custom at custom media is something that man, I'm gonna just check to see where it's at right now. It's something that has been being discussed for a very long time now because I do believe this will be a thing, but, man, I just saw another post that says, the death of custom media queries because that will have style queries that we can use CSS variables inside of media queries? Oh, yeah.

Yeah. So that might overtake this. So a style query would

target a specific CSS variable that's been Yeah. Set to something. Right? Like, you could say, below small is true. But then in a media query, you would then set that. Okay. That makes sense. So with style queries, you're just basically flipping Boolean variables, and then you can use those. Okay. That makes sense. So we we could we can kinda do this. Where are we at with style queries right now? Hold on. Mhmm. Let's find out.

Partial support refers to only working with CSS custom property values. That makes sense. Oh, so it's actually in everything but Firefox right now with with CSS custom properties, so CSS variables.

So Interesting. Again, this is not the show of things that work, but not in Firefox. There's, believe me, there's a whole list of things that I had to take out of this show.

Oh, yeah. No kidding. And so I guess right now, we are stuck with this at custom media if you are using post CSS. Otherwise, honestly, it's not hard to write these things by hand. The only reason we're using at custom media is because consistency. It's nice to have that. And, you know, I really loved having variables for my break points inside of Sass and Stylus and stuff, so I'm just used to this. But, once we get to the other version of that, whether that is via style queries or otherwise, we'd be happy to use that too. And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.i0/syntax.

You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on over to century.i0/syntax.

Again, we've been using this tool for a long time, and it totally rules. Alright.

Next one here is an interesting one that I think does not get enough love. Now this is the I'm gonna have a demo here, but I'm gonna adjust in the size of these things.

This is the content visibility property. Now content visibility allows you to control rendering of your application for things that are off screen.

So if you have things that you know are going to be off screen on initial load, you can throw content visibility auto on them.

And then the browser will defer rendering of those items until they're going to be visible.

Now this can cause, like, pop in and things like that. But for all intents and purposes, when you read about, like, the amount of rendering saved just using this property alone, it is shocking. Just the the amount of overall savings that people can get, especially if you have a rendering heavy website. And I'm trying to find this, so Facebook engineers observed up to a two hundred and fifty millisecond improvement in navigation times, just from using this property alone. So crazy stuff. That's some good savings.

Yeah. Yeah. For content visibility, there's a couple of things you can have. Content visibility auto does what I said. There's also content visibility hidden, and this allows you to control that Vercel, where it hides the element and it preserves its rendered state.

But when you remove that, whether the that's with JavaScript, right, you're removing that content visibility property or or toggling it, it then will render or unrender this thing. But in the same time, it's preserving its rendered state. So you would use content visibility hidden if you want to control that hiding and showing yourself.

A huge benefit to content visibility hidden is if you want to hide something but still maintain that markup as part of the, like, accessibility tree, meaning that if you hit, like, command f and search for something on the page, it will still find that item, which is really nice. So Scott of the alternative to using content visibility is virtual scrolling. So if you have a a div with, like, a million rows in it and you just wanna scroll that thing as fast as you can, what often happens is that you use, like, a virtual scrolling library, like, tanstack virtual, and it will render the, like, the the items that should be shown. Like, let's say you show 10, and then it will render, like like, 10 or 20 before it and 10 or 20 after. And that way, as you scroll, it's kinda just laying down track. You know that, like, Wile E. Coyote is on a train. He's laying down track as as you're going. No. That that's what virtual scrolling does. But the the downside to that is it literally just takes it out of the DOM, and then you you you're, like, page search sucks. Like, Twitter does this. If you wanna, like, search for a reply on a tweet Oh my god. It's really frustrating because there's it only puts, like, six or seven tweets in the DOM. If there's a thousand replies, it's really hard to search for for the reply on that.

I personally was using this. So uses.tech, this is a website where I list everybody who has a forward slash uses page.

And there is how many items here? 826 people. This page has gotten out of control.

And it was 826 boxes, and each of those boxes has tags and and emojis and images. Right? It's it turns out to be, like, 200,000 elements that need to be rendered.

And it was dog slow on all these browsers. So what I did is I I turned on when this launched, we Yarn gonna do virtual scrolling, but then we didn't. And I just turned on content visibility auto.

And what that did is it it just told the browser, hey. Just render them when you think you need them. And it's kinda just like like virtual scrolling for free. But free. Yeah. Totally. Like, I don't know. Like like, two years later, I went back to I was like, why is this website so laggy? It was, like, brutal, like, so laggy to scroll. And I took the content visibility off, and I just, like, I just did regular HTML and CSS. No no, like, figuring out when to prerender or whatever, and now it's butter smooth. So, like, something changed where the, like, calculation of content visibility auto was supposed to be fixing it, but it was so intensive that it was causing the website to be laggy. Like, I would scroll, and then it would render some more, and then it would scroll, and then it would render some more. And it was, like, really you know, when you scroll to the bottom, you wait for more to load. It was almost giving me that experience.

So I just took it off entirely, and I was like, well, the you should know, Chrome. You're the one you're the one painting it to page. You figure it out. So I took it off, and now it's butter again.

I have a hypothesis here on how to fix that, Wes. What? With content visibility. I'm wondering if because you're loading when you're loading those things and you're scrolling, you're not loading, like, one or two. You're loading, like 800 at once. 26.

Right. So, like, I would imagine if you were to group your incoming ones into groups of, like, 10 and then throwing content visibility on that group rather than on the individual item Okay. I wonder if that would cause less rendering having to happen.

Like, you're rendering more in chunks rather than in each individual one. That's a hypothesis.

I have no clue. There's also this like, you could maybe even debug this a little bit. There's an event. I have some JavaScript here on screen, Node this has gotta be the longest event name without Sanity

state change.

And it has it's no camel case. Nothing. There's just, like it's just vomit here. Content visibility auto state change.

This event fires anytime the state has changed. So I have all of these divs, and then one of them has a class on it that will trigger that when this thing gets rendered, it'll output to the console.

So you can see I'm scrolling down here. And then when I write about for this thing to appear, it gets rendered and the, console log happens, visibility change. And then once it's off screen, it actually fires again, which is interesting.

And then it every time it comes on showing and hiding.

Yep. So Interesting. This is an interesting thing that you can use, and it does potentially have the possibility for layout shift. So there JS another property here called contain intrinsic size, which allows you to specify the, ESLint and block. I believe it's inline and block.

It could just be x and y. I didn't even think about that until right now. It basically allows you to specify the dimensions of this thing Wes you could say, alright. The width is auto and the height is 300 pixels.

That way, it's, like, preserving that space for when this does render. Does render it. It knows how big it should be. But then, like, how do you know how big an element should be? That this this is what frustrates me about the safety eye. It's like, the browser knows all of this. You should just do it for me. And Yeah. That's what it did. I took I literally ripped all of this out, and it's been the most performance it's ever been. So, So, like, I think the browsers did something where, like, of course, we need these knobs to be able to control them ourselves, but in most cases, the browser should hopefully figure these things out.

I think it depends. I think it depends on the use case. So, if you're the type of person who likes to measure things, try content visibility and see if it does improve your rendering performance. And if it does, then keep it. If it does not

Yeah.

Alright. So I have this page here, and I got these are these are person wrappers. Right? So I put content visibility auto on every single one of these wrappers. Right? There's 826.

And watch watch me scroll it. Watch.

Oh, yeah. Because it's having to render and unrender them really quickly. And there's what? Like, as you're scrolling, it's doing that a ton of times.

I bet if you put those into div wrappers, if that would even be possible, it would But JS soon as I wrap it, now now I now I'm I'm goofing up my my CSS grid because now I have well, how many do you wrap? Do you wrap do you wrap, three at a time? And then what happens when I go down to two? Now my CSS grid is is broken.

And then, like, I know there's that, like Oh, yeah. Display contents in CSS, but then does that goof up content visibility? But watch. So so look how awful this is. Now let me take it off.

Butter.

Yeah. Oh, yeah. But it's because they've all been prerendered ahead of time. So you initially rendered it. It hasn't been. Watch. Wes me refresh.

Wait. How has it not been initially rendered? Are you are you doing any sort of virtualization?

Nothing. Nothing. Literally 826 divs in a div on CSS Grid. Look at this. Look how butter that is. And then we go ahead and add a con so they've all they've already been rendered. Like, right, every single one has been rendered. Now let's add it.

Content visibility auto. Ready and watch.

Oh, yeah. No. That makes sense because, I mean, you're scrolling through all of these so quickly. It makes sense to me that this would be because of how much it's having to render as you're scrolling.

And that scrolling time, you're scrolling so fast that that scrolling time and the amount of time it takes to render it are like they're just not in sync. I think this works better if you have a site like syntax.fm and you have some stuff in the sidebar, and you just tell that stuff to, hey. Don't don't render until we told you to. Not when you have, like, you know, 800 items that need to render quickly as you as you're scrolling. Yeah. K. Let's let's try. Let's take the let's take these articles here,

and let's add.

I still think this is the same thing before. You're you're you're doing a bunch of articles instead of, like, a

What do you sorry. What what is your example? Let's see. There, it's smooth. I think it's just because I have freaking 200,000 elements on the page. Yeah. Which is not I think that is it. You shouldn't do that. Right? But, like, that's a pretty that's a pretty yeah. It's it's totally fine here.

Yeah. It's interesting, nonetheless. I do think it JS. Yeah. Your scrolling time and all that stuff.

But, like, props to the Chrome engineers for fixing it because at the time, that fix was the fix. But now, for some reason, it's not.

Alright. Let's get on to the next one, which is this one is so bizarre, and I have never heard of it.

Text emphasis I didn't hear about it until you put this in here. Yeah. No. What the heck? Here. Text emphasis

simply allows you to put, like, these little

Karaoke dots? Yeah. Karaoke

dots on top, and there's the options are, filled, open, dot, circle, double circle, sesame.

Is is that something from, like, Asian languages? I've never heard of that. Triangle. So, basically, this allows you to decorate text on the top and the bottom.

For what reason? I I do not know.

Text emphasis is quite different from text decoration. The text decoration property does not inherit blah blah blah blah.

The size of the emphasis symbol, like Ruby symbols. Okay. I I bet this is something for languages that are not, like, Latin based.

But, like, I I guess it'd be helpful if you wanna, like, mark a whole bunch of text. And the kinda the interesting thing about it is it increases the height of the the line height when you add it. So that could be helpful as well so they're not overlapping.

Yeah.

But

weird.

Weird.

Just weird. Yeah. If you are out there and you Yarn like, text emphasis, that's my thing that I've been waiting for or or you're just using it all, let us know. What what are you using it for? I'm very curious about this. Is it a karaoke thing? Like, I mean, I guess you could you could you could actually build a karaoke thing with this where you're just, like,

highlight the selected word.

Yeah.

That's good. Like, I like, I guess there's been many times where I wanna highlight specific things.

Like that? I don't know. Oh. Node? Yeah.

Well, what's next? Relative color. We've talked about this a million times on the podcast, but being able to take a color, whether it is a RGBA, HSL, or HEX code, split it up into its color channels. So you could take a a HEX code and split it up into RGB.

You can take any color, and you could you could take a hex code and and split it up into its HSL values.

And then it will simply give you variables, h, s, and l or r, g, and b, and then you can return the RGB values slightly tweaked. And and the use case for this often is increasing the lightness of something or, finding the opposite color, trying to find a complementary color to something. Yeah. Yeah. Adding opacity is another really good one.

Yeah. Totally. And I have this on the screen. We're using this on the syntax height. When you overlay on a button, you wanna just make it slightly lighter.

So what you have is we're taking from a CSS variable, mind you. It's from a CSS variable, so that can be dynamic.

And then calculating a new lightness value where we're adding point three five to the lightness and then keeping the c and h values, the what is the man, what is the c? Chroma? Hue? I know h is hue. Either way, we're keeping that c and h value. And, again, like you said, this is useful for all kinds of things like that. It's super useful for relative, color systems Wes you're having a color system that's deriving various shades from other colors. It's useful for

Like, borders that need to be slightly lighter, like lighter or darker.

Yeah. So very super nice for all kinds of reasons. We love relative color syntax. Been waiting for a long time to be able to use this. In all the browsers now. That was one of them where you couldn't really

transpile it because it had to be live in the browser. Right?

Yeah. So right. Exactly. There was no good way to have this be dynamic with post CSS.

Next one is, some new CSS functions. We have round, rem, and mod.

Now round is a really interesting function. It allows you to round numbers.

I don't know about you, Wes, but I find it odd when a function has an optional parameter that's the first parameter. Like, that makes no sense to me. The the like, in this Node, the the first parameter is optional. So the first parameter is going to be the type of rounding you're doing, whether that's up, which is the same as JavaScript math dot ceiling seal, down, which is the same as math dot floor, nearest, which is the same as math. Round, and two zero, which is the same as math dot trunk. So this function, you would you could say round nearest comma the value you're rounding.

And then the last argument here is the rounding interval. Wes, you you know what that means? Yeah. It's the

if you want it to round by a certain amount, so, like, let's say you only wanted to do it by point one value or or by point five, so you can you can give that value. Otherwise, it's sometimes you get these numbers, and when you round, it goes on forever.

So if you want, like, nice clean values, I could see that.

I don't know, like, when that might be maybe that would be helpful for when you're, like, working with, like, pixels.

You know, sometimes you end up with, like, a half a pixel because the math just works out that way.

You could probably solve that. I know I've battled half pixels many times in my life Wes things don't perfectly line up because you've got that weird half pixel. So being able to to do that in CSS directly is gonna be nice.

Yeah. Here's a, like, a demo showing the rounding interval being, like, 25 pixels.

So to me, that, like, would say that you're rounding to the nearest value that's a 25

pixel increment. Is that correct? Yeah. If you've got, like, a grid and you wanna increment or decrement based on a certain grid value, you could do it by by 25 pixels. That's kind of like a step as well. Maybe that's even it would be even helpful in, like, some functions Step. Animations.

Yeah. Step makes way more sense to me. And, yes, it's great. All the browsers? Round?

Yeah. So round is available. Let's check the full compatibility.

Yeah. It's in all the browsers.

It's it's available in everything now. And, again, this is neat. I I do find it totally odd that you can omit the first argument, and then it just becomes the value and then the the the rounding interval. Like

Yeah. I I never liked that. Make it the last one. Last one. Yeah. But then Make it yeah. The rounding interval also is optional.

I don't know what it is. Happens if you want to make the rounding interval optional but not the, the first argument.

I don't think the rounding interval was optional.

No? Let's look this up.

No. You're right. It's it's not optional. You must pass it.

So, yeah, that is is a bit odd. I'm sure there's always always things there. What what's a bummer is we can't pass an object like in JavaScript. Right? That's always bizarre when, like, the signature.

There's so many functions where they add a new argument and then Name parameters. Yeah. They have to, like, add a fourth parameter, or they switch it from being able to pass four parameters to a single object that just happens over time.

Yeah. Yeah. Another one of these new functions is mod, which gives you the remainder just like the the modulo in JavaScript.

So this is neat. Again, it's available in all browsers as well. You can now use mod. Mod returns a the leftover, when the first parameter is divided by the second, similar to the remainder operator.

Then how is that different than the REM, which is the remainder function? So here JS the difference between these two, and this makes a moderate amount of sense to me. I'm not a math person. So for me, you know, I don't necessarily understand the use case, difference between here, but the difference is is that mod, the result takes the sign of the divisor JS in, like, negative or positive.

It behaves like Euclidean, modulus.

It's always positive if the second value is positive, where REM takes on the sign of the dividend, AKA, the first value. So it behaves like the the percentage sign in JavaScript.

So the example that I'm seeing here and, again, when in which you would care or need to use this, to me, I I would love to know. Mod negative seven comma four results in one, where REM negative seven comma four results in negative three. So okay. Man.

We got it. Alright. Next one we have here is content editable plain text only. This one's actually kind of interesting.

So with content editable plain text only or let me show you here. If I add an attribute content editable to the body, I can obviously go ahead and type anything into any part of this this document. Right? However, if I were to copy some text that has is rich text formatted, like, right here. This is probably wrapped in a bunch of spans, and I go somewhere else and paste it in there, highlighting and all that is it sort of comes along with it. Right? And you can make a bit of a mess with that if you're giving content edible to your users because they're able to paste in literally anything. Right? But content edible equals plain text dash only, will simply only allow you to edit plain text. And if you were to copy some formatted text and paste it in, you you don't get that. Where that is is helpful is is if you have, like, a if you have a text area, right, a text area does doesn't have any any formatting in it, and you want, like, the the height of your text area to be automatic.

We do have that field sizing auto Wes JS you type in the text box, it will grow to a specific height. And that's kind of really nice because you don't have to, like, listen for key up. It'll simply just grow as you're typing into the box. However, browser support for that sucks. It's not in Firefox yet. I don't think it's in Safari yet.

So this is kind of an interesting way where you could use a div as a input box. Make sure you do all the accessibility things to make that work, but it will simply just grow with you. And you could make a kind of a nice little WYSIWYG for this as well because someone can just simply click into any of the parts that they want, and you don't really have to worry about them copy pasting or or goofing up, adding anything in HTML. You Node, WYSIWYGs. You let you give somebody a WYSIWYG, and then before you know it, there's, like, a Microsoft Word Calibri ESLint span being pasted in. It's it's a nightmare. So this is is very welcome. It's been in Chrome for a very, very long time, like fifteen years or something, but it was finally standardized and added to all the browsers.

I love that.

And content, editable, I think underrated overall.

Our next one here is align content, which allows you to center things, believe it or not, using one property, align hyphen content center.

It centers things vertically inside of a block level context. So align content is something that we know from Flexbox.

You're probably very used to it. Well, now on a div, you can just throw align hyphen content center, and it puts the child in the dang center vertically just like you have always wanted to. Right? Without grid, without flex, just with a normal display block

level item. So So good. Hell, yeah. I did a video on this when it first hit, and I basically said, like, you are no longer allowed to make vertical centering jokes in CSS. We have so many thing. Right? We've had it in Flexbox for, like, fifteen years, had it in Grid for, I don't know, seven, eight, nine years since Wherever Grid was added. And now if you simply want to vertically center something in CSS on a block level element, align content center. That's all you need, and and you're you're off and running. Right? And and a lot of people ask, well, what about what about the the other way? Well, you use you can use text align center for that. You can use margin zero auto for that. Yeah. You are no longer able to make CSS centering jokes.

Yes. It's a skill issue if you still make those jokes.

Skill issue. Cut it out. Next one, we have here a starting style. We've talked about this on the past, but now it's it's supported in all the browsers.

When DOM elements get added to the DOM, if you want to animate them in, you previously would have to add them to the DOM and then, like, opacity zero or display Node, and then you would, like, add a class, like, a split second later, and then you'd be able to transition between a and b. Right? You cannot transition simply from not in the DOM to being in the DOM. Well, now you can with with starting styles. So here is an example where I have a list item, and I have a translate x of zero, which Wes

Why don't you use the translate and scale properties? Oh, yeah. You're right.

I've always say this.

Yeah. You're right. I should I should be using them in this case. Yeah. But It's alright. You're fine. They they still work. The old ones work. They they work just fine. So let me explain it again for anyone who's lost. You can set something on its in state by default, so translate x zero. And then you can say, when it is added to the DOM, move it off the screen or scale it to zero or or make it red and then go to whatever or or make it opacity zero and then go to opacity one.

And that is beautiful because now when DOM elements are added to the DOM, you can now transition them, animate them, whatever it is you want.

Yeah. It's it's just lovely. And then once we get allow discrete, it's even gonna get better. So Oh, yeah. Allow discrete's gonna allow you to do this with the content visibility property that we talked about earlier on in this show. So Which yeah. You could, like, you could animate from display none

to display block. Right? Yeah. Or content visibility

hidden to

Mhmm. Visible. Yeah. And same with the calc.

Calc size is going to allow us to animate from to height auto. That's gonna be really nice. That, again, that's that's in most of the browsers, but not all of them. Yeah.

Yeah. Totally. Sick. Alright. Well, last one here before we get going. This has been so much stuff jam packed full of new CSS features JS this CSS pseudo selector user, hyphen, valid or user, hyphen, invalid. These are the exact same as valid or invalid on input elements. So if you wanted to say, like, hey. The value that they've added to this email isn't an actual email.

Let's trigger the pseudo class. Let's style that a specific way.

The thing you could not do with valid and invalid was that those those pseudo selectors, they would apply even if the user has not interacted with the element. So user hyphen valid and user hyphen invalid are triggered only after the user interacts with the input.

So the user types in something, and then it checks to see if it's valid or invalid, and then, you know, hides it or does whatever you need to do there. So these are just drives me. This is the way it should have worked. Yeah. There's there's, like, one Angular library, and I

when you start typing your email address, like, you type a w, and it's, like, invalid. Yeah. It's, like, of course, it's invalid. I'm not done yet. You know? And this user invalid will, first, wait for you to interact with the pnpm, and second, wait for you to to finish typing in and blur the input. So you might tab away or something like that, and then it will will run the validation step for you, which is is what you want. It's what you want. That's what anybody I it is such a bugaboo of mine. Anytime,

is that are you yeah. Okay. I hope you're allowed to say that. That's like a stroller.

Well, that's a Destiny's Child song from, like What does bugaboo mean?

We in Ontario, we have this thing called pokearoo.

Randy, the editor, will put a a picture of pokearoo over top, which is a a dinosaur from a children's, show that would Wes suspiciously maybe also the man. I feel like I've talked about this on the show before, but, like, I've I always tell people like, oh, you're such a pokearoo. Like, you never see two people in the same room at the same time. Like, where are you going, pokearoo? And then what's really happening is Pokuru is the man on the show, but that is a Pokuru. What is a Bugaboo? A Bugaboo, a girl or guy who don't leave you alone, an overly annoying person that constantly calls or goes to your home uninvited.

Wes, yeah, it comes from the, like, a term for, like, a boogeyman.

But I do know it from the Destiny's Child song. Okay. So that's it. That's all of the the CSS stuff we have for you today. If there's any new CSS properties that we didn't hit that you are like, oh, I can't believe they didn't talk about this or that or, you know, this is this the where it's at, let us know. I'm, very interested to hear about it. So, now it's part of the show we're getting into sick picks and shameless plugs.

Okay. So I'm gonna sick pick two things that, that I've been using, you know, because I have a a little SSD. It's a little like, one of these little four terabyte SSDs. And, occasionally, I wanna use this thing on my my phone. And what happens is you end up having, like, a tail. It's like a, like, USB C cable, and the thing you're holding your your phone up, and it's like, oh, this thing's gonna get yanked out at any time. So I saw somebody on the three d printing world build a little, like, clip to the side of their iPhone that clips the SSD to the back of it. But in addition, they were using these two items, one of which was a one eighty degree USB c thing that plugs in the in this case, the bottom of my phone and just takes it Node eighty degrees, and the next was a male to male USB c adapter. So I plugged the male to male into the one eighty. I plugged the one eighty into my phone, and then I plug the hard drive into this mail to mail. And then, essentially, it's just pinning the the thing to the back of my phone so it's no longer dangling or hanging around. And then now I can three d print a little clip for it if I want to even do that. But these things are great. You Node? $910, whatever. You can get some nice little, things. And, honestly, I might get this 90 degree one as well because when I use the same hard drive on my laptop, it's, again, it's just, like, kinda hanging on. If it's a a a 90 degree, then I could, you know, Velcro it to the back of my computer. You get every single angle. It's like plumbing pipe. You got a bunch of 40 fives. You could just Oh, yeah. Click it and get it move it right to the back of your

your thing, that'd be great. Yeah. I'll take it.

Alright. Well, I'll, I'll say pick something along the the same lines as well because I I'm always fussing with this stuff, and I find it really helpful to have a bunch of weird HDMI angles. So my camera right now, I have to put the HDMI all the way around.

So I ordered a like, a there's, like, eight different possible angles that you can get. Right? Like Mhmm. HDMI Vercel to right angle to horizontal.

And there's all these different angles you can get, and it's really helpful, especially if you have, like, a TV you wanna put nice and flat against the thing, or you've Scott, like, a like, we have a projector that the HDMI, it just hangs out the back, and the kids always hit it. And I just hate cables so much that are, like, in the way and get bumped and things get wrecked. So Yeah. Especially, like, big thick ones that you can't bend. They're just, like, hanging out. You know? Or even just, like, the back of your monitor. Yeah. You you try to, like, bend it back.

So I always just go on AliExpress and just buy a bunch of these different HDMI ones. And there's also HDMI ribbon cables, which is a whole another area I haven't gotten into yet, but I've been kinda interested in it Interesting. I don't know anything about that. Where you can essentially make your own HDMI connector. So they sell the male and female HDMI ends, and then you just buy, like, a flexi ribbon cable, and then you clip them in from on on either side.

Interesting.

You can if especially if you want, like, a really nice flush, HDMI coming out of a camera, something like us, we always have our cameras plugged in all the time. It's nice to to make that look a little nicer.

Yeah. Mine's a mess. I have a right angle one, but it's like the l shaped Node. So it's, like, coming out of the camera, and at least that allows me to drape it over and then dangle the thing over this. So yeah. It's better than it was before. It comes loose way, way less.

Yeah. Flaky cables is the bane of our existence.

Yes. Alright.

Make sure you check us out on YouTube, youtube.com/syntaxfm.

Leave us a review on iTunes. Leave us a review on Scott. Wherever it is that you like to leave us a kind Node, throw a comment on YouTube. We'd love to hear from you, and it helps the ever living algorithm, recommend us more.

Absolutely.

We will catch you in the next one.

Peace.