1033: 8 New CSS, JS and HTML Features You Should Know

Scott and Wes run through eight new CSS, JS, and HTML features landing in browsers; including the relative alpha() color function, the progress() function for calculating values between units, Promise.allKeyed(), and native camera and microphone elements. They also get into an upgraded attr(), shrink-to-fit containers, and text-box-trim for finally killing that annoying extra space above your text. Show Notes 00:00 Welcome to Syntax! Wes’s Demo Site 00:22 CSS Alpha() Relative Color Function Google Groups 02:25 Brought to you by Sentry.io 02:48 CSS CSS Progress() Function: Calculate Values Between Units 05:09 Promise.allKeyed(): Object-Based Promise Resolution 06:55 Camera and Microphone HTML Elements 09:24 Advanced CSS Attr() Function: Props for CSS 11:25 CSS Sibling-Index() and Sibling-Count() Functions 13:56 CSS Shrink-to-Fit Container 15:36 CSS Text-Box-Trim and Text-Box-Edge Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today, we've got eight amazing new CSS, HTML, and JavaScript APIs that you need to know about. Wes has put together eight new demos to showcase these things. And let me tell you, there's some cool stuff in here that I didn't even know about. So Wes, I'm so stoked to see some of these things. Which one do you want to start with first?

• 0:22Wes Bos?

  Yes, let's get into the CSS alpha being added to relative color. I didn't even know that this was this was coming. I think with a lot of these, we've been so obsessed with AI for the last six months. There's been so much that's been added to CSS, HTML, JavaScript, that I've been looking through all this stuff. I'm like, wow, that's awesome. So first one, very simple CSS relative color, which is you be able to take a specific color and then return the R, the G, the B, and the A, or the H, the S, the L, and the A. Now we have a short form for that, which is simply just, I want to take a color, and then I want to

• 1:03Wes Bos?

  make it semi opaque, or have transparency, right? So this is simply just CSS background alpha, you give it the color. So from you, whether you pass it a hex, HSL, whatever, and then forward slash the percentage value that you want it to do, then you can make, simply just make a color semi transparent.

• 1:23Scott Tolinski?

  That's crazy. This is something that has been, what, this was in like SAS, this was in Silas, this was in all of them. And it was so nice when we got relative color.

• 1:31Wes Bos?

  Longest time.

• 1:32Scott Tolinski?

  Yes, to do this dynamically in the browser. People might say, why not just use SAS? Well, SAS has done it build time. We want something that's done it runtime here. And my gosh, the browser support for this is actually pretty dang good. It's in everything. And I mean, it's in Safari technology preview, but it's in Firefox in the nightly build currently, which means it'll be here soon. It's been in Chrome since version 151. So as of July 27, 2026, and it will be in Safari 27. So my gosh, that means I have it on my computer. Yeah, I'm running, I'm running Safari 27. Not that I'm using it, but I'm running it.

• 2:12Wes Bos?

  It all just got added, like, in the last month or so, it's been added to every single browser, which I think is because now that they have relative color implemented, it's just a simple syntax add. I think it's pretty low lift.

• 2:24Scott Tolinski?

  I don't think I knew that this was happening. So sick. 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.

• 2:51Wes Bos?

  Next one we have here is the CSS progress function. This is something you will often do with calc, where you have a starting value and an ending value, and then you have your own value, and you want to know where in the middle of that is this thing, right? And what this progress function will allow you to do is you pass it where you're at. So and these values can be anything. So it could be, you could pass it like, I'm at two EMs, and I want to start at eight pixels and go to 100%. Like, that's, that's the beautiful part of it is that you can say, where am I in between these two values, even if they

• 3:31Wes Bos?

  are not of the same unit, which is so cool. So here I have opacity progress. I'm at 300 or 150. And I want to know where I am, extrapolate that up to between 0 and 1000. And that's not hard to do with a CSS calc. But when you start getting into these things where you're like, where am I at in between 20 pixels and 400% width, you know?

• 3:57Scott Tolinski?

  Right. Yeah.

