900: 13 New CSS Features You Can Start Using Today  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 900: 13 New CSS Features You Can Start Using Today - Category: #podcasts - URL: https://share.snipd.com/episode/2ac869ad-69fe-4314-8718-c118ccd6f8ce ## Document Notes ## Highlights - **CSS Shape() Simplifies Complex Paths** - The new CSS shape() function offers a CSS-native way to create shapes instead of complicated SVG path strings. - It supports all CSS units and variables, making shapes more readable, dynamic, and responsive. Transcript: Scott Tolinski 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 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? Wes Bos 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 Ls 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. That's the kind of code that's behind a lot of these graphics editors as well, right? But writing that by by hand you imagine is like i've done it i've 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 value so it's very hard to do something that is responsive or or at least flexible or dynamic based on variables that's right and Scott Tolinski And i think for a basic shape if you're looking at this you'd see m50 comma 0 l61 comma 35 like you could reason about that it's like all right l would be like line uh 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, 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 way that it's written is way more readable. So the syntax is from 50 pics, 0 pics, comma, line two, 61 picks, 35 picks, comma, line two. And then you can even do curves really easily as well, like with curve two. Curves, arc, beziers. Without having to memorize that 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, 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 Wes Bos Use it like even like viewport units or something like that so i have a star container queries like you want something to clip cq units 25 of a apparent container like if you're drawing Like a like a receipt and you want to like clip like do some 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. Scott Tolinski 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. ([Time 0:01:43](https://share.snipd.com/snip/e1fb6793-6780-4f0f-b7f5-e5b7973ec435)) - **Zoom Property Scales With Layout** - The zoom CSS property scales an element and also allows the layout to reflow around the resized element. - This contrasts with scale(), which only visually scales without affecting layout. Transcript: Scott Tolinski 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 it what happens with this element is that it kind Wes Bos 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 being painted if you wanted multiple elements to zoom, Scott Tolinski 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 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 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 like a grid item you Wes Bos Know if you had like a grid of three items and you want to scale the the middle one up uh you can use scale and they'll overlap the left and the right um you can change the width and the height But then the contents inside of that don't get larger unless you use like a container query but with the zoom you could just literally make the entire thing larger and the elements on The left and the right will will reflow or resize themselves that i actually had no idea that this was a thing and yeah i i wonder if it's because every time I see Zoom, I think like, yeah, Like we 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 leftover thing from like IE6 days. Scott Tolinski I'm going to 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. ([Time 0:08:04](https://share.snipd.com/snip/36015f26-eef1-4e58-85d7-3805232cad07)) - **Consistent Scrollbar Styling Advice** - Use scrollbar-width and scrollbar-color CSS properties to style scrollbars consistently across browsers. - Apply scrollbar-gutter to prevent layout shifts when scrollbars appear or disappear. Transcript: Wes Bos 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 scrollbar CSS, you're able to, what is there? There's three parts to it? Scott Tolinski Yeah. Well, so the scrollbar itself has numerous parts to it, but this API for scrollbar styling is the scrollbar gutter, the scrollbar 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 a scroll bar gutter and scroll bar width. Now scroll bar width can be set to auto, thin, or none. So if you want to on any scroll container, scrollbar 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 it now needs to have a scroll bar. Well, that scroll bar is going to pop in and a little 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. ([Time 0:12:05](https://share.snipd.com/snip/7c4a047b-2e82-46b3-a6bb-17b698de9e86)) - **Use Text-Wrap Balance Today** - Use text-wrap: balance for better-looking text wrapping that balances line lengths. - Text-wrap: pretty (Chrome-only) avoids orphans by preventing single words on the last line, improving typography aesthetics. Transcript: Scott Tolinski Now, TextWrap, 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 once it's hitting the edges of its container. But with TextWrap Balance and TextWrap 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 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 Wes Bos As into yeah it tries to put similar amount of text on each of the lines um so if you've often had that like if you have like a heading text wrap balance is really handy for heading in fact I'm i'm considering putting text wrap balance on all in my reset on 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 TextRap 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 TextRap Balance is now in every Single browser. Scott Tolinski TextRap 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 TextRap 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 TextRap Wrap, but it's going to, I have a demo here where TextRap 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 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 typography is super important. ([Time 0:15:42](https://share.snipd.com/snip/94ee8bf8-f99c-4dfa-ba95-69ccfd893cdc)) - **Clear Media Query Range Syntax** - The new media query range syntax makes breakpoints much more readable, e.g., width <= 400px. - This enhances clarity over traditional and verbose media queries. Transcript: Scott Tolinski 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 and. Wes Bos You'd be 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. 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 the syntax side even better. Scott Tolinski 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 PostCSS, but the media query itself is what we have here, which is just something like width is less than 400 Pixels. That is so dang readable. Hey, if the width is less than 400 pixels, this applies. Oh, who would have thought? That's a nice way of doing it. So width is greater than x picks or whatever css value you might want in there so i i do really love this syntax and for me uh again as just somebody who never found the previous media query Syntax to be that readable i know i know that sounds stupid but uh this just is so much more readable to me is ([Time 0:19:46](https://share.snipd.com/snip/f8b5329c-3519-48d3-a8e4-133f6032c3fa)) - **Content-Visibility Boosts Performance** - The content-visibility property defers rendering of offscreen elements to improve performance. - Using content-visibility:auto can dramatically reduce initial render times but may cause layout shifts. Transcript: Scott Tolinski Now this is the, I'm going to have a demo here, but 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, 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 and showing yourself. Wes Bos A huge benefit to content visibility hidden is if you want to hide something, but still maintain that markup part of the like accessibility tree um 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 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 tan stack virtual, and It will render the, like the, the items that should be shown. Like, let's say you show 10 and then it will render like, like 10 or 20 before and 10 or 20 after it and that way as you scroll it's kind of just laying down track you know that like um wily coyote He's on a train he's laying down track as 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 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 for the reply on that. Yeah, 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 going to 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 schooling for free but free yeah totally like i don't Like like two years later i went back to i was like why is this website so laggy it was like brutal like so laggy to scroll and i took the content visibility off and I just like I just did regular HTML and CSS no no like figuring out when to 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, you should know Chrome 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 Scott Tolinski What uh with content visibility i'm wondering if because you're loaded when you're loading those things and you're scrolling you're not loading like one or two you're loading like 800 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 ([Time 0:24:04](https://share.snipd.com/snip/f6194ea6-6f6a-4b0b-9382-f57abe150448)) - **Content-Visibility Lag Example** - Wes Bos used content-visibility:auto for 826 user boxes on Uses.tech, improving rendering without virtual scrolling. - However, heavy use during fast scrolling caused lag due to frequent rendering and unerendering. Transcript: Wes Bos It will render the, like the, the items that should be shown. Like, let's say you show 10 and then it will render like, like 10 or 20 before and 10 or 20 after it and that way as you scroll it's kind of just laying down track you know that like um wily coyote He's on a train he's laying down track as 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 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 for the reply on that. Yeah, 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 going to 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 schooling for free but free yeah totally like i don't Like like two years later i went back to i was like why is this website so laggy it was like brutal like so laggy to scroll and i took the content visibility off and I just like I just did regular HTML and CSS no no like figuring out when to 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, you should know Chrome 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 Scott Tolinski What uh with content visibility i'm wondering if because you're loaded when you're loading those things and you're scrolling you're not loading like one or two you're loading like 800 once 26 right so like I would imagine if you were to group your incoming ones into groups of like 10 and then throwing content visibility on that group rather than on the individual Item okay I wonder if that would cause less rendering having to happen. Like you're rendering more in chunks rather than in each individual one. That's a hypothesis. I have no clue. There's also this, like you could maybe even debug this a little bit. There's an event. I have some JavaScript here on screen. And this has got to be the longest event name without... Content visibility auto state change. It has no camel case, nothing. There 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, which is interesting. And then every time it comes on. Because it's showing and hiding. Yep. Interesting. This is an interesting thing that you can use, and it does potentially have the possibility for layout shift. So there is another property here called contain intrinsic size, which allows you to specify the inline and block. I believe it's inline and block. It could just be X and Y. I didn't even think about that until right now it basically allows you to specify the dimensions of this thing where you could say all right the width is auto and the height is 300 pixels Wes Bos That way it's like preserving that space for when this does 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 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 Scott Tolinski 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 Wes Bos 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, Scott Tolinski It's doing that a ton of times. I bet if you put those into div wrappers, if that would even be possible, I'm sure it would. Wes Bos But as soon as I wrap it, now I'm goofing up my CSS grid because now I have, 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 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 Scott Tolinski 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 your initial rendering it's not it hasn't been Wes Bos Watch let me refresh wait how has it not been initially rendered are you are you doing any sort of virtualization nothing nothing literally 826 divs in a div on css grid look at this. Look how butter that is. And then we go ahead and add a content. So they've already been rendered, like, right? Every single one has been rendered. Now let's add it. Content ([Time 0:26:35](https://share.snipd.com/snip/65b51273-4a25-4524-b49c-0334b3f36047)) - **Text Emphasis for Annotations** - The text-emphasis CSS property decorates text with karaoke-style symbols for annotation. - It is mostly relevant for non-Latin languages and increases line height for clarity. Transcript: Wes Bos I didn't hear about it till you put this in here yeah no what the heck here text emphasis simply allows you to put like these little karaoke dots on top. And there's the options are filled, open, dot, circle, double circle, sesame. 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 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 Latin-based. But I guess it'd be helpful if you want to mark a whole bunch of text. And the 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. ([Time 0:35:13](https://share.snipd.com/snip/63ada26a-01d3-4d4c-b446-07b4c06f0c8d)) - **Relative Color Enables Dynamic Shades** - The relative color CSS functions let you extract and tweak color components (H, S, L, R, G, B) dynamically. - This enables easier color manipulation such as lightening or creating complementary colors using CSS variables. Transcript: Wes Bos Relative color. We've talked about this a million times on the podcast, but being able to take a color, whether it is an 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 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. Scott Tolinski We're using this on the syntax height. When you overlay on a button 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 0.35 to the lightness and then keeping the c and h values the was 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 uh color systems where you're having a color system that's deriving various Shades from other colors it's useful for like borders that need to be slightly lighter like lighter or darker yeah so very super nice for all kinds of reasons we love relative color syntax Been waiting for a long time to be able to use this in all the browsers now that was one of them where you couldn't really transpile it because it had to be live in the browser, right? Wes Bos Yeah. ([Time 0:37:06](https://share.snipd.com/snip/3423f2e3-b5a3-453d-8565-1017ca903181)) - **New CSS Math Functions Explained** - New CSS math functions round(), rem(), and mod() allow numeric rounding and modular arithmetic directly in CSS. - The mod function differs by always returning a positive remainder, useful for lattice-like calculations. Transcript: Scott Tolinski 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. 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 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 two zero, which is the same as math dot trunk. So this function, you would you could say round nearest comma the value you're rounding. And then the last argument here is the rounding interval. Wes, you know what that means? Wes Bos 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 0.1 value or by 0.5. So you can give that value. Otherwise, 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 to do that in css directly is going to Scott Tolinski Be nice yeah here's a um 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 Wes Bos Is that correct yeah if you've got like a grid and you want to increment or decrement based on a certain grid value you could do it by 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 Scott Tolinski Compatibility yeah it's in all the browsers um it's it's available in everything now and again this is neat i i do find it totally odd that you can omit the first argument and then it just Becomes the value and then the rounding interval. Like, yeah, I never liked that. Wes Bos Make it the last one. Yeah. Make all 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 was 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 the signature, there's so many functions where they add a new argument and then- Name 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. Scott Tolinski 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. ([Time 0:39:11](https://share.snipd.com/snip/449e8488-3a3b-4677-8e15-d6f014bd3874)) - **Use Contenteditable Plaintext Only** - Use contenteditable="plaintext-only" to restrict user input to plain text, preventing clipboard formatted HTML paste issues. - This is useful for building custom resizable text areas without messy formatting. Transcript: Wes Bos 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 this Document right however if i were to copy some text that has is rich text formatted like um 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, right? And you can make a bit of a mess with that if you're giving content edible to your users, because they're able to paste in literally anything, right? But content edible equals plain text dash only will simply only allow you to edit plain text. And if you were to copy some formatted text and paste it in, you 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 key up. It'll simply just grow as you're typing into the box. However, browser support for that sucks. It's not in Firefox yet. I don't think it's in Safari yet. So this is kind of an interesting way where you could use a div as a input box. Make sure you do all the accessibility things to make that work, but it will simply just grow with you. And you could make a kind of a nice little WYSIWYG for this as well, because someone can just simply click into any of the parts that they want, and you don't really have to worry about them Copy pasting or goofing up, adding any of your HTML. You know WYSIWYGs, you give somebody a WYSIWYG 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, but it was finally standardized and added to all the browsers. ([Time 0:44:19](https://share.snipd.com/snip/154a5dcc-bf75-4bd0-930b-1e34a111c03e)) - **Vertical Centering Made Easy** - The align-content CSS property can vertically center content inside block-level elements without flex or grid. - This simplifies vertical centering dramatically beyond earlier methods. Transcript: Scott Tolinski And content editable, 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 flex box you're probably very used to it well now on a div you can just throw a line hyphen content center and it puts the child in the dang Center vertically just like you have 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 Wes Bos 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 flexbox for like 15 years had 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 you're off and running, right? And a lot of people ask, well, what about the other way? Well, you can use text line center for that. You can use margin zero auto for that. Yeah, you are no longer able to make CSS centering jokes. ([Time 0:46:44](https://share.snipd.com/snip/f5fa4736-f320-4933-b6ec-51cf13eb272f)) - **Starting-Style Animates DOM Entry** - The starting-style CSS property enables smooth animations on elements as they are added to the DOM. - Combined with upcoming allowed-discrete, animations from display:none or content-visibility states become possible. Transcript: Wes Bos Style. 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, 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? Scott Tolinski Oh, yeah, you're right. I've always say this. Wes Bos Yeah, you're right. I should be using them in this case. It's all right. You're fine. They still work. The old ones work. 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 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 allowed discrete Scott Tolinski It's even going to get better so yeah allowed 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 Wes Bos 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 high 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. ([Time 0:48:17](https://share.snipd.com/snip/2e188be3-f0a1-4d6e-a6e5-55d228e293d0)) - **User-Valid Selectors Improve Form UX** - The user-valid and user-invalid pseudo-classes trigger only after user interaction, avoiding premature validation feedback. - This improves form UX by validating only after the user has typed and blurred inputs. Transcript: Scott Tolinski 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 the way it should have worked. Wes Bos There's like one Angular library, and 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. 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 uh is that are you yeah okay i hope Scott Tolinski You're allowed to say that's like a stroller well that's a destiny's child song from like what does bugaboo mean we in ontario we have this thing called pokaroo um randy the editor will Wes Bos Put a picture of pokaroo over top which is uh a dinosaur from a children's uh show that would 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 pokaroo. You never see two people in the same room at the same time. 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 guy who don't leave you alone. An overly annoying person that constantly calls or goes to your home uninvited. Scott Tolinski 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. ([Time 0:50:30](https://share.snipd.com/snip/d4d89d32-9df3-405d-8169-cb9fecd3a717))