13 New CSS Features You Can Start Using Today

rather than in each individual one. That's a hypothesis.

I have a And then the last argument here is the rounding

of content visibility auto

and then it would render some more, and then it would scroll, and then it would render some more. And it was, like, really

incoming ones into groups of, like, 10 and then throwing content visibility

ESLint and block. I believe it's inline and block.

supposed to be fixing it, but it was so intensive that it was causing the website to be laggy. Like, I would scroll, languages that are not, like, Latin based.

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 and female HDMI ends, and then you just buy, like, a flexi ribbon cable,

Right. So, like, I would imagine if you were to group transform.

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.

it actually fires again,

where 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 it just falls back to regular wrap.

you know, when you scroll to the bottom, you wait for more to load. It was almost giving me that experience.

Okay. I wonder if that would cause less So if you have things that you know are going to be off screen on initial load, you can throw content visibility

Like, you're rendering more in chunks the example that I'm seeing here and, again,

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, that's a pretty yeah. It's it's totally fine here.

console log happens, visibility change. And then once it's off screen,

was

item

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

which allows you to specify the, whatever. You can get some nice little,

potentially have the possibility for layout shift. So there JS another property here called contain intrinsic size,

hypothesis here on how to fix that, Wes. What?

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

on that group rather than on the individual

rendering having to happen.

event name without Sanity very interested to hear about it. So,

This event fires anytime the state has changed. So I have all of these Yeah. It's it's just lovely. And then once we get allow discrete, Now this can cause, like, pop in and things like that. But for all intents and purposes, So you can see I'm scrolling down here. And then when I write about for this thing to appear, media queries? Oh, yeah.

I went back to I was like, why is this website so laggy? It was, like, brutal,

And it has it's no camel case. Nothing. There's just, like it's just vomit here. Content visibility You can use variables. You can use all of this stuff. And to to me, or or zooming pnpm element here,

it gets rendered and the, 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, display block

the, like, calculation

auto state change.

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

which is interesting.

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 on the top and the bottom.

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

complementary color to something. Yeah. Yeah. Adding opacity is another really good one.

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

you could you could actually build a karaoke thing with this where you're just, like,

And then it will simply give you

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.

But

Yeah. Karaoke not having those types of situations.

sesame.

increasing the lightness of something or, Partial support refers to only working with CSS in CSS. We have so many thing. Right? We've had it in Flexbox for, like, fifteen years, had it in Grid for,

Relative color. We've talked about this a million times on the podcast, but being able to take

color systems Wes you're having a color system that's deriving

finding the opposite color, trying to find a

For what reason? I The offset CSS property specifies a path for an element to follow Yes. And determines the element's position

put, like, these little 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

variables, h, s, and l or r, g, and b,

I've never heard of that. Triangle. So, basically, this allows you to decorate text

Weird.

The size of the emphasis symbol, like Ruby symbols. Okay. I I bet this is something for like,

Just weird. Yeah. If you are out there

the RGB values slightly tweaked. And and the use case for this often is boxes, and each of those boxes has tags and and emojis and images. Right? It's it turns out to be, like, 200,000 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 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.

highlight the selected word.

filled, open, dot, circle, double circle, 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.

a color, whether it is a RGBA, HSL, or HEX code, 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

dots 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

simply HDMI angles. So my camera right now, I have

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

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,

allows you to

what is the man, what is the c? Chroma?

various shades from other colors. It's useful for you are specifically writing CSS.

Yeah.

And then calculating a new lightness value where we're adding point three five to the lightness and then

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

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.

in place and have everything reflow around it.

scale, So 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 in the past couple of years that are available 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 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

again, it is scaling it in place and will overlap weird.

or scale correctly, you'd have to scale the container or anything like that.

and I think underrated overall.

while also

in place, and nothing else moves. Right? It as soon as you scale something up, you give up elements being able to be positioned And Yes. Alright.

how much space it takes,

big zoomed area is increasing in size. Where with scale, hidden to

for being painted. If you wanted multiple elements to zoom Let's trigger the pseudo class. Let's style that a specific way.

it what happens with this element is that it kind of, like, when you scale something, it just scales it

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

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,

where REM AKA, the first value. So it behaves like the the percentage sign in JavaScript.

that just happens over time.

when, like, the signature.

okay. Man.

There's so many functions where they add a new argument and then Name parameters. Yeah. They have to, like, add a fourth parameter,

when the first parameter is divided by the second,

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 So this is neat. Again, it's available in all browsers as well. You can now use mod. Mod returns a the leftover, dividend,

similar to the remainder operator.

modulus.

difference between here, but the difference is is that mod, 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.

