Welcome to syntax today. We're going to 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. I don't know about you. But there's some really cool stuff in here.
So strap yourselves in and get ready. There's a lot of CSS stuff. So my name is Scott Tylenci. I'm a developer from Denver with me as always as well.
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 comes, but we're at a point now, maybe six months since we've done one of these shows.
There's 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 think that for me, when I was researching some of the things that I missed, I was like, Oh, you can do this 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 by all means, I'm going to 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 you're watching an audio and you want to 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 is a tax is man. Sometimes when we do our CSS battles, I think maybe I could use clip path and a C.G. And then I'm like, I can't imagine authoring this by hand. If you don't know the syntax, it's SVGG, right?
That's what this is? Yeah, SVG has basically when you want to draw a path in SVG, you basically say where you want to start and then you want to have a line to that's what the L's are. And then if you want to move to somewhere without having drawing a line, you put an M in front of that. And there's six or seven different commands that you can use to draw something.
And that's the kind of code that's behind a lot of these graphics editors as well, right? But writing that by hand, like I've done it, I've have a bunch of utilities that will draw them in and add rounded corners to these types of things. But it's not something that does well. And the values are absolute in pixel value.
So it's very hard to do something that is responsive or at least flexible or dynamic based on variables. That's right. And I think of very basic shape. If you're looking at this, you see M 50 comma zero, L 61 comma 35, like you could reason about that.
It's like, all right, L would be like line and you're going from spot number 61 pixel and 35 pixel and then to 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 the clip path is in a big, 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 way that it's written is way more readable. So the syntax is from 50 picks, zero picks, comma, line to 61 picks, 35 picks, comma, line to.
And then you can even do curves really easily as well, like with curves or 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 so 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. You want something to click. You can see you in it. Twenty five percent of a parent container.
Like if you're drawing like a receipt and you want to 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, path and clip path has always been one of those things where I'm like, I guess I'm going to 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 all author, but still, I do feel like this syntax is way more author friendly and way more usable and honestly more functional overhaul. So I still about CSS shape for sure.
So I'm just like thinking of like, 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?
It's an offset path. What you used 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.
Determines the elements position within the past parent. Oh, so if you have, is that for 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 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 want to offset that stroke. Yeah. It's a pretty common way to do like writing or fill in a path as you go. Okay.
Yeah. I see. But it can also be used for for for animations if you want to like explicitly move something along. A certain line, you can convert like 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 straight away in CSS is what we need. Big fan. This is this is dope.
And I love that you can use variables and CSS units in this thing. So 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 have a demo here where you'll see zoom here where we're zooming in on a or zooming an element here and the sibling that's next to 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? As soon as you scale something up, you give up elements being able to be positioned relative to that, right? Because you're sort of, yeah, it still takes its space up in the DOM, but it's not increasing how much space it takes. That's right.
You painted it. 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 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 anything like that, which can be super useful. By all means scale, it has its own set of use cases. But this zoom element property thing is a means of sizing something up in place relative to its other items while also essentially scaling it. It's pretty neat.
I was really surprised to hear this thing existed at all. I didn't even think about this. And I'm like, oh, there's so many nice use cases where you want something to get larger in place and have everything reflow around it. Yeah, I often will like a grid item, if you had a grid of three items and you want to scale the middle one up, you can use scale 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 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 reflow or resize themselves. I actually had no idea that this was a thing. And I wonder if it's because every time I see zoom, I think, yeah, we used to have zoom in IE.
We had underscore zoom as an IE fix. Maybe I had just been disregarding it because that was a leftover thing from IE six days. I'm going to tell you what, I disregarded it just because I didn't think it would 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 leftover or whatever. Also, another small thing that, you know, 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 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 25 years now, but the syntax for being able to do them and the feature set of what you can then style has been always different in all the browsers. So now with the new like scroll bar CSS, you're able to, what 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 is always visible, you'd see that the track of it would in fact be blue. There's also the scroll bar gutter and scroll bar width.
Now, scroll bar width can be set to auto, thin, or none. So if you want to on 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 bar 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 area becomes bigger. And now needs to have a scroll bar. Well, that scroll bar is going to pop in 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 is 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 blog post or something like this, or you have some sort of long scrolling text area, you should always throw on a 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 page that was just had a couple of words on it to like a very long page.
And then as you click between those two pages, the whole website shifts over like 20 pixels. And it's really disorienting. And you don't necessarily know what that is until you're like, oh, it's the scroll bar showing up here. So just even if you're not scrolling, throw it on there.
Yeah. Anything you can do to prevent that like shift of layout is for your benefit. It's annoying for users, honestly. So next one here is text wrap.
Now, text wrap, these ones are pretty neat because we got a couple of new 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 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 wall and then next one goes to the edge of the wall, breaks it at 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 to you. It's a similar amount of text on each of the lines.
So you've often had that like if you have like a heading, text wrap balance is really handy for heading. In fact, I'm considering putting text wrap balance on all in my reset on H1 through H6 because often you'll have like one word that's just wrapped onto the next line. It looks really weird. Yeah.
You can't really explicitly put in line breaks in there because you don't necessarily know how wide it's going to 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 balance is now 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 where it's in technology preview of Safari and it's not currently in Firefox. But the difference between balance and pretty is that pretty is more similar to text 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 or calling it 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 a save you from situations where you have just like one word on a line making the whole thing look odd. And it just makes it look prettier is 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 actual code in the like Chrome code base at some point. 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 way to wrap these things. Yeah. And the nice thing about these things is that you can start using them today to balance this in all of them.
But 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 that's not.
Yeah. Actually, I think a number of these things have good good fallbacks, right? Like the scroll bar stuff, the fall back is just that you don't get that silent. Is that the end of the world?
Absolutely not. But Zoom has pretty good support and shape has pretty good support. This next one, media query range syntax has good support. You can very easily use a post CSS plugin to just modify this one if you are using post CSS.
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 post CSS that I do not even remember what the previous media query syntax was because it was so confusing to me. It was a band. You'd be like, so like if you want this, do something between 300 and 400 pixels, you would do like at media max with 300 and at media max with less than 400.
And 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 even like what we have on syntax that even better.
Yeah. Well, we use and I'm showing on screen now just several of these custom media queries. No 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 picks.
That is so dang readable. Hey, it's less than 400 pixels. This applies. Oh, who would have thought that's a nice way of doing it?
So with this greater than X picks or whatever CSS value you might want in there. So I do really love this syntax. And for me, again, as just somebody who never found the previous media queries syntax to be that readable, I know that's not 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 can do right now. You can't make a variable called below small and stick that in a variable. Yeah. So the custom at custom media is something that, man, I'm going to 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 style query would target a specific CSS variable that's been 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 just basically flipping Boolean variables.
And then you can use those. Okay, that makes sense. So we can kind of do this where we at with style queries right now. Hold on.
Let's find out partial support for only working with CSS custom property values. That makes sense. Oh, so it's actually in everything, but Firefox right now with CSS custom property. So CSS variables.
So again, this is not the show of things that work, but not in Firefox. Believe me, there's a whole list of things that I had to take out of the 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 SaaS 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, 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 century at century.io forward slash 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 to century.io for syntax again. We've been using this tool for a long time and it totally rules. All right.
Next one here is an interesting one that I think does not get enough love. Now this is the I'm going to have a demo here. I'm going to adjust 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 amount of overall savings that people can get, especially if you have a rendering heavy website. I'm trying to find this. So Facebook engineers observed up to a 250 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 yourself where it hides the element and it preserves its rendered state.
But when you remove that, whether that's with JavaScript, right, you're removing that content visibility property 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 in 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 accessibility tree, during that if you hit command F and search for something on the page, it will still find that item, which is really nice.
So sort of the alternative to using content visibility is virtual scrolling. So if you have a div with like a million rows in it and you just want to scroll that thing as fast as you can, what often happens is that you use a virtual scrolling library, like 10 stack virtual and it will render the items that should be shown, like let's say you show 10 and then it will render like 10 or 20 before it and 10 or 20 after it. And that way as you scroll, it's kind of just laying down track. You know that like Wily Coyote is on a train is laying down track as you're going.
That's what virtual scrolling does. But the downside to that is it literally just takes that out of the DOM and your page search sucks. It does this. If you want to search for a reply on a tweet, it's really frustrating because it only puts like six or seven tweets in the DOM.
If there's a thousand replies, it's really hard to search 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 emojis and images.
Right? It turns out to be like 200,000 elements. I need to be rendered. And it was dog slow on all these browsers.
So what I did is I turned on when this launched. We were going to do virtual scrolling, but then it didn't. And I just turned on content visibility auto. And what I did is it just told the browser, hey, just render them when you think you need them.
And it's kind of just like virtual scrolling for free. But I don't like like two years later, I went back to it. 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 pre-render whatever. And now it's butters 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 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 the body away from more to load, it was almost giving me that experience. So I just took it off entirely. And I was like, well, you should know Chrome.
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 with what with content visibility.
I'm wondering if because you're loaded, when you're loaded, 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, 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. And this has got to be the longest. You've been playing without.
Content visibility auto state change. It has no camel case. Nothing. There's just like it's just vomit here.
Content visibility auto state change. This event fires anytime these state has changed. So I have all of these divs and one of them has a class on it that will trigger that when this thing gets rendered, it will 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 every time it comes down. Is it showing and hiding?
Yeah. So this is an interesting thing that you can use. And it does potentially have the possibility for a layout shift. So there's another property here called Contain Intrinsic size, which allows you to specify the in line in block.
I believe it's in line in 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 where you could say, all right, the width is auto and the height is 300 pixels.
That way it's like preserving that space for when this does render it. And it 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 is what frustrates me about the API is like the browser knows all of this. You should just perform me. And that's what it did. I literally ripped all of this out.
And it's been the most performant has ever been. 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 browsers 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. All right. So I have this page here. And I got these are person wrappers, right?
So I put Content Visibility Auto on every single one of these wrappers, right? There's 826. And 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 popular.
But as soon as I wrap it, now I'm goofing out my CSS grid. Because now I have, well, how many 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 broken. And then I know there's that like, just play content in CSS. But then does that goof up content visibility? But watch.
So look how awful this is. Now let me take it off. Butter. Yeah.
Oh, yeah. But it's because they've all been pre-rendered ahead of time. So you're doing it. No, it's not.
It hasn't been watched. Let me refresh. Wait, how is it not been initially rendered? Are you doing any sort of virtualization?
Nothing. Nothing. Literally 826 divs in a div on CSS grid. Look how butter that is.
And then we go ahead and add a con. So they've already been rendered, right? Every single one has been rendered. Now let's add it.
Content Visibility Auto. Ready to 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 this experience 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 render until we told you to.
Not when you have like, you know, 800 items that need to render quickly as you're scrolling. Yeah. Hey, 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 doing a bunch of articles instead of like a. What do you, sorry, what was your example?
Let's see, there it's smooth. I think it's just because I have freaking two other elements on the page. Yeah. Which I think that is.
You shouldn't do that, right? But like, that's a pretty, that's a pretty, yeah, it's totally fine here. Yeah, it's interesting. Nonetheless, I do think it is.
Yeah, you're scrolling time and all that stuff. But like, props to the Chrome engineers were fixing it because at the time that fix was the fix. But now for some reason it's not. All right, let's get on to the next one, which is this one is so bizarre and I have never heard of it.
Text and emphasis. I didn't hear about this. But 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 that something for me? 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 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 bet this is something for languages that are not like Latin based. But I guess it'd be helpful if you want to like mark a whole bunch of text. And the kind of interesting thing about it is it increases the height of the line height when you add it.
So that could be helpful as well. So they're not overlapping. Yeah, but weird, weird, weird. Yeah, if you are out there and you are like text emphasis, that's my thing that I've been waiting for.
Or you're just using it all. Let us know. What are you using it for? I'm very curious about this.
Is it a karaoke thing? Like, I mean, I guess you could actually build a karaoke thing with this way. I wonder if you can highlight in the selected word. Yeah, that's good.
Like, I guess there's been many times where I want to highlight specific things. Like that? I don't know. No.
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 hex code and split it up into RGB.
You can take any color and you could take a hex code and split it up into its HSL values. And then it will simply give you variables H, S, and L, or RG, and B. And then you can return the RGB values slightly tweaked. 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, adding opacity is another really good one.
Yeah, totally. And I had this on the screen. We're using this on the syntax site. When you overlay on a button, you want to 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 .35 to the lightness and then keeping the C and H values, the, man, what is the C? Chroma? You?
I know H is you. 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, where you're having a color system that's deriving various shades from other colors.
It's useful for like, 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 use this. 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, RAM and mod.
Now, round is a really interesting function. It allows you to round numbers. I don't know about US, but I find it odd when a function has an optional parameter. That's the first parameter.
Like that makes no sense to me. Like in this one, 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.sealing, seal down, which is the same as math.floor, nearest, which is the same as math.round, and two zero, which is the same as math.trunk. So this function, you could say round nearest comma, the value you're rounding.
And then the last argument here is the rounding interval. Wes, you know what that means? Yeah. It's the, if you want it to round by a certain amount.
So like, what's that you only wanted to do at by point one value or by point five? So you can give that value. Otherwise, sometimes you get these numbers 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 where things don't perfectly line up because you've got that weird half pixel.
So being able to do that in CSS directly is going to 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. Oh, yeah.
Yeah. If you've got like a grid and you want to increment or decrement based on a certain grid value, you can take by by 25 pixels. That's kind of like a step as well. Maybe that's even, it would be even helpful in like, Oh, a step animations.
Yeah. Step makes way more sense to me. And that's great. Is it all the browsers round?
Yeah. So round is available. Let's check the full compatibility. Yeah.
It's in all the browsers. It's available in everything now. And again, this is neat. I do find it totally odd that you can omit the first argument and then it just becomes the value and then the rounding interval.
Like, I never like that. Make it the last one. Yeah. Yeah.
The rounding interval also is optional. I don't know what happens if you want to make the rounding interval optional, but not the first argument. I don't think the rounding interval is optional. No.
Let's look this up. No, you're right. It's not optional. You must pass it.
So yeah, that is a bit odd. I'm sure there's always things there. What's a bummer is we can't pass an object like in JavaScript, right? Yeah.
That always was odd. Yeah. When the signature, there's so many functions where they add a new argument and then main parameters. Yeah.
They have to 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. Another one of these new functions is mod, which gives you the remainder, just like the modulo in JavaScript. So this is neat.
Again, it's available in all browsers as well. You can now use mod. Mod returns 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's the difference between these two. And this makes a moderate amount of sense to me. I'm not a math person. So for me, I don't necessarily understand the use case difference between here, but the difference is that mod, the result takes the sign of the divisor as in 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, a.k.a. the first value. So it behaves like the percentage sign in JavaScript.
So the example that I'm seeing here, and again, when in which you would care and need to use this to me, 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. All right.
Next one we have here is content edible plain text only. This one's actually kind of interesting. So with content edible 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 document.
However, if I were to copy some text that 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 sort of comes along with it. 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. 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 don't get that. Where that is helpful is if you have a text area, right? A text area doesn't have any formatting in it. And you want the height of your text area to be automatic.
We do have that field sizing auto where as 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 listen for a key up. It'll simply just grow as you're typing into the box. However, browser's work 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.
You can make a kind of a nice little wizzy wig 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 goofing up adding any image to them. You know, wizzy wigs. You give some wizzy wigs and then before you know it, there's like a Microsoft Word Calibri inline span being pasted in.
It's a nightmare. So this is very welcome. It's been in Chrome for a very, very long time, like 15 years or something. It was finally standardized and added to all the browsers.
I love that. And the 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-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-content center and it puts the child in the dang center vertically, just like you have always wanted to.
With out grid, with out 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 things, right? We've had it in Flexbox for like 15 years, had in grid for, I don't know, seven, eight, nine years since we're in 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 you're off and running, right? And a lot of people ask, well, what about the other way? Well, you can use text align center for that. You can use margins or auto for that.
Yeah, you are no longer able to make CSS centering jokes. Yes, a skill issue if you still make those jokes. Skill issue, cut it out. Next one, I have your starting style.
Now we've talked about this on the past, but now 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 none. 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 starting style. So here is an example where I have a list item and I have a translate X of zero. Oh, 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 be using them in this case, but it's all right.
You're fine. They still work. The old ones work. They work.
All right. So let me explain it again for anyone who's lost. You can set something on its end 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 make it red and then go to whatever 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 just lovely. And then once we get allowed to screte, it's even going to get better. So a lot of discreet is going to allow you to do this with the content visibility property that we talked about earlier on in the show.
Which, yeah, you could like you could animate from display none to display block, right? Yeah, or content visibility hidden to visible. And same with the calc, calc size is going to allow us to animate from to high auto. That's going to be really nice.
That again, that's that's interesting. But not all of them. Yeah. Yeah, totally.
Sick. All right. Well, last one here before we get going. This has been so much stuff.
Jam packed full of new CSS features is 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, a high or does whatever you need to. Yeah. So these are just the way it should have worked. Yeah.
There's there's like one angular library and when you start typing your email address, like you type a W and it's like, in out, of course, it's not. I'm not done yet, you know. And this user invalid will first wait for you to interact with the input and second, wait for you to finish typing in and blur the input. So you might tab away or something like that and then it will run the validation step for you, which is what you want.
This is what you want. That's not anybody. It is such a bugaboo of mine. Anytime.
Is that, yeah. Okay. I hope you're not. That's like a stroller.
Well, that's a Destiny's Child song from like, what does bugaboo mean? In Ontario, we have this thing called Pokaroo. Randy, the editor will put a picture of Pokaroo over top, which is a dinosaur from a children's show that would was suspiciously maybe also the man. I feel like I've talked about this on the show before, but like I always tell people, like, oh, you're such a Pokaroo.
Like you never see two people in the same room at the same time. Like where are you going, Pokaroo? And then what's really happening is Pokaroo is the man on the show. But that is a Pokaroo.
What is a bugaboo? A bugaboo, a girl or a guy who don't leave you alone. An overly annoying person that constant calls or goes to your home uninvited. Well, yeah.
It comes from the, like, a term for like a boogie man. But I do know it from the Destiny's Child song. Okay. So that's it.
That's all of 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 the where it's at. Let us know.
I'm very interested to hear about it. So another part of the show we're getting into sick pics and shameless plugs. Okay. So I'm going to say pick two things that I've been using, you know, because I have a little SSD.
It's a little like one of these little four terabyte SSDs. And occasionally I want to use this thing on my phone. And what happens is you end up having like a tail. It's like a USB cable and the thing.
Oh, yeah. Your phone up. And it's like, oh, this thing's going to get yanked out at any time. So I saw somebody on the 3D 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 180 degree USB-C thing that plugs into, in this case, the bottom of my phone and just takes it 180 degrees. And the next was a mail to mail USB-C adapter. So I plug the mail to mail into the 180. I plug the 180 into my phone and then I plug the hard drive into this mail to mail.
And then essentially is just pinning the thing to the back of my phone. So it's no longer dangling or hanging around. And then now I can 3D print a little clip forward if I want to do that. But these things are great.
Nine, 10 bucks, 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 kind of hanging on. If it's a 90 degree, then I could Velcro to the back of my computer.
You get every single angle. It's like plumbing pipe. You got a bunch of 45s. You could just look it and move it right to the back ear thing.
That'd be great. Yeah. I'll take it. All right.
Well, I'll take something along the same lines as well because 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, there's like eight different possible angles that you can get, right?
Like HDMI vertical to right angle to horizontal. And there's all these different angles you can get. And it's really helpful, especially if you have a TV, you want to put nice and flat against the thing or you've got like a, we have a projector that the HDMI 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.
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 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 other area I haven't gotten into yet, but I've been kind of 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 flexy ribbon cable. And then you clip them in from on either side and you can, especially if you want like a really nice flush HDMI coming out of a camera. So something like us, we always have our cameras plugged in all the time.
It's nice to make that look a little nicer. Yeah, mine's a mess. I have a right angle one, but it's like the L-shape one. 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.