Baseline 2025 Features web gained in 2025

The end of 2025 is here, and the browser gained so much cool stuff. We're gonna be talking about what we gained in 2025 for baseline on this episode of Syntax.

And and Baseline is this idea that you aim to show what features are usable today or or usable now. Not like, you know, you go to, can I use, and everyone's like, oh, but, like, Samsung Internet from fifteen years ago doesn't support this? And it's kinda hard to just glance at that and see if you can use it, whereas baseline will just tell you, like, newly available or, like, go for it, son. You Node? You can you can use this thing. So baseline twenty twenty five, these are features that were added to every they they may have been added previously, but these are features that you can use today because they are part of baseline twenty twenty five. They are in all browsers. Yes. And if you have to support Internet Explorer five

today or whatever,

this ain't for you. L in the comments for IE supporters. Is anyone I'm curious if anyone is still supporting IE at all. Oh, I can't imagine. I can't imagine. I'm sure there's some, like, weird, like, embedded devices that have to support, like, a eight year old version of Chrome or something odd like that, but not as common.

Yes. Not as common.

Alright. Let's get into it, Wes. What do you got for me? Yeah. So there is 24

new APIs. We'll link up the the actual list of them. Some of them Node interesting at all, and some of them are are pretty exciting. So we're gonna explain what they are. So first one is same document view transitions. So view transitions in CSS allow you to essentially transition anything. Right? Like, we're we're used to putting a transition on something you can, like, transition the the width or the height or the Sanity. You know? But when you wanna transition something from one spot to another, it's it's not always doable. So I I built this right here, which is this is can you can you guess what this is right here, Scott?

Can I guess? Maybe what do you mean can I guess?

Can you like, what do you think what do you think this is built in right here? What do I think this is built in? I'm gonna say view transitions.

Yes. This is you Scott it right. So this is a For people who are not seeing, there's a bunch of squares jumbling around on screen Yeah. Of of Wes's video, just for the audio listeners so they're not wondering what the hell we're talking about. The hell is going on? So this is a grid of, I think, twenty

twenty or so video elements.

And and when I click on randomize, I'm essentially just randomizing their their place in the grid. The DOM. Yeah. In the DOM. Not even, the order value. Oh, no. It is. It's randomizing their value their order in the DOM. Right? Takes them out, shumples them, puts them back in the DOM. Normally, in the DOM, that would just be, like, an instant change over. But with view transitions, what you can do is you can give every single item a view transition name, and then you you call an API called document dot start view transition.

And what that will essentially do is it takes a snapshot of where it JS, and then in the callback of that code, you you apply some changes. In my case, you can add or remove classes. You can change the colors of things. In my case, I'm simply just shuffling the order of them in the DOM.

And then it will just tween them from where it was to where it needs to go, and you can put custom easings and curves and animations on them, all over the place. In in my case, I'm shuffling up and putting a kind of a fun transition on each of these elements. So the fact that you can now transition any element to any element, not just when you're changing pages, but when you're clicking a button or adding a class, is really cool, and now that's in every single browser.

Yeah. You know what? I will say, I use view transitions all the time, and I think oftentimes people don't even think about using them when they they could be the easiest solution to do any particular type of animation, especially when you have something that you have in one place. This has a secondary place, and you wanted to just tween between them like you just said. Like, I did an example. It was like a a card game. I made Euchre in the browser, and I had my cards that were in my hand. And when I played the card, I wanted to just go to where it went. And all I did was put it from one grid to another grid and just view transition between the two, zoop, and then it's there. It's a it's amazing. It's a it's an incredible API, and I think one that is still greatly underutilized. You see cool demos of it all the time. But Yeah. Now that now that we have same document view transitions, and those are view transitions for SPAs, single page applications, in all browsers. You can safely feel like you can use them. And, they're they're fantastic. You can do even, like I've used them to build all kinds of animations from, like, a hamburger menu slide out to anything, really. It it is.

If if you can't do it with CSS powerful. Just CSS, yeah, you can reach for view transitions, and that's usually my my way of trying to do things like that. I'm gonna pick an easy one right now, which is a small one, which is absolute value. There's now an absolute value function in CSS. That's right. CSS has got abs, folks.

Hit The Gym Wes 25, and it got some abs. It got a six pack. And they could do that with the Bos function, which, again, it does exactly what you would expect it to if you have done any kind of absolute valuing in math or whatever, and it makes the value always positive. For me, this is one of those ones that, like, it's put on my nice to have list, and it's also put on my, when I need it, I'll need it.

But I haven't had a use for it just yet. I am very I've been doing a lot with calculations in CSS lately. I have a lot of calculations.

And I know the time where absolute value is going to be required will pop up, and I'm gonna be like, oh, perfect. I got this now. It's usually people that are doing, like, crazy

animations Yep. Easing curves.