or they switch it from being able to pass four parameters to a single object 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.

Then how is that different than the REM, which is the remainder

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

No?

also is like, so laggy to scroll. And I took the content visibility off,

It's always positive if the second value is positive, your

Yeah. Yeah. Another one of these new functions is mod, which gives you the remainder to the nearest value that's

optional.

It behaves like Euclidean, heavy website. And I'm trying to find this, I don't think the rounding interval was optional.

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

Yeah. It's in all the browsers.

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 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 and once it's hitting the edges of its container.

Yeah. I I never liked that. Make it the last one. Last one. Yeah. But then Make it yeah. The rounding interval people. This page has gotten out of control.

you know, I don't necessarily understand the use case, 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 if you want to control that hiding and showing yourself.

the first argument.

function?

just like the the modulo in JavaScript.

takes on the sign of the save you from situations where you have just, like, one word on a line making the whole thing look Node. And it just 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 keeping the c and h values, the I still think this is the same thing before. You're you're you're doing a bunch of articles instead of, like, a

a moderate amount of sense to me. I'm not a math person. So for me, Without having to

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 And the way that Zoom functions is very similar to 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,

target

below small is true. But then

pixels, you would do, like, at media max width 300 and at media max width

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 shocking. Just the the amount of overall the result takes the sign of the divisor JS in, like, negative or positive.

less than Yeah. 400. And it's it was very, very verbose. In this case, you can simply do meaning that if you hit, like, command f and search for something on the page,

is something that

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.

a specific CSS variable that's been Yeah. Set to something. Right? Like, you could say,

and and stick that in a variable.

Boolean

variables,

this will be a thing, but, man, I just saw another post that says,

in a media query, you would then set that. Okay. That makes sense. So with style queries, you're just basically flipping 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? Well, what's next? and let's add.

everything but Firefox right now with with CSS custom properties, so CSS variables.

confusing to me as somebody

You'd be like so, like, if you want to do something between 304

media queries because that will have style queries that we can use CSS variables 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 it's even gonna get better. So Oh, yeah. Allow discrete's gonna allow you to do this with the content visibility Balance 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.

Calc size is going to allow us to

I state change.

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

the translate and scale properties? Oh, yeah. You're right.

would have to add them to the DOM and then, like, opacity zero or display Node, and then you would, Like, you want something to clip see queue units. 25%

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.

And that is beautiful because now when DOM

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, literally make the entire thing larger,

if you want to animate them in,

Why don't you use 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 style scroll bars.

to display block. Right? Yeah. Or content visibility

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 I do not know.

not in the DOM to being in the DOM. Well, now you can

you previously

have a list item, and I have a translate x of zero, which Wes Yeah.

property that we talked about earlier on in this show. So Which yeah. You could, like, you could animate from display none 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.

hey. The value that they've added to this email isn't an actual email.

I've always say this.

with with starting styles. So here is an example where

elements are added to the DOM, you can now

DOM elements get added to the DOM,

just about in every modern version of all of the browsers sixty one pix, 35 pix, comma, line two. And then you can even do curves really easily as well, like, with curve two. Beziers.

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

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,

interval. Wes, you you know what that means? Yeah. It's the

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

So to me, that,

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

pixel increment. Is that correct? Yeah. If you've got, like, a grid and you wanna increment or decrement based on

Yeah. Here's a, like, would say that you're rounding

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.

I don't know about you, Wes, but I find it odd when a function

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

So if you want, like, nice clean

a certain grid value, I don't know what it is. Happens if you want to custom property values. That makes sense. Oh, so it's actually in 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

rem, and mod.

values, I could see that.

live in the browser. Right?

you could do it by But watch. So so look how awful this is. Now let me take it off.

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

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

like, a demo showing the rounding interval being, like, 25 pixels.

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.

I don't know,

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

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.

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

Oh. Oh, I see. I see. So if you're drawing 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.

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

a stroke, you wanna offset that stroke.

I don't remember the exact,

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.

What is

property. I'd have to look that up right now.

stoked about CSS shape for sure. So I'm just, like, taking a look here. What else weird

an offset path? path to

within the path's parent. Oh, so if you is that for, like, a, like, an animation?

move something along a a certain line. You can convert, like, an an SVG

and, honestly, more functional overall. So,

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 Karaoke dots?

jagged edges on the bottom, it's really nice to be able to scale that up and down with the component We got it. Alright. Next one we have here is

use a pixel value and then, like, scale them up. You know?

rather than And watch watch me scroll it. Watch.

of a a parent container. Like, if you're drawing, like, a, like, a receipt and you wanna, like, clip like, do some jagged the browser should hopefully figure these things out.

