965: Baseline 2025 Features web gained in 2025

Scott and Wes break down the biggest web platform features that reached Baseline in 2025, separating the genuinely useful APIs from the niche and forgettable ones. From same-document view transitions and the Popover API to Promise.try, content-visibility, and modern CSS goodies, they share what’s actually ready to use today. Show Notes 00:00 Welcome to Syntax! 01:37 24 new web APIs that reached baseline in 2025. 01:49 Same-document view transitions for single-page applications. 05:28 abs() 08:22 Brought to you by Sentry.io. 09:20 JSON Module Scripts. 10:10 Popover API. 13:07 Base64 to UInt8Array. Better Binary Batter Mixing 16:11 @starting-style Scott’s A CSS Only Accordion with Scott’s Mobile Nav 17:39 allow-discrete 21:31 Promise.try 22:51 content-visibility 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?

  The end of 2025 is here and the browser gained so much cool stuff. We're going to be talking about what we gained in 2025 for baseline on this episode of Syntax. My name is Scott Tlitsky. I'm a developer from Denver. With me as always is Wes Boss. What's up Wes?

• 0:18Wes Bos?

  Hey, yeah. Baseline is like a project from Google and Google started it, but basically it's all the like the the web industry and baseline is this idea that you aim to show what features are usable today or usable now. Not like, you know, you go to can I use and everyone's like, oh, but like Samsung internet from 15 years ago doesn't support this. And it's kind of 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 know, you can, you can use this thing. So baseline 2025, these are features that were added to every, they may have been added previously, but these are features that you can use today because they are part of baseline 2025. They are in all browsers.

• 1:01Scott Tolinski?

  Yes. And if you have to support Internet Explorer 5 today or whatever, this ain't for you.

• 1:08Wes Bos?

  L in the comments for IE supporters. Is anyone, I'm curious if anyone is still supporting IE at all.

• 1:13Scott Tolinski?

  Oh, I can't imagine. I can't imagine.

• 1:16Wes Bos?

  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.

• 1:26Scott Tolinski?

  Yes, not as common.

• 1:34Scott Tolinski?

  All right, let's get into it Wes. What do you got for me?

• 1:37Wes Bos?

  Yeah, so there is 24 new APIs. We'll link up the, the actual list of them. Some of them not interesting at all and some of them are pretty exciting. So we're going to 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 and you can like transition the, the width or the height or the opacity, you know? But when you want to transition something from one spot to another, it's, it's not always doable. So I built this right here, which is, this is woo. Can you, can you guess what this is right here, Scott?

• 2:19Scott Tolinski?

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

• 2:23Wes Bos?

  Kenya, like, what do you think, what do you think this is built in right here?

• 2:26Scott Tolinski?

  What do I think this is built in? I'm gonna say view transitions.

• 2:30Wes Bos?

  Yes, this is, you got it right. So this is a grid-

• 2:34Scott Tolinski?

  For people who are not seeing, there's a bunch of squares jumbling around on screen-

• 2:38Wes Bos?

  Yeah.

• 2:38Scott Tolinski?

  Uh, of Wes's video. Uh, just for the audio listeners, so they're not wondering what the hell we're talking about.

• 2:44Wes Bos?

  What the hell's going on? So this is a grid of, I think, 20, 20 or so video elements. And, and when I click on randomize, I'm essentially just randomizing their, their place in the grid.

• 2:59Scott Tolinski?

  The DOM, yeah.

• 3:00Wes Bos?

  In the DOM, not even, um, the order value. Oh, no, it is. It's randomizing their value, their order in the DOM, right? Takes them out, shuffles 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 it an API called document dot start view transition. And what that will essentially do is it takes a snapshot of where it is. 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. Um, and then it will just tween them from where it was to where it needs to go.

• 3:44Wes Bos?

  And you can put custom easings and Bezier curves and animations on them, uh, all over the place. And 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.

• 4:09Scott Tolinski?

  Yeah. You know what? I will say, uh, 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 want it to just tween between them, like you've just said, like I did in the example- It was like a card game. I made Uger 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 amazing. It's an incredible API.

• 4:51Scott Tolinski?

  And I think one that is still greatly underutilized. You see cool demos of it all the time. But now that we have same document view transitions and there's your view transitions for Spas, single page applications in all browsers, you can safely feel like you can use them. And 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 is, if you can't do it with CSS, just CSS, yeah, you can reach for view transitions. And that's usually my way of trying to do things like that. I'm going to pick an easy one right now, which is a small one, which is absolute value.