You're doing very complicated calculations where you need the value to always be positive, that's when you're you're gonna reach for it. So I certainly think as as CSS animations,

as calcs get more complex, you're gonna be seeing this a lot more. Yeah. And maybe that's super related to absolute value, but I've been doing a lot of math with CSS lately. In fact, I just did this demo, which is a color picker, and I wanted to do it using only CSS. And it's this really neat, like, CSS blob of colors that when you Vercel, and it's using no JavaScript at all. It's using, checkboxes and elements to grab, the the color the current color of the checkbox using, you know, parent selectors or whatever. Either way, there's a lot of move.

Thank you. Yeah. There's a lot of math involved in this, and I was trying to figure out, how do I get this value to be clamped, essentially. I don't even know if it's clamping because it's not necessarily.

But I want to, take a value and, interpolate it between two other values.

So that way I could I could reduce the amount of math in the positions that I had for everything.

And I was getting into some serious I'll try to find my most crazy math thing in here, because there was, like, one particular function that was like, oh, it wasn't even this one. Sorry. But either way, I I do think calc or absolute value could have come in handy with this because I was working with a lot of negative and positive values in here. But, man, the more and more I I work with, calc in CSS, the more you're just like, man, the possibilities

are infinite in this stuff, and and absolute value is just gonna help with that. I think once we get CSS functions as well, that's gonna open the door to, like, util libraries. Yes. That where you can just like, somebody will do the hard calcs under the hood, and then we'll just have these nice functions where you can pass it your values and get it back. Yeah. Custom funcs. If you're out here exploring with new APIs, your code is probably going to

go through some rocky times.

And you'll wanna have a tool like Century on your side to make sure that, well, your users are being well supported.

And, like, for instance, you toss in a new API on your site.

Somebody whose browser can't support it. Maybe it's erroring out. Maybe it's throwing some type type of error. We've we've had that situation on Syntax before. And you wanna make sure that you're aware of that. Who's hitting this error? Why are they hitting it? What browsers are supported in? And you can get AI,

to solve and help you debug those things today in Century, and it is awesome. It's pretty good. I I used to make the joke that, like, the only thing Century does doesn't do is fix the code for you, but now they do.

Yeah. So, they can't make that joke anymore.

It's it's awesome. Check it out. Century.io/syntax.

That'll get you two months for free. Next up, JSON modules, are now baseline. So what this allows you to do is simply just import JSON as if it were a JavaScript file into your your JavaScript. We've been able to do this with Node. Js Vercel. And then when we moved over to ESM, we didn't have that yet. You might be saying, like, that's that's dumb. Like, why do I need that? And I think in a lot of cases, people are either storing their JSON data as JS files so they can import them, or they're having to do, like, a fetch where they reach outside, fetch that data, and bring it back. And that's annoying because then you have to either have a top level await or you have to make sure that that is loaded.

Now you simply just import your JSON, and then you add a width type of JSON onto the end. Yes. Much needed.

Just another thing we don't need bundlers to help us with. Right? Exactly.

Yes. Alright. Next one is the popover API. Now the popover API was added to all browsers in 2024, believe it or Scott, and there was a polyfill that worked for it beforehand. So if you've ignored the popover API to this point, I think now is the time to learn the popover API because, the popover API allows you to do what it says to do.

You can have a popover that, basically, you can do so declaratively without any JavaScript target on a button, you have the popover that has the ID, and then you have a popover attribute on that popover.

So that way, when you click the button, the popover pops over. There's some default styling. It sits on top of everything, and it works like what you'd expect people use this for tool tips, little dialogues, or toast menus, or those types of things.

There's a lot you can do with the pop over. I I would say if you're reaching for, like, a modal, you're probably gonna look for the dialogue element over the popover. But a lot of times, when you just want something to pop over, the popover Tooltip,

drop down nav, all kinds of interesting and we're also getting this a lot of this stuff, like, works together. Right? Like, popover dialogue, CSS anchor, and now we're getting the interest in Voker API, which will allow you to pop things over when somebody simply hovers over top, which is so good because now you now you can get, like, CSS only little tooltips on top of your your values when you simply hover.

Yep. And something that the popover API does that just simply position fixing fixing doesn't or positioning absoluting is that it puts it on the top layer, which is it it's essentially like what people use React portals for. It essentially takes things and sets it on a new layer, stacking layer on top of everything, meaning that our z index woes of popover stuff can go away because now you could just use the top layer API from popover. It pops over, sits on top of everything.

And with the anchor API, it allows you to actually position it where you want, which is so funny. This is the top layer API minus the anchor without anchor positioning, kind of a disaster. It's tough to work in. It's tough to position things. But with the anchor API Wes you can anchor it to something else, it JS, really next level API. Also, anchor positioning, though, not baseline yet. It is behind the flag in Firefox

still. So Firefox Twenty twenty six. That out yesterday. There's there's been a lot of movement in the Mozilla bug in the last couple days. So I There has been. I'm kinda, I'm kinda thinking that it's gonna come soon, but I've said that before and been disappointed. So I'm not not getting my hopes up yet. I am so Vercel for Frank. Firefox has had some movement on some APIs lately that I have been kind of surprised by. So Killing it.

Yeah. Next one we have is this one might not be interesting to you, but I'll explain why it's interesting to me. It's a base 64 to ESLint eight array. So what this means is that if you have been using, like, window dot a to b or b to a to encode and decode base 64, that's always been a bit of a weird one because you you look up the MDN for b to a, which is a a function for encoding and decoding, Bos 64. It says, like, this is deprecated. We're like, okay. But, like, why is everybody using it? And the replacement for that is using these new u n eight array APIs.

And I'll explain why this is good. Because if you have Bos 64 data, using those old APIs, it stores them as a string. And that's why, like, when Scott did the, like, try to crash the browser challenge, what's what did he go for? He went for a big ass Bos 64 image. Right? Oh, yeah. And that that's a lot for for the browser to to store and to decode and all of that. So this new one allows you to store base 64 data Scott as a string, but as a special array, which is a, u n eight array.

And there's a really neat I'll I'll link it up, blog post about this from BlobFolio, and he he kinda looked into it. And he says, storing the data as an array is is actually quite a bit bigger.

However, in in the dom, it's significantly smaller because instead of having, like, image source equals, and and any type of binary data can go into a an a u an array. Right? Where you probably see it most often in web development is, like, an image that's been Bos before encoded.

If you want to then display that as an image, not as a string, because, like, those things are massive and often it's it gets really chuggy to decode them, what you can do is you can use the, create object URL. Similar to if you've ever had a video stream and you wanna set it to a video tag, you'll often see that, like, blob URL where it links to, like, a unique ID. You can do that with images as well where you create a URL that points to a binary data, a blob.

What the benefit of that is is if you need to use it in multiple places, it's still pointing to one Scott, and it's also the DOM doesn't have to deal with this massive huge string. So, apparently, the blog post shows that it's overall better and faster for both the DOM rendering and for for painting.

So don't use next time you have to base 64 decode something, reach for this API.

Nice.

Yeah. I I didn't even notice that. Did not know. And it is funny because when you you preemptively called me wondering why it was important or why I should care, I was currently wondering why I should care. So thank you for doing that.

I'm gonna show you, the next one that actually was baseline twenty twenty four, but I went looking for it in baseline twenty twenty five and was shocked to see that it was baseline twenty twenty four because we got starting style last year, which was, the ability to declare CSS that is something before or, like, at the state at which it enters the DOM. So, therefore, you'd be able to then, animate from that state to its end state, allowing you to do all kinds of animations where things came into the DOM. In fact, this actually used to be and and maybe how some people still do it, how, like, React transition used to work Wes they would add a class or even Angular transitions. They would add a class to something with the initial with the starting style and then add another class and then remove that class. So they they the way they did classes to do animations was simply having a starting style class and then the ending

state style class. Like a like a millisecond later, you'd apply that second class, and then that gave you then an a to a b. Right? Because if you just apply styles to something right out of the gate, it's gonna be rendered with those styles. So you need an a to a b. You can't just go straight to b. So starting style will allow you to to give yourself a an a so that you can trend and and most likely, what is this used for? Like like, animating in a modal? Like, it it can Yeah. It can,

right, come up from the bottom? Yes. You can do all kinds of stuff with this, but I always felt like this API was underserved without this other API, allow discrete. Now allow discrete was the one that I did not realize also was in baseline 2024.

So you can put on a transition, let's say, display so you do a transition.

Display zero point three seconds, allow discrete.

Now anybody who's done CSS transitions will know that you cannot apply transitions to things like display, so to go from display none to display block. And many of these things like dialogue or popovers, they have display none on them. Right? So animating them when they come into the DOM even with starting style was not super effective.

But with this allow discrete, what it does is it actually applies the display property so that way it can it it it applies it early or later depending on animating in or out. That way, it will essentially be, display block and then allow you to, show in something or whatever the display visible display block, display wait.

Yes. Display none to display block. You can now transition to Bos or whatever it is, whatever the initial value is. So that way, you can do those transitions whether that is from translating or fading or whatever. Scale zero to scale one. Like, literally anything you could figure out. I I have in my on my site here, and I'll link this up, is a demo that shows how to do a hamburger sliding menu using popover starting style and allow, allow discreet to do a full animating, animating out popover hamburger menu while it leaves the DOM. It's not just simply that this thing is animating on and off. It's actually entering and leaving the DOM. And you can use it again for all kinds of other things like that. You can use it to animate accordions.

You can use it to Sanity, you can use it to do dialogues or drawers. So, man, it JS, it is a really, really cool API that allows you to do just an endless amount of stuff. Like, I have essentially a dialogue that acts as if it is a swipe up dialogue or a swipe up drawer,

animation using only CSS. It's incorrect. You know why I think you're confused JS because I'm just looking at can I use for this? And allow discrete was only I think it landed in Safari in September 2024, so kinda near the end of the year. However, the specifically display none to display block transition, that is not in Firefox yet. Still? So yeah. But it's not the end of the world because you know what happens when you don't support it? It just doesn't transition. You know? Like, it's not gonna break your app. It's simply just going to not fade in. It will just show up immediately.

So that makes me wonder why they would add allow discrete to Firefox and not

I I think it was allow discrete was added in 2014 to Chrome.

Yeah. Right? But then the the ability to transition pnpm Yeah.

The transition behavior was only added recently in all these browsers.

So that is really surprising. But I do love, APIs like this, like view transitions. When it didn't work, it just, changed the page like normal. But then people who are in browsers that have full set of features would then be able to get that transition.

And Progressive enhancement, baby. Users. Yes. We love progressive enhancement.

That's always great when you have to do it when you can get progressive enhancement without having to Yeah. Just sacrifice or rewrite a massive amount of code. So either way, you can use starting style on a lot of discreet today if you wanna sacrifice

some animations on Firefox. Next up, I have promise dot tries. It's a very simple API method that allows you to take synchronous methods and use them in a way in which they were a promise. So this problem comes about where if you're using multiple methods that are all promise Bos, if your whole API is promise based, it's so beautiful because you can you can chain them together. You can add a catch on the end. You can use promise.all and get all the results at once. You can use promise.all settled. This is all beautiful until there's one API, which is, like, synchronous, and it doesn't have a promise based API. You know? Like, at the very basic, like, a confirm.

Yes. You know? If a a confirm or, like, f s dot write file sync. A lot of the AI loves using the synchronous versions of the file system.

Any of those APIs, if they were to throw an error, you can't use them in the same beautiful chaining promise way that I was just talking about. So now promise dot try will allow you to just wrap a non promise based function or method, and then it will if it throws, it will it will catch it in the dot catch. If it returns a value, it will return it in your promise dot all settled. So you can use any API as if it were a promise or not. So it's really nice. Love that.

The last one I have for you is content visibility. Now content visibility is an interesting API, and it's one of those APIs that when you first hear about it, you're like, oh, this would be, like, good to make the whole website out of the black box type of thing. Right? Yeah. If if you you capture you make the whole plan out of the black box because it's so powerful. Whatever. It's so strong. No. But the what this API allows you to do is control the rendering of elements in a way that, essentially pauses the rendering of an item. So it preserves its rendering Scott, where if you display none, it has to rerender when it comes back and it removes it from the DOM.

Visibility hidden keeps it in the DOM, but is constantly still rendering it. It's just visibility hidden.

Where this, if you do content visibility hidden, what it does is it doesn't render.

It hides the element, but it preserves its rendering state. So that way, if you were to toggle it back, then it's preserved that rendering state, and then it updates the rendering state, after you toggle it back. The the way that I find this API to be the most interesting, I will say, is with content visibility auto. And what that does is it basically has things hidden when they Yarn off screen.

In that way, it does the initial load, and then it then renders the things that are off screen, which is really useful if you have sections of big things that are rendering off screen.

Like, a lot of times people reach for sometimes virtual lists virtualized ESLint for this type of thing.

But this might be something that you could use if you're having a performance impact of rendering because you're rendering a lot of big things or a lot of things off screen. And, content visibility auto on the things off screen will then allow you to delay that. But you do have to be careful with it. It can cause layout shift.

It feels like at first glance, you're like, oh, I'll just put every single thing that's off screen content visibility auto.

But I think you wanna be more surgical with it. I think you want to test with it. I want,

you want to show that where I added it to a whole bunch of stuff, and it started to chug. Or I had it on a website, and it was faster. And then they changed something, and it started getting chuggy. And then the the way I fixed it was I simply removed it, which is great. Like, ideally, the browser will figure out these things for you, but there are some cases where you'll have to you know better, and you can explicitly step in and apply that. It's it's like will change

Wes Yeah. It's a a feature that can help if you know what you're doing with it and you test to make sure. But just a simply yellow applying it to everything is probably not the right call. But when it does work, like, there's a kind of a use case on Facebook.

It says Facebook engineers observed up to 250 improvement in navigation when, times when going back to previously cached views.

Being able to, like, have that control in the right circumstance, I think, can help. So whether that is content visibility hidden or auto, it's a cool API to learn.

Alright. I think that is that it? That's all I have. Peace.

One of my thumbnail ideas, because CSS got absolute value, was to have CSS having abs.

It's ridiculous. It's a great idea.