8 New CSS, JS and HTML Features You Should Know

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 wanna start with first?

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'm been looking through all this stuff. I'm like, wow. That's awesome. So first one, very simple. CSS relative color, which is you'd be able to take a specific color and then return the r, the g, the b, and the a, or the h d s, the l, and the a.

Now we have a short form for that, which is simply just I wanna take a color, and then I wanna make it semi opaque or 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 warp it to do, then you can make simply just make a color Sanity transparent.

That's crazy.

This is something that has been what? This was in, like, Bos. This was in Stylus. This was in all of them, and it was so nice when we got relative to there. Time. Yeah. To do this dynamically in the browser. People might say, why not just use Sass? Well, Sass has done a build time. We want something that's done at runtime here.

And my gosh, the browser support for this is actually pretty dang good. It's in everything. And 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 one fifty one, so as of 07/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 I'm running Safari 27. Not that I'm using it, but I'm running it. It all just got added. Like, in the last month or so, it's been added to every single browser, which I think because now that they have relative color implemented, it's just a simple syntax ad. I think it's pretty low lift. 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 century.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 century.io/syntax.

Again, we've been using this tool for a long time, and it totally rules. Alright.

Next one we have here is the CSS progress function. This is something you will often do with calc Wes 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 and these values can be anything. So it could be Yes. You, yeah, you could pass it like, I'm at two EMs, and I wanna start at eight pixels and go to a 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 are not of the same Sanity, which is so cool. So, here I have opacity progress. I'm at 300 or or one fifty, and I wanna know where I am. Extrapolate that up to between zero and a thousand. 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? Right. Yeah. Yeah. This will just do the math for you. This has 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.

That's so cool.

Yes. Yeah. It gives you a unitless value. So it you still if you do want it to be like a like a percent or e m or p x, then you still have to coerce it with your, with the calc.

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

So And the the reason why I'm doing this is because, GECCO, which is the engine in Firefox, is intent to ship.

So all of the ones that I'm I like, where you get all of these, like, what's new in CSS JS 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. Yeah. I love that. And the next one here is a JavaScript one, which is promise dot 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 JS going to be native?

Yes. So if you have three or four promises, like, say, for example, you wanna fetch a podcast, you wanna fetch your users, you wanna fetch a bunch of posts, you wanna do that concurrently, or most people will think you wanna do that in pnpm. You know? Fetch them at the same time.

And if you want to have multiple promises fetched at the same time, you use promise dot all or promise dot all settled. Right? Yeah. 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 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 gonna just simply destructure those values straight on out.

Yeah. That rips. And it it just feels like a nice quality of life thing that will make your code read better. 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.

Yes.

Okay. Something, also here that it feels like

an HTML element that should have been added a long time ago or two HTML elements. Sure about this one. I'm curious to see what you think. And this one is just in prototyping stage.

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 what's the word that they use for, declaratively writing things that use the camera and the microphone, which Yeah. 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 it they are these things even useful without connecting them with JavaScript? I mean, they I like this. 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.mediadevices.getusermedia.

And that would then say, hey. Can I access your your webcam? Can I access your your microphone? And then they would say Wes. 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, etcetera.

This is a declarative way to do that, which I don't know. It doesn't make much sense to me because you still have to, like You say yeah. 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 you 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.

Yeah. Like, invokers or Yeah. Maybe this is gonna play on with the Invokers API Wes you could just click together a very basic Oh, yes.

Like, photo booth with without any any JavaScript.

Yeah. Yeah. I don't know. I'm not sure about this one, but it's just me out of it. Yeah. I thought at first, I thought I was like, oh, this is cool. And then you're like, why did this I don't know. Yeah. I Wes, you're kinda right. This next one here, which is the CSS attribute function or ATTR, 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. Could only use a ATCR with what, like, content? And now you can use it with anything, background, width, height, etcetera.

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. I'm curious if you'd be able to use value here, because value in HTML Mhmm. Is like like pnpm 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? Yeah. Right. Yeah. Can you use value yeah.

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 Mhmm. 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 to make make declarative work a lot easier, especially if you have, like, a library where you wanna 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. 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 Yeah. 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 are 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 an until every single possible use case, and that's, like, if Yeah. That's not the way to do it. Right? So tell us about sibling index and sibling count. Yeah. It 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 wanna evenly space them around in a circle and you wanna calculate the rotation value or the rotation angle of that item. So if you have four of them, it's gonna be zero, twenty five, fifty, seventy five. Right? But if you have five of them, then then that value changes. And 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, 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 Yes. Now we 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've 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 another 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, twenty six two? It's been in Safari for

almost a year, so we're in good shape now. Yes. Heck yes. Heck yes. Alright. 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. 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 gonna take a 100% width as as as much as it has. Right? But if you want that paragraph to just be as wide as it is, give especially with text wrapping, then you say width equals fit content, meaning that be as wide as the actual element. Now the problem is is that if you have an element that wraps some fit content, then that thing is still with a 100%. 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, maybe I should float this, and it's a nightmare. So now there is a property, max content sizing, shrink to fit.

And 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 run into it once.

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, fonts, 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? 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 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. 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 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 it was exactly the same on the top and the bottom, which I absolutely love. So, again, this has been in all the browsers except for Firefox, and now they are finally there JS an intent to prototype. So not just quite yet. But Yes. This has been in Chrome since February

2025.

So Yes.

That's before Opus 4.5 came out.

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

But Progressive enhancements. 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. I'll be using this one.

I think. Yes. Absolutely. Wes, thank you for putting together these demos. You're gonna make this page available for people who are audio listeners, who wanna see what you're talking about Oh, yeah. And give it a try.

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

Alright. Slap that bad boy up. Thank you so much for this, Wes. Alright. Thanks for tuning in. Peace.