• 3:58Wes Bos?

  This will just do the math for you. This is nothing to do with the CSS or the HTML progress element, which I initially thought it was. It is simply just, how far am I in between these two values?

• 4:10Scott Tolinski?

  That's so cool.

• 4:12Wes Bos?

  Yes. It gives you a unitless value. So it, you still have, if you do want it to be like a, like a percent or EM or PX, then you still have to coerce it with your, with the calc.

• 4:24Scott Tolinski?

  Yeah, cool. I had no idea about this one either. And it seems like this is available in everything except for Firefox. So

• 4:32Wes Bos?

  The reason why I'm doing this is because Gecko, which is the engine in Firefox, is intent to ship. So all of the ones that I'm, like, where you get all of these, like, what's new in CSS is you can look at the intent posts on the Google Groups of intent. And basically, the people who work on these browsers will say, I intend to ship this. I intend to turn this on in all the browsers. I, we intend to prototype this specific feature. And it's kind of a cool way to see, especially a lot of these are, oh, wow, this feature is finally coming to Firefox. Now we can start using it.

• 5:09Scott Tolinski?

  Yeah, I love that. And the next one here is a JavaScript one, which is promise all keyed. We actually talked about this recently on a syntax live. And this is something that you said you've been doing for many years with libraries and stuff, but now it is going to be native?

• 5:27Wes Bos?

  Yes. So if you have three or four promises, like, say, for example, you want to fetch a podcast, you want to fetch your users, you want to fetch a bunch of posts, you want to do that concurrently, or most people will think you want to do that in parallel, you know, fetch them at the same time. And if you want to have multiple promises fetched at the same time, you use promise all or promise all settled, right?

• 5:51Scott Tolinski?

  Yeah.

• 5:51Wes Bos?

  And the problem with that is that those only take arrays, meaning that the order at which they come back is, is important. So you have to do this like weird loop over the results and use the index of the value. This, you simply just make an, you make an object. And then instead of the properties on that object can be promises. So fetch user, fetch posts, and then you can just await that object. And it will know that there are keys in that object that need to wait to be resolved. And then once it is done, it'll return that entire object with the resolved keys. Or you can, a lot of people are going to just simply destructure those values straight on out.

• 6:35Scott Tolinski?

  Yeah, that rips. And it just feels like a nice quality of life thing that will make your code read better.

• 6:40Wes Bos?

  It's not anything you couldn't do before. Lots of utilities to do this type of thing. But like, we're at a point now where like, yeah, we can, we can really make the JavaScript language itself have some really nice APIs. A lot of people are like, oh, why don't we just use a library for that? I don't want a library for this. This is something I do all the time.

• 6:57Scott Tolinski?

  Yes. Okay. Something also here that it feels like an HTML element that should have been added a long time ago, or to HTML.

• 7:06Wes Bos?

  I'm not sure about this one. I'm curious to see what you think. And this one is just in prototyping stage.

• 7:12Scott Tolinski?

  Okay. Well, if you're asking me, it does feel like, so this is to say, this is the camera and the microphone HTML elements. For me, it feels like a nice way of, what's the word that they use for declaratively writing things that use the camera and the microphone, which, for some reason, because they are physical objects, they have like this, like, that feels like they deserve to be represented in that way. But they, are these things even useful without connecting them with JavaScript? I mean, I like this.

• 7:49Wes Bos?

  Yeah. You have, if you want to access somebody's camera or microphone, there are new elements. I believe there's also a media element, which is a little further ahead than this. And it will simply just request access to those things. And typically, what you'd have to do is you'd have to programmatically do it, like navigator.media devices dot get user media. And that would then say, hey, can I access your webcam? Can I access your, your microphone? And then they would say, yes, you would get the stream. And then you take that stream, and then you put it into whatever you want. You display it on a video element, you start recording it with a media recorder, etc. This is a declarative

• 8:32Wes Bos?

  way to do that, which I don't know, it doesn't make much sense to me, because you still have to like, once you have that track, then you still have to listen for the events of like, someone gave you access to the camera. And then You still have to use regular JavaScript. So like, I don't, I don't see the benefit of this unless like so much of the recent HTML that we've gotten are trying to do things declaratively without needing JavaScript.