Butter.

and see if it does improve your rendering performance. And if it does, then keep it. If it does not overwrite your past ones each time. So Mhmm. Big fan of just using those properties.

these are these are person wrappers. Right? So I put content visibility auto

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 Again, we've been using this tool for a long time, and it totally rules. Alright.

Are you are you doing any sort of virtualization?

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, for things that are off screen.

Let's see. There, it's smooth. I think it's just because I have freaking 200,000

Wait. How has it not been initially rendered?

in a div 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

And then, like, I know there's that, like Oh, yeah. Display contents in CSS, but then does that goof up content visibility?

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

and you have some stuff in the sidebar,

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.

But, like, that's a pretty 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

because of how much it's having to

that fix was the fix. But now, transition them, animate them, whatever it is you want.

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

Nothing. Nothing. Literally 826

and I got 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,

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

for some reason, it's not.

do you wrap, three at a time? And then what happens when I go down to two? Now my CSS grid is is broken.

But, like, props to the Chrome engineers for fixing it because at the time, at media

Content

What do you sorry. What what is your example?

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.

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

divs

of course, we need these knobs to be able to control them ourselves, but in most cases,

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

Yeah.

render as you're scrolling.

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.

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

you can use scale, rotate, and translate all as individual properties without using the I'm gonna have a demo here, but I'm gonna adjust in the size of these things.

you can use Scott, and they'll overlap the left and the right.

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.

and the elements on the left and the right will will reflow or or resize themselves. That I actually had no idea the,

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

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, well, how many do you wrap? Do you wrap 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, Alright. So I have this page here, right here. This is probably wrapped in a bunch of spans, and I go somewhere else and paste it in there, 826 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

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

you can specify two values for the scroll bar color. And the way that this works is the property itself

style has been always different in all the the browsers.

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 it's not something that does well. And the values are are absolute

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,

with the zoom, you could just

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.

but you may notice that we're using the sibling that's next to it,

man, stop scrolling. That we're using scale as a property instead of transform scale. I feel like I cannot say this enough, but

feature set of what you can then

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

savings that people can get, especially if you have a rendering 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.

allows you to control rendering of your application

observed up to a two hundred and fifty millisecond improvement in navigation times,

And it was dash only, I don't know, seven, eight, nine years since Wherever Grid was added. And now if you simply want 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, We in Ontario, we have this thing called pokearoo.

and it preserves its rendered state.

uses.tech, having to explicitly

and this allows you to control that Vercel, The the thing that's neat about this syntax, which is the media query range syntax.

just from using this property alone. So

But when you remove that, whether the that's with JavaScript, right, you're removing 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

that

content visibility property or or toggling Yeah. So round is available. Let's check the full compatibility.

And it was

when you read about, like, the amount of rendering saved just using this property alone, it is

preserving its rendered state. So you would use content visibility and way more usable

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

hidden down, which is the same as math dot floor, 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 Facebook engineers

A huge benefit to content visibility hidden is if you want to

this is a website where I list everybody who has a forward slash uses page.

I personally was using this. So

there is how many items here? 826

crazy stuff. That's some good savings.

that markup as part of the, like, accessibility tree,

where it hides the element

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

auto on them.

vertically center something in CSS

When before you know it, there's, like, a Microsoft Word Calibri ESLint Let's look this up.

just with a normal

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

center.

just like you have always wanted to. Right? Without grid, without flex, let us know. I'm, That's right. Yeah. And and if that's not yeah. Actually, I think a number of these Hagen things have good it, it then will render or unrender this thing. But in the same time, it's Yep. So Interesting. This is an interesting thing that you can use, and it does

center things, believe it or not, using one property, align hyphen content why exactly this is interesting Next one is,

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.

to make CSS centering jokes.

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

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

that's just wrapped onto the next line. It looks really weird.

areas where, like, typography is super important.

So it's not going to make it balanced, but what it's going to do is kind of get you into, even when there is no scroll bar needed. So let's say

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 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 Is is that something from, like, Asian languages? would you use a shape for? Clip path is the obvious one, and the docs are also saying offset path.

because often, you'll have, like, one word on top, and there's the options are, to do that in CSS directly is gonna be nice.

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 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 Is an offset path what you use to, like, draw on an SVG or, like, move things along a path? some new CSS functions. We have round, the death of custom a 25 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,

Text Wrap, balances in every browser.

prioritize 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 and you just tell that stuff to, hey. Don't don't render until we told you to. Not when you have, like, just kind of as it would.

they offer offer you new ways of wrapping your text around. Because when you have wrapped text, like, a term for, like, a boogeyman.