• 5:33Scott Tolinski?

  There's now an absolute value function in CSS. That's right. CSS has got abs, folks. Hit the gym 2025 and it got some abs. It got a six pack. And they could do that with the ABS 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 of a lot of calculations. And I know the time where absolute value is going to be required will pop up.

• 6:16Scott Tolinski?

  And I'm going to be like, oh, perfect. I got this now.

• 6:19Wes Bos?

  It's usually people that are doing like crazy animations, easing curves. You're doing very complicated calculations where you need the value to always be positive. That's when you're going to reach for it. So I certainly think as CSS animations, as calc's get more complex, you're going to be seeing this a lot more.

• 6:40Scott Tolinski?

  Yeah, 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 select, 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

• 7:09Wes Bos?

  Genius move.

• 7:10Scott Tolinski?

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

• 7:52Scott Tolinski?

  But man, the more and more I work with calc in CSS, the more you're just like, man, the possibilities are infinite in this stuff. And absolute value is just going to help with that.

• 8:06Wes Bos?

  I think once we get CSS functions as well, that's going to open the door to like util libraries. That where you can just, like, somebody will do the hard calc's under the hood. And then we'll just have these nice functions where you can pass it your values and get it back.

• 8:21Scott Tolinski?

  Yeah, custom folks. If you're out here exploring with new APIs, your code is probably going to go through some rocky times. And you'll want to have a tool like Sentry 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's browser can't support it, maybe it's erroring out, maybe it's throwing some type of error. We've had that situation on syntax before. And you want to make sure that you're aware of that. Who's hitting this error? Why are they hitting it? What browsers have supported it? And you can get AI to solve and help you debug those things today in Sentry, and it is awesome.

• 9:01Wes Bos?

  Pretty good. I I used to make the joke that like, the only thing Sentry doesn't do is fix the code for you, but. Now the do. So they can't make that joke anymore. It's awesome. Check it out. Sentry.io forward slash 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 JavaScript. We've been able to do this with no JS forever. And then when we moved over to ESM, we didn't have that yet. You might be saying like, that's dumb. Like, why do I need that? And I think in a lot of cases, people are either storing their JSON data

• 9:44Wes Bos?

  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 of wait, or you have to make sure that that is loaded. Now you simply just import your JSON and then you add a with type of JSON on to the end.

• 10:02Scott Tolinski?

  Yes, much needed. Just another thing we don't need bundlers to help us with, right?

• 10:08Wes Bos?

  Exactly.

• 10:09Scott Tolinski?

  Yes. All right. Next one is the PopOver API. Now, the PopOver API was added to all browsers in 2024, believe it or not. 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 even, where you have a PopOver 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.

• 10:52Scott Tolinski?

  It sits on top of everything and it works like what you'd expect. People use this for tooltips, little dialogues, or toast menus, or those types of things. There's a lot you can do with the pop over. I would say if you're reaching for like a modal, you're probably gonna look for the dialogue element over the pop over. But a lot of times, when you just want something to pop over, uh, the pop over API.

• 11:14Wes Bos?

  A tooltip, uh, dropdown nav, um, all kinds of interesting. And we're also getting this, a lot of this stuff like works together, right? Like pop over dialogue, CSS anchor, and now we're getting the interest invoker API, which will allow you to pop things over when somebody simply hovers over top, which is so good. Cause now you, now you can get like CSS only little tooltips on top of your, your values when you simply hover.

• 11:43Scott Tolinski?

  Yeah. And something that the pop over 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'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 pop over stuff can go away because now you could just use the top layer API from pop over. 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,

• 12:24Scott Tolinski?

  without anchor positioning, kind of a disaster. It's tough to work in. It's tough to position things, but with the anchor API where you can anchor it to something else, it is a really next level API. Also, anchor positioning though, not baseline yet. It is behind a flag in Firefox still. So 2026.

• 12:42Wes Bos?

  Firefox, I was checking that out yesterday. There's, there's been a lot of movement in the Mozilla bug in the last couple of days. So I'm

• 12:47Scott Tolinski?

  There has been.

• 12:48Wes Bos?

  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 excited for anchor.

• 12:58Scott Tolinski?

  Firefox has had some movement on some APIs lately that I have been kind of surprised by. So.

• 13:06Wes Bos?

  Killing it.

• 13:07Scott Tolinski?

  Yeah.

• 13:07Wes Bos?

  Next one we have is, this one might not be interesting to you, but I'll explain why it's interesting to me as a base64 to Uint8 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 base64, that's always been a bit of a weird one because you look up the MDN for B to A, which is a function for encoding and decoding base64. It says like, this is deprecated and we're like, okay, but like, why is everybody using it? And the replacement for that is using these newDarwin8array APIs.