• 9:02Scott Tolinski?

  Yeah, like Invokers or

• 9:04Wes Bos?

  Yeah, maybe this is gonna play on with the Invokers API where you could just click together a very basic

• 9:10Scott Tolinski?

  Oh, yeah.

• 9:11Wes Bos?

  Like photo booth without any JavaScript. Yeah, I don't know. I'm not sure about this one, but

• 9:19Scott Tolinski?

  I think you've talked me out of it. Yeah, I thought at first I was like, oh, this is cool. And then you're like, why did this? And yeah, I guess kind of right. This next one here, which is the CSS attribute function or ATR. Now, this function has been around in the web for a billion years. This, this function was back when the dinosaurs were roaming the earth. They were writing the CSS attribute function. But what's changed in this modern implementation of the attribute function is that you can actually use the values in a like a real way, kind of turning this into almost like props for CSS, like directly in the browser.

• 9:57Wes Bos?

  Previously, you could only use ATR with what, like content? And now you can use it with anything, background, width, height, et cetera.

• 10:05Scott Tolinski?

  Yeah, now you could pass this stuff directly into your CSS. Basically, you could set a property on a div and have that act as like a prop and and access that value directly in your CSS. It's sick.

• 10:20Wes Bos?

  I'm curious if you'd be able to use value here because value in HTML is like, like input value, like let's say you have a range. But like, does that update when the JavaScript value updates as you like scroll it? I'm not quite sure. It would be really nice if you could, because then you could just take the, you could pipe that into the progress function we, we talked about earlier, right?

• 10:43Scott Tolinski?

  Yeah, right. Yeah. Can I use value? Yeah.

• 10:47Wes Bos?

  This has been in everything for quite a while, except for Firefox. And like now we're finally in a spot where it's in intent to ship in Gecko. So it's one of those things where you can just finally use it. And this is again, this is make, make declarative work a lot easier, especially if you have like a library where you want to pass in things like button, data dash size, small, medium, large, right? Any of these like modifiers that you're used to passing in to each of them. Now you can simply just pass them as attributes, likely data dash attributes, though it doesn't, it's not entirely necessary to have the data dash on it.

• 11:26Scott Tolinski?

  Yes. This next one here is CSS sibling index function and the sibling count function. If you've ever watched any of our CSS battles on this channel, you've seen us use these functions in your option. So what these do, they give you the current index of an item or the count of how many items there are that are siblings. And the only way you could do this type of work where you don't know how many items are in a list or in our siblings is by counting them with JavaScript. That's the only way you could have done it before. Or you could just have nth child one, nth child two, nth child until every single possible use case. And that's like, that's not the way to do it, right?

• 12:10Scott Tolinski?

  So tell us about sibling index and sibling count.

• 12:13Wes Bos?

  Yeah, it's very simple. It tells you how many items are of a sibling. So here I have a circle and like the example where we've done it in our CSS is we did this navigation that was a 360 degree circle. And if you don't know if you have three items in there and you want to evenly space them around in a circle and you want to calculate the rotation value or the rotation angle of that item. So if you have four of them, it's going to be 0, 25, 50, 75, right? But if you have five of them, then, then that value changes. And the more you add, the, the less of an angle each one needs to be. So previously, yeah, you'd have to do like, okay, well, if the nth child five exists,

• 12:57Wes Bos?

  then there must be five, then, then do this. And you'd have to do every single instance of it. Or you would calculate them in JavaScript, like you said, and you'd pass that in via variable. So this just makes it so much easier and we've done many, many in all of our CSS challenges. I think we always reach for this one. And then you guys gave me a hard time for using it in my challenge because it didn't work in any of the other browsers, but now we

• 13:23Scott Tolinski?

  I gave you a hard time because very specifically I had, I had made two versions of my app, one without JavaScript and one with JavaScript to just showcase the need for that. And I could have used it. I knew about it, but I chose not to. And so you were like, trying to be like, mine's better. Yeah. So

