Syntax - Tasty Web Development Treats
Hosted by Scott Tolinski and Wes Bos
9,958 words · 2 speakers
Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.
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. And I don't know about you, Wes, 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 Tolinski. I'm a developer from Denver. With me as always is Wes. Boss, what's up, my man?
Hey, I'm excited about this because I feel like the last year or so of CSS, there's been so many new things. And we've, we've had many shows kind of going into all these new features. But a lot of them had been like, it's coming, here, here it comes. But we're at a point now, maybe six months since we've done one of these shows, there's, I don't know, seven or eight things where you can start confidently using today in your projects and not have to worry about like older browsers or like fallbacks or polyfills or any of that.
Yeah, and a lot of cool stuff, too. You know, I 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 on 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 syntax is, man, sometimes when we do our CSS battles, I think maybe I could use clip path and SVG. And then I'm like, I can't imagine authoring this by hand. If you don't know the syntax, it's SVG, 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, oh, there's six or seven different like commands that you can use to draw something. And that's, that's the kind of code that's behind a lot of these graphics editors as well, right? But writing that by, by hand-
Can you imagine?
Is, like, I've done it. I have a bunch of utilities that will, will draw them and add rounded corners to these types of things, but it's not something that does well. And the values are, are absolute in pixel values. So it's very hard to do something that is responsive, or, or at least flexible or dynamic based on variables.
That's right. And, and I think for a basic shape, if you're looking at this, you'd see M50, comma, zero, L61, 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, that L 35 pixel, right? Like, you could reason about that. But with the new shape function, it is all CSS, baby. As in, we get access to, you know, the clip path is in a big old, long magic string, right? It's a big old string SVG. But within this new syntax, you are specifically writing CSS.
You're using actual CSS values. The, the way that it's, it's written is way more readable. So the syntax is from 50 pics, zero pics, comma, line two, 61 pics, 35 pics, comma, line two. And then you can even do curves really easily as well, like with curve two.
Bezier's.
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, Ms, percentages. You can use variables. You can use all of this stuff. And to, to me, if I was doing a CSS battle and I was like, ooh, 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.
Container queries, like you want something to clip.
CQ units.
25% of a, a parent container. Like if you're drawing like a, 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, yeah, 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 I'll author, but still, I do feel like this syntax is way more author-friendly and way more usable and honestly, more functional overhaul. So, stoked about CSS shape for sure.
So, I'm just like, taking a look here. What else would you use a shape for? Clip path is the obvious one, and the docs are also saying offset path. What is an offset path?
Is an offset path what you use to like draw on an SVG or like move things along a path?
The offset CSS property specifies a path for an element to follow and determines the element's position within the path's parent. Oh, so if you had, 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 the, what is it, the offset? You change the offset, I don't remember the exact property, I'd have to look that up right now.
Oh, oh, I see, I see. So if you're drawing a stroke, you want to offset that stroke? That'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 animations if you want to
along, yeah.
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.
More of this SVG stuff just landing straight away in CSS is what we need. Big fan of this.
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 in 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 them, right? Because you're sort of, it still takes its space up in the DOM, but it's not increasing how much space it takes.
That's right.
When being painted.
If you wanted multiple elements to zoom or scale correctly, you'd have to scale the container or anything like that. But then those elements themselves would get scaled. So 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. 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 now I'm like, oh, there's so many nice use cases where like you want something to get larger in place and have everything reflow around it.
Yeah, I often will like a grid item, you know, if you had like a grid of three items and you want to scale the 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 like a container query. But with a zoom, you could just literally make the entire thing larger and the elements on the left and the right will reflow or resize themselves. That I actually had no idea that this was a thing. And I wonder if it's because every time I see zoom, I think like, yeah, like we we used to have zoom in IE.
We had underscore zoom as like an IE fix. Maybe I had just been disregarding it because that was a a leftover thing from like IE six days.
I'm gonna tell you what, I disregarded it just because I didn't think it'd be useful or cool. And I may have seen the word zoom and been like, okay, whatever. Like same thing, like you said, maybe it's just a leftover or whatever. Also, another another small thing that, you know, not not that new, but you may notice that we're using, man, stop scrolling, that we're using scale as a property instead of transform scale. I feel like I cannot say this enough, but you can use scale, rotate and translate all as individual properties without using transform. You can do that and it's a good thing to do because you can animate them all separately or control them all separately without having to overwrite your past ones each time. So a 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? 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 on to. 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 the track of it would in fact be blue. There's also 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 that's that like area becomes bigger. And it 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, this, there's a chance this is going to get longer or that there will be scroll bars here. And therefore we'll be able to make sure that there will be no layout shift.
So just a lot of control.
Generally, when you have like a, either your body of like a blog post or something like this, or you have some sort of long scrolling text area, you should always throw on the scroll bar regardless of if there is any scrolling or not, especially with like single page applications. As you go from page to page, my own personal website, I was going from like a, a page that was just, had a couple of words on it to like a very long page. And then as you click between those two pages, you're, the whole website shifts over like 20 pixels and it's, it's really disorienting and you don't necessarily know what that is until you're like, oh, it's the, the scroll bar showing up here. So just, even if you're not scrolling,
throw it on there.
Yeah. Anything you can do to prevent that like shift of, of layout is, 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, the wall and then next one. Goes to the edge of the wall, breaks it at the, the next space, right? And it does that just kind of as it would. Balance tries to do sort of like, not justified, because justified fills that area, but it does kind of justify in a way where it's trying to keep it all balanced as to visually what it looks like.
Similar amount of text on each of the lines. So you've, 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, 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 balance is 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 wrap, but it's going to, I have a demo here where text wrap wrap will have like a single word on the last line. They're calling that like an orphan. Where text wrap pretty is going to prioritize not having those types of situations.
So it's not going to make it balanced, but what it's going to do is kind of get you into, save you from situations where you have just like one word on a line, making the whole thing look odd. And it just, it 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, best way to wrap these things.
And then I think about these things is that you can start using them today. Balance is in all of them, but if, if pretty is not in all of them, it doesn't necessarily matter because it just falls back to regular wrap.
That's right. Yeah. And if that's not, yeah. Actually, I think a number of these things have good, good fallbacks, right? Like the scroll bar stuff, the fallback is just that you don't get that styling, you know?
Is that the end of the world? Absolutely not. But Zoom has a pretty good support and Shape has pretty good support. This next one, media query range syntax has good support. You can very easily use a post CSS plugin to just modify this one if you are using post CSS. The, the thing that's neat about this syntax, which is the media query range syntax. So I've been using this for so long with post CSS that I do not even remember what the previous media query syntax was because it was so confusing to me.
It was and you'd be like, so like if you want to do something between 300 and 400 pixels, you would do like at media max width 300 and at media max width less than 400. And it's, it was very, very verbose. In this case, you can simply do at media 300 pixels lesser equal to width and then lesser equal to 400 and that will get you right in between there. But I, I even like what we have on the syntax side even better.
Yeah. Well, we use, and I'm showing on screen now, just several 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 pics. That is so dang readable. Hey, if the width is less than 400 pixels, this applies. Oh, who'd have thought? That's a nice way of doing it. So width is greater than X pics 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 query syntax to be that readable, I know, I know that sounds stupid, but this just is so much more readable to me.
Is that going to be a thing at one point where you can stick custom media queries into variables? Because that's not something we could do right now, right? You can't make a variable called below small and 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.
So a 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're just basically flipping Boolean variables and then you can use those. Okay, that makes sense. So we could, we can kind of do this. Where are we at with style queries right now? Hold on.
Let's find out.
Partial support refers to only working with CSS custom property values. That makes sense. Oh, so it's actually in everything but Firefox right now with CSS custom properties. So CSS variables. So again, this is not the show of things that work, but not in Firefox. There's, believe me, there's a whole list of things that I had to take out of this show.
Oh yeah, no kidding. And so I guess right now we are stuck with this at custom media. If you are using post CSS, otherwise honestly, it's not hard to write these things by hand. The only reason we're using at custom media is because consistency, it's nice to have that. And you know, I really loved having variables for my breakpoints inside of sass and stylus and stuff. So I'm just used to this, but once we get 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 Sentry at sentry.io/syntax. You don't want a production application out there that, well, you have no visibility into
in case something is blowing up and you might not even know it. So head on over to sentry.io/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 gonna have a demo here, but I'm gonna 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, the amount of overall savings that people can get, especially if you have a rendering heavy website. And I'm trying to find this, uh, so Facebook engineers observed up to a 250 millisecond improvement in navigation times, uh, just from using this property alone. So. Crazy stuff. That's some good savings.
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 and showing yourself.
A huge benefit to content visibility hidden is if you want to hide something, but still maintain that markup as part of the accessibility tree. Meaning that if you hit like command F and search for something on the page, it will still find that item, which is really nice. So 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 like a virtual scrolling library like 10 stack virtual. And it will render the like 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 it. And that way, as you scroll, it's kind of just laying down track. You know that like Wile E. Coyote is on a train. He's laying down track as you're going. That's what virtual scrolling does. But the downside to that is it literally just takes it out of the DOM. And then you're like page search sucks. Like Twitter does this. If you want to 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 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 that 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 gonna do virtual scrolling, but then we didn't. And I just turned on content visibility auto. And what that did is it just told the browser, hey, just render them when you think you need them. And it's kind of just like, like virtual scrolling for free.
It's free, yeah, totally.
Like, I don't know, 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 or whatever. And now it's butter smooth. So like something changed where the like calculation of content visibility auto was supposed to be fixing it, but it was so intensive that was causing the website to be laggy. Like I would scroll and then it would render some more and then it would scroll and then it would render some more. And it was like really, you know, when you scroll to the bottom, you wait for more to load.
It was almost giving me that experience. So I just took it off entirely and I was like, well, the, you should know Chrome. You're the one, you're the one painting it to page. You figure it out. So I took it off and now it's butter again.
I have a hypothesis here on how to fix that, Wes.
What?
With content visibility. I'm wondering if because you're loading, when you're loading those things and you're scrolling, you're not loading like one or two, you're loading like.
826.
Right. So like, I would imagine if you were to group your incoming ones into groups of like 10 and then throwing content visibility on that group rather than on the individual item.
Okay.
I wonder if that would cause less.
Rendering having to happen, like you're rendering more in chunks rather than in each individual one? That's a hypothesis. I have no clue. There's also this, like you could maybe even debug this a little bit. There's an event. I have some JavaScript here on screen and this has got to be the longest event name without-
Content Visibility Auto State Change.
It has, it's no camel case, nothing. There's just like, it's just vomit here. Content Visibility Auto State Change. Uh, this event fires anytime the state has changed. So I have all of these divs and then one of them has a class on it that will trigger that when this thing gets rendered, it 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, uh, which is interesting. And then it, every time it comes on-
Showing and hiding.
Yep. So, uh, this is an interesting thing that you can use and it does potentially have the possibility for layout shift. So there's another property here called contain intrinsic size, which allows you to specify the, um, inline and block. I believe it's inline and block. Uh, 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.
When 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, this is what frustrates me about this API is like, the browser knows all of this. You should just do it for me. And 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 like, I think the browsers did something where like, of course we need these knobs to be able to control them ourselves. But in most cases, the browser should hopefully figure these things out.
I think it depends. I think it depends on the use case. So, uh, 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, these are person wrappers, right? So I put content visibility auto on every single one of these wrappers, right? There's 826. And watch, watch me scroll it. Watch.
Oh yeah, because it's having to render and unrender them really quickly. And there's what like, as you're scrolling, it's doing that a ton of times. I bet if you put those into div wrappers, if that would even be possible.
But now, as soon as I wrap it, now, now, now I'm, I'm goofing up my, my CSS grid because now I have, well, how many do you wrap? Do you wrap? Do you wrap, uh, three at a time? And then what happens when I go down to two? Now my CSS grid is, is broken. And then like, I know there's that like,
Oh yeah.
Display contents in CSS, but then does that goof up content visibility? But watch, so, so look how awful this is. Now let me take it off. Butter.
Yeah. Oh yeah. But it's because they've all been pre-rendered ahead of time.
So your initial rendering. It's not, it hasn't been, watch, let me refresh.
Wait, how's it not been initially rendered? Are you, are you doing any sort of virtualization?
Nothing, nothing. Literally 826 divs in a div on CSS grid. Look at this, look how butter that is. And then we go ahead and add a, so they've all, they've already been rendered, like, right? Every single one has been rendered. Now let's add it. Content visibility auto. Ready? 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, don't render until we told you to, not when you have like, you know, 800 items that need to render quickly as you, as you're scrolling. Yeah.
Okay, let's, let's try. Let's take the, let's take these articles here and let's add.
I still think this is the same thing before. You're, you're, you're doing a bunch of articles instead of like, a.
What do you, sorry, what was your example? I'll see there it's smooth. I think it's just because I have fricking 200,000 elements on the page.
Yeah, I think that is it.
You shouldn't do that, right? Uh, but like, that's a pretty, that's a pretty, yeah, it's, it's totally fine here.
Yeah, it's interesting nonetheless. I do think it is, yeah, your scrolling time and all that stuff.
But like, props to the Chrome engineers for fixing it because at the time, that fix was the fix. But now, for some reason, it's not. 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 emphasis.
I didn't hear about it until you put this in here, yeah.
No, what the heck? Here, text emphasis simply allows you to put like these little...
Karaoke dots?
Yeah, karaoke dots on top and there's, the options are, uh, filled, open, dot, circle, double circle, sesame. Is, is that something from like Asian languages?
I've never heard of that.
Triangle. So basically this allows you to decorate text on the top and the bottom. For what reason, I, I do not know. Uh, 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.
Hmm.
But like, I guess it'd be helpful if you want to like, mark a whole bunch of text and the kind of, the interesting thing about it is it increases the height of the, the line height when you add it. So that could be helpful as well. So they're not overlapping.
But weird.
Weird. Just weird. Yeah. If you are out there and you were like, text emphasis, that's my thing that I've been waiting for. Or, or you're just using it all. Let us know. What, what are you using it for? I'm very curious about this. Is it a karaoke thing? Like, I mean, I guess you could, you could, you could actually build a karaoke thing with this where you're just like...
I wonder if you can...
Highlighting the selected word. Yeah.
That's good. Like, I, like, I guess there's been many times where I want to highlight specific things.
Like that? I don't know.
No.
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 an RGB, 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 R, G, 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 have 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, what is the, man, what is the C? Chroma? Hue? I know H is hue. Either way, we're keeping that C and H value. And again, like you said, this is useful for all kinds of things like that. It's super useful for relative color systems where you're having a color system
that's deriving various shades from other colors. It's useful for
Borders that need to be slightly lighter or darker.
Yeah. So very super nice for all kinds of reasons. We love relative color syntax. Been waiting for a long time to be able to use this.
In all the browsers now. That was one of them where you couldn't really transpile it because it had to be Live in the browser, right?
Yeah, so, right, exactly. There was no good way to have this be dynamic with post CSS. Next one is some new CSS functions. We have round, rem, and mod. Now, round is a really interesting function. It allows you to round numbers. I don't know about you, Wes, but I find it odd when a function has an optional parameter that's the first parameter. Like, that makes no sense to me. 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 dot ceiling, seal, down, which is the same as math dot floor, nearest, which is the same as math dot round,
and 2, 0, which is the same as math dot 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, let's say you only want it to do it by .1 value or by .5, so you can give that value. Otherwise, it's, sometimes you get these numbers and when you round, it goes on forever. So if you want like nice, clean values, I could see that. I don't know, like, when that might be, maybe that would be helpful for when you're like working with like pixels. You know, sometimes you end up with like a half a pixel because the math just works out that way. You could probably solve that. I know I've battled half pixels many times in my life 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 gonna be nice.
Yeah, here's a, like, a demo showing the rounding interval being like 25 pixels. So to me, that, like, would say that you're rounding to the nearest value that's a 25 pixel increment?
Oh, yeah. Yeah, if you've got like a grid and you want to increment or decrement based on a specific grid value, you could do it by 25 pixels. It's kind of like a step as well. Maybe that's even, it would be even helpful in like step functions, animations, yeah.
Step makes way more sense to me.
And this is in 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, what?
Yeah, I never liked that. Make it the last one.
The last one. Yeah.
But then maybe the rounding interval also is optional.
I don't know if it is.
So 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? That's always bizarre when like the signature, there's so many functions where they add a new argument and then
Name parameters, yeah.
They have to like add a fourth parameter, or they switch it from being able to pass four parameters to a single object. That just happens over time.
Yeah. 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 a the leftover when the first parameter is divided by the second, similar to the remainder operator. Then how is that different than the rem, which is the remainder function? So here is the difference between these two, and this makes a moderate amount of sense to me. I'm not a math person, so for me, you know, I don't necessarily understand the use case
difference between here, but the difference is that mod, the result takes the sign of the divisor, as in like negative or positive. It behaves like Euclidean modulus. It's always positive if the second value is positive, where rem takes on the sign of the dividend, AKA the first value.
Oh.
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 or 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 editable plain text only. This one's actually kind of interesting. So with content editable plain text only, or let me show you here. If I add an attribute content editable to the body, I can obviously go ahead and type anything into any part of this document, right? 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, it sort of comes along with it, right? And you can make a bit of a mess with that if you're giving content editable to your users
because they're able to paste in literally anything, right? But content editable equals plain text
dash only will simply only allow you to edit plain text and if you were to copy some formatted text and paste it in, you, you don't get that. Where that is, is helpful is if you have like a, if you have a text area, right? A text area doesn't have any, any formatting in it and you want like the, the height of your text area to be automatic. We do have that field sizing auto 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 like listen for key up. It'll simply just grow as you're typing into the box. However, browser support for that sucks.
It's not in Firefox yet. I don't think it's in Safari yet. So this is kind of an interesting way where you could use a div as a input box. Make sure you do all the accessibility things to make that work, but it will simply just grow with you. And you could make a kind of a nice little whizzy 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 weird HTML. You know, wizzy wigs, you give somebody a wizzy wig and then before you know it, there's like a Microsoft Word Calibri inline span being pasted in. It's
it's a nightmare. So this is is very welcome. It's been in Chrome for a very, very long time, like 15 years or something, but it was finally standardized and added to all the browsers.
I love that. And content editable, I think underrated overall. Our next one here is align content, which allows you to center things, believe it or not, using one property, align hyphen content center. It centers things vertically inside of a block level context. So align content is something that we know from flex box. You're probably very used to it. Well, now on a div, you can just throw align hyphen content center and it puts the child in the dang center vertically, just like you have always wanted to.
Without grid, right?
Without grid, without flex, just with a normal display block level item. So
So good.
Hell, yeah.
I did a video on this when it first hit and I basically said, like, you are no longer allowed to make vertical centering jokes in CSS. We have so many things, right? We've had it in flex box for like 15 years, had it in grid for, I don't know, seven, eight, nine years since wherever grid was added. And now if you simply want to vertically center something in CSS on a block level element, align content center, that's all you need. And and you're you're off and running, right? And a lot of people ask, well, what about? What about the the other way? Well, you use, you can use text align center for that. You can use margins zero auto for that. Yeah, you are no longer able. To make CSS centering jokes.
Yes.
Skill issue if you still make those jokes.
Skill issue, cut it out.
Next one, Javier, starting style. We've talked about this on the past, but now it's it's supported in all the browsers. When DOM elements get added to the DOM, if you want to animate them in, you previously would have to add them to the DOM and then like opacity zero or display 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 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. I should be using them in this case, but.
It's all right. You're fine. They they still work. The old ones work. They they work this time.
So let me explain it again for anyone who's lost. You can set something on its in state by default. So translate X zero. And then you can say when it is added to the DOM, move it off the screen or scale it to zero or or make it red and then go to whatever or or make it opacity zero and then go to opacity one. And that is beautiful because now when DOM elements are added to the DOM, you can now transition them, animate them, whatever it is you want.
Yeah, it's it's just lovely. And then once we get allow discrete, it's even going to get better. So allow discrete is going to allow you to do this with the content visibility property that we talked about earlier on in this show. So.
Which, yeah, you could like, you could animate from display none to. Display block, right?
Yeah, or content visibility hidden to visible, yeah.
And same with the calc, calc size is going to allow us to animate from to height auto. That's going to be really nice. That again, that's, that's in most of the browsers, 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, hides it or does whatever you need to do there. So these are just, this is the way it should have worked. Yeah.
There's, there's like one Angular library and I, when you start typing your email address, like you type a W and it's like invalid. It's like, of course it's invalid. I'm not done yet, you know? And this user invalid will first wait for you to interact with the input. 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.
This is what you want. That's what anybody, I, it is such a bugaboo of mine anytime. Is that, are you? Yeah. Okay. I hope you're allowed to say that.
That's like a stroller.
Well, that's a Destiny's Child song from like, what does bugaboo mean?
In Ontario, we have this thing called Pokeroo. Randy, the editor, will put a picture of Pokeroo over top, which is a dinosaur from a children's show that was suspiciously maybe also the man. I feel like I've talked about this on the show before. But I always tell people, like, oh, you're such a Pokeroo. Like, you never see two people in the same room at the same time. Like, where are you going, Pokeroo? And then what's really happening is Pokeroo is the man on the show. But that is a Pokeroo. What is a Bugaboo? A Bugaboo, a girl or a guy who don't leave you alone. An overly annoying person that constantly calls or goes to your home uninvited.
Well, yeah, it comes from the, like, a term for like a boogeyman.
But I do know it from the Destiny's Child song. Okay, so that's it. That's all of the 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 where it's at, let us know. I'm very interested to hear about it. So now that's part of the show. We're getting into sick pics and shameless plugs. Okay, so I'm going to sick 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-C cable and the thing you're holding 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 in, 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 plugged the mail-to-mail into the 180. I plugged the 180 into my phone. And then I plugged the hard drive into this mail-to- 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 for it if I want to even do that. But these things are great, you know, nine, 10 bucks, whatever you can get some nice little uh 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, you know, Velcro it to the back of my computer.
Yeah, if you get every single angle, it's like plumbing pipe. You get a bunch of 45s, you could just
Look it and get it, move it right to the back of your, your thing. That'd be great.
Yeah, I'll take it.
All right, well, I'll, I'll sick pick 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, like a, there's, 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 like a TV. You want to put nice and flat against the thing or you've got like a, like we have a projector that the HDMI, it just hangs out the back.
And the kids always hit it and I just hate cables so much that are like in the way and get bumped and things get wrecked. So.
Yeah, especially like big, thick ones that you can't bend. They're just like hanging out, you know?
Or even just like the back of your monitor. Yeah, you, you try to like bend it back. So I always just go on AliExpress and just buy a bunch of these different HDMI ones. And there's also HDMI ribbon cables, which is a whole nother 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 flexi ribbon cable. Um, and then you clip them in from on, on either side. And you can, if, especially if you want like a really nice flush. Issue by coming out of a camera, something like us. We always have our cameras plugged in all the time. It's nice to to make that look a little nicer.
Yeah, mine's a mess. I have a right angle one, but it's like the L-shaped 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.
All right. Make sure you check us out on YouTube, youtube.com/syntaxfm. Leave us a review on iTunes, leave us a review on Spotify, wherever it is that you like to leave us a kind note, throw a comment on YouTube. We'd love to hear from you. And it helps the ever living algorithm recommend us more.
Absolutely. We will catch you in the next one.
Peace.
Page updated November 3, 2026 · transcript and summary are machine-generated