makes it look prettier JS really what it is. They say it's good for,

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

all in my reset on h one through h six,

tries to do sort of, like, not justified, because justified fills that area,

text wrap balance on 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

But the the difference between balance and pretty is that pretty is more similar to Text Wrap wrap,

confidently using today

there's, I don't know, seven or eight things where you can start

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

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, make the rounding interval optional but not

You're using actual CSS values.

l 35 pixel. Right? Like, you could reason about that. But with the new shape function,

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

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, So here JS the difference between these two, and this makes

why have something

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,

man, sometimes when we do our CSS battles, I think maybe I could use clip path and, 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.

it is

at all. And the first one is the shape function. Now shape is something that can be used in something like clip path.

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,

shape can be used. Now

like, graphics editors as well. Right? But Yeah. Writing that by living algorithm, and then you can return

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

But within this new syntax,

memorize

or or at least flexible or dynamic based on variables.

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.

in pixel value, so it's very hard to do something that is responsive cables

and then two l

basically, when you want to draw a path in SVG,

Anywhere that you would typically have used the path function in the past,

and you're going from spot number 61 pixel

I do feel like has gone underneath the radar. And even for me personally, it took a little bit to understand

and 35 pixel

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, 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, being able to do them and the

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.

crazy bezier syntax or anything like that.

syntax. This syntax is alright. L would be like line,

completely that largely does very similar things to Path? Right?

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

field sizing auto Wes JS you type in the text box, it will grow And

I love that.

any of the parts that they want, hide something but still maintain split it up into its color channels. So you could take a a HEX code and split it up into RGB.

So with content editable plain text only or let me show you here. If I add an attribute content editable on every single one of these wrappers. Right? There's 826.

literally anything. Right? But content edible elements that need to be rendered.

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 Text emphasis is quite different from text decoration. The text decoration property does not inherit blah blah blah blah.

Our next one here is align content, which allows you to

So this is kind of an interesting way where you could use a div

will simply only allow you to edit some formatted text and paste it in,

equals plain text on each of the lines.

content editable plain text only. This one's actually kind of interesting.

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

span being pasted in. It's it's a nightmare. So this is is very welcome. It's been in Chrome you basically say where you wanna start and then you want to have a line to.

We do have that

And content,

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.

plain text. And if you were to copy

to the body, I can obviously go ahead and type anything into any part of this this document. Right?

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

However, if I were to copy some text that has is rich text formatted,

automatic.

So I ordered a like, a

and then you clip them in from on on either side.

So the user types in something, and then it checks to see if it's valid or invalid,

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.

a a dinosaur from a children's, You can if especially if you want, like, a really nice flush, auto.

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

to put the HDMI all the way around.

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.

the

now it's part of the show we're getting into sick picks and shameless plugs.

Interesting.

Okay. So I'm gonna sick pick two things that,

show that would

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

which is

a bunch of these different HDMI ones. And there's also HDMI ribbon cables, 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.

The thing you could not do with valid and invalid Text emphasis I didn't hear about it until you put this in here. Yeah. No. What the heck? Here. Text emphasis Yeah. So the custom at custom media today, meaning that even if they don't have, like, massive, like, 95%

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

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

Absolutely.

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

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

We will catch you in the next one.

Wes suspiciously the browsers did something where, like, elements on the page. Yeah. Which is not I think that is it. You shouldn't do that. Right? auto. Ready and watch.

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,

Randy, the editor, will put a a picture of pokearoo over top,

recommend us more.

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

Wes, yeah, it comes from the, Peace.

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

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

are triggered only after the user interacts with the input.

male

Yeah. Flaky cables is the bane of our existence.

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.

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 transpile it because it had to be

maybe also the man. I feel like I've talked about this on the show before, but, like, I've

and scroll bar width. Now scroll bar width

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

my own personal website, I was going from, like, a

gutter Yeah. So that might overtake this. So a style query would 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.

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.

But with Text Wrap Balance and Text Wrap, pretty,

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,

overlaying, can be set to auto, thin, or none. So if you want to pnpm any scroll container, scroll bar width, none,

Yes. Over, 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 Like that? for a very, very long time, like fifteen years or something, but it was finally standardized and added to all the browsers.

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

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

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,

If this was on a PC because 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 that there will be no layout shift. So just a lot of control.

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.

Next one here is an interesting one that I think does not get enough love. Now this is property. Now content visibility editable,

you'll want to check out Sentry at sentry.i0/syntax.

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,

This is the content 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.

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

best way to wrap these things.

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.

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

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

very easily use the post CSS plug in to just modify this one if you are using post CSS.