• 13:41Wes Bos?

  Again, it's another one of these that Firefox has just shipped, meaning that it is now in all the browsers and you can go ahead and start to use it. And it's been in Safari since what 26, too? It's been in Safari for almost a year. So we're in good shape now.

• 13:56Scott Tolinski?

  Yes. Heck yes. Heck yes. All right. Next one here is shrink to fit container. I, I don't necessarily understand this one. I mean, I understand it, but I don't get the usage for it.

• 14:09Wes Bos?

  Yeah, this, I can tell you, I have run into this once before. So what, what this does is if you have some content and the width of that content you set to fit, fit content, the width of that element, like let's say we have a paragraph tag and, and it wraps around. Normally the width is going, it's a block element. So it's just going to take a hundred percent width as, as, as much as it has, right? But if you want that paragraph to just be as wide as it is, especially with text wrapping, then you say width equals fit content, meaning that be as wide as the actual element.

• 14:52Wes Bos?

  Now, the problem is, is that if you have an element that wraps some fit content, then that thing is still with a hundred percent, right? And then you can't do with the fit content on that as well. And it's a bit of a pain. And then you're getting into like, hmm, maybe I should float this and it's a nightmare. So now there is a property max content sizing shrink to fit. That will simply just allow you to suction the parent element to the size of some fit content, which again, maybe not something you're hitting every single day, but I can tell you, I've run into it once.

• 15:29Scott Tolinski?

  Yeah, yeah. I, I, once is enough, I guess. I maybe I will hit this and be like, oh, shrink to fit container. The next one here though, is something I do hit all the time, which is text box trim and text box edge. Text, man, thons, they are all wacky. And now you're, you're rendering them and too many times you're just trying to get your freaking button to look good, right?

• 15:52Wes Bos?

  Yep. So what this will do is it will allow you to trim like, basically if you think about like a line height one and like how that is calculated on some text, right? It, it will take into account the very highest of the capitals and the very lowest of, of the descenders, right? So if you have big capital A, a Y that goes down, then the, the height of that text, even if you don't use those letters, the height of that, that line or that text box is going to be huge. And where you can get into trouble, let me show you on the Mad CSS website that we did it. We have this admit one right here. And I put text box trim cap alphabetic.

• 16:35Wes Bos?

  So if I take that off, you can see that the bottom of this text here, and if you're audio listeners, imagine that the bottom of the text being larger than the top and it's not perfectly vertical, vertically centered. And you, this drives you mad because I don't have any letters here that are ascending or descending. It's all capital. So what I did is I said text box trim cap alphabetic, and that just trimmed it directly to all of the letters. And then that allowed me to put a padding on the top and the bottom. And it was exactly the same on the top and the bottom, which I absolutely love.

• 17:17Wes Bos?

  So again, this has been in all the browsers except for Firefox. And now they are finally, it's intent to prototype. So not just quite yet, but

• 17:29Scott Tolinski?

  Yes, this has been in Chrome since February 2025. So that's before Opus 4.5 came out.

• 17:39Wes Bos?

  That's how long ago this thing was, but I don't know. Man, I hope, I hope we get this soon because this is one of the things where you can add it already. You can start using it today and then in browsers that don't support it, it just looks a little bit weirder, but

• 17:55Scott Tolinski?

  Progressive enhancement.

• 17:56Wes Bos?

  Get it all. Yes, exactly. You can, you can decide where you would like to trim the top and the bottom of your, your pieces of text.

• 18:04Scott Tolinski?

  I'll be using this one.

• 18:06Wes Bos?

  Beautiful.

• 18:07Scott Tolinski?

  Yes, absolutely. Wes, thank you for putting together these demos. You're going to make this page available for people who are audio listeners who want to see what you're talking about and give it a try.

• 18:18Wes Bos?

  I'll slap it up. We'll put the link in the notes.

• 18:20Scott Tolinski?

  All right, slap that bad boy up. Thank you so much for this, Wes.

• 18:23Wes Bos?

  All right. Thanks for tuning in.

• 18:25Scott Tolinski?

  Peace.