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

**Scott Tolinski** (0:00)
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?

**Wes Bos** (0:23)
Yes, let's get into the CSS alpha being added to relative color. I didn't even know that 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 make it semi-opaque or have transparency, right? So this is simply just CSS background, alpha, you give it the color. So from, whether you pass it a hex, HSL, whatever, and then forward slash the percentage value that you want it to do, then you can simply just make a color semi-transparent.

**Scott Tolinski** (1:23)
That's crazy.
This is something that has been what? This was in like SAS, this was in Stylist, this was in all of them, and it was so nice when we got relative color.

**Wes Bos** (1:31)
For the longest time.

**Scott Tolinski** (1:32)
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 for 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 they'll be here soon. It's been in Chrome since version 151 So as of July 27th, 2026, and it will be in Safari 27 So my gosh, that means I have it on my computer. Yeah, I'm running on I'm running Safari 27 Not that I'm using it, but I'm running it.

**Wes Bos** (2:12)
It all just got added like in the last month or so. It's been added to every single browser, which I think it because now that they have relative color implemented, it's just a simple syntax ad. I think it's pretty low lift.

**Scott Tolinski** (2:24)
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 ad 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.

**Wes Bos** (2:49)
All right.
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. 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 a hundred percent. Like 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 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 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 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?

**Scott Tolinski** (4:10)
That's so cool.

**Wes Bos** (4:12)
Yeah, it gives you a unit list value. So if you do want it to be like a percent or EM or PX, then you still have to coerce it with the calc.