• 13:48Wes Bos?

  And I'll explain why this is good because if you have base64 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 base64 image, right?

• 14:06Scott Tolinski?

  Oh, yeah.

• 14:07Wes Bos?

  And 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 base64 data, not as a string, but as a special array, which is aDarwin8array. And there's a really neat, I'll, I'll link it up, blog post about this from Blobfolio. And he, he kind of 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, in a, in an array, right?

• 14:50Wes Bos?

  Where you probably see it most often in web development is like an image that's been base64 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 a create object URL, similar to if you've ever had a video stream and you want to say, 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 spot.

• 15:34Wes Bos?

  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 DOM rendering and for for painting. So don't use. Next time you have to base 64 decode something, reach for this API.

• 15:53Scott Tolinski?

  Nice. Yeah, 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.

• 16:11Scott Tolinski?

  I'm going to show you the next one that actually was baseline 2024, but I went looking for it in baseline 2025 and was shocked to see that it was baseline 2024 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 it may be how some people still do it, how like React Transition used to work where they would add a class or even Angular Transitions. They would add a class to something with the initial, with the starting style

• 16:56Scott Tolinski?

  and then add another class and then remove that class. So they, the way they did classes to do animations was simply having a starting style class and then the ending state style.

• 17:08Wes Bos?

  Like, 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 going to 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 turn. And most likely, what is this used for? Like, like animating in a modal, like it can, it can.

• 17:35Wes Bos?

  Right, come up from the bottom?

• 17:37Scott Tolinski?

  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, uh, display, so you do a transition. Display 0.3 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.

• 18:19Scott Tolinski?

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

• 18:45Wes Bos?

  Display none to display block.

• 18:47Scott Tolinski?

  Display none to display block 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.

• 18:56Wes Bos?

  Scale zero to scale one, like literally anything.

• 19:00Scott Tolinski?

  So here 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, uh, allow discrete 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 animate, uh, you can use it to do dialogues or drawers, so, um, uh, man, it is, uh, it is a really, really cool API that allows you to just.

• 19:45Scott Tolinski?

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

• 19:58Wes Bos?

  You know why I think you're confused is 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 kind of near the end of the year. However, the specifically display none to display block transition, that is not in Firefox yet.

• 20:18Scott Tolinski?

  Still?

• 20:19Wes Bos?

  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 going to break your app. It's simply just going to not fade in. It will just show up immediately.

• 20:32Scott Tolinski?

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

• 20:38Wes Bos?

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

• 20:44Scott Tolinski?

  Yeah.

• 20:44Wes Bos?

  Right? But then the, the ability to transition it.

• 20:48Scott Tolinski?

  Yeah.

• 20:50Wes Bos?

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

• 20:55Scott Tolinski?

  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 a full set of features would then be able to get that transition. And you know, Firefox 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

• 21:21Wes Bos?

  Yeah.

• 21:21Scott Tolinski?

  Just sacrifice or rewrite a massive amount of code. So either way, you can use starting style and allow discrete today. If you want to sacrifice some animations on Firefox.

• 21:30Wes Bos?

  Next up, I have promise dot tries, 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 based, 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 dot all and get all the results at once. You can use promise to 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.

• 22:11Wes Bos?

  You know, if a confirm or like FS dot write file sync, a lot of 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 that try will allow you to just wrap a non-promised 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 to all settled. So you can use any API as if it were a promise or not. So it's really nice.

• 22:50Scott Tolinski?

  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, ooh, this would be like good to make the whole website out of the black box type of thing, right?

• 23:07Wes Bos?

  Yeah.

• 23:09Scott Tolinski?

  You make the whole planet 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 state where if you display none, it has to re-render 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

• 23:54Scott Tolinski?

  to toggle it back, then it's preserve 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 are off screen. And 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 lists for this type of thing. But this might be something that you could use if you're having a performance impact of rendering,

• 24:37Scott Tolinski?

  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 want to be more surgical with it. I think you want to test with it. I want.

• 25:03Wes Bos?

  I had an issue 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 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.

• 25:26Scott Tolinski?

  It's like will change where it's 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 millisecond 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, the cool API to learn.

• 26:05Wes Bos?

  Uh, all right. I think that's, is that it?

• 26:07Scott Tolinski?

  That's all I have.

• 26:09Wes Bos?

  Peace.

• 26:13Scott Tolinski?

  One of my thumbnail ideas. Because CSS got absolute value. Was to have CSS having abs.

• 26:24Scott Tolinski?

  It's ridiculous.

• 26:25Wes Bos?

  It's a great idea.