Baseline 2025 Features Web Gained in 2025  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 Tolinsky. I'm a developer from Denver. With me as always is Wes Boss. What's up, Wes? >> Hey. Yeah, Baseline is like a project from Google and Google started it, but basically it's all the like the the web industry. Um 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 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 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. >> Yes. And if you have to support Internet Explorer 5 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. >> 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 8-year-old version of Chrome or something odd like that, but not as common. >> Yeah, it's not as common. >> All right, 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 not interesting at all and some of them are 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. You can like transition the the width or the height or the opacity, you know? Um but when you want to 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 Woo. Can you Can you guess what this is right here, Scott? >> Uh, 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 going to say view transitions. >> Yes, this is You got it right. So, this is >> for people who are not seeing, there's a bunch of squares jumbling around on screen uh of of Wes's video. uh just for the audio listeners so they're not wondering what the hell we're talking about, >> 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, >> the DOM >> in the DOM. Not even um the order value. Oh, no, it is. It's randomizing their value, their order in the DOM, right? It 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 an API called document.st 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. And you can put custom easings and bezier curves and animations on them uh 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? Uh, I use view transitions all the time and I think often times 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 yuger 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 it's amazing. It's a it's an incredible API and I think one that is still greatly underutilized. You'll see cool demos of it all the time. But um now that now that we have same document view transitions and these are view transitions for SPAS single page applications um in all browsers you can safely feel like you can use them and I 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. And it it is if if you can't do it with CSS, 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 going to 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. Uh it hit the gym 2025 and it got some abs. It got a six-pack. Uh, and it 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. Uh, 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 and I'm going to be like oh perfect I got this now >> it's usually people that are doing like crazy animations easing curves uh you're doing very complicated calculations where you need the value to always be positive that's when you're you're going to reach for it so I certainly certainly think as as CSS animations um as calcs get more complex, you're going to 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 select and it's using no JavaScript at all. using um checkboxes and elements to grab uh the the color the current color of the checkbox using you know parent selectors or whatever. Either way, there's a lot >> 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 cuz it's not necessarily, but I want to uh take a value and uh interpolate it between two other values. Uh 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. Uh 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 um 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. I think once we get CSS functions as well, that's going to open the door to like util libraries um 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 funks. 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. Uh somebody whose browser can't support it, maybe it's erroring out, maybe it's throwing some type of error. We've 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 that supported it? And you can get AI uh to solve and help you debug those things today in Sentry. And it is awesome. >> It's 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 they do. >> So, uh they can't make that joke anymore. Uh it's it's awesome. Check it out. century.iosax. That'll get you two months for free. Next up, JSON modules um 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 Noode.js forever. 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? Um, 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. Uh much needed. Uh just another thing we don't need bundlers to help us with. Right. >> Exactly. 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 u the popover API allows you to do what it says to do. uh you can have a popover that uh 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. It sits on top of everything and it works like what you'd expect people uses for tool tips, little dialogues or toast menus or those types of things. There's a lot you can do with the popover. I would say if you're reaching for like a modal, you're probably going to look for the dialogue element over the popover, but a lot of times when you just want something to pop over, uh the popover >> tool tip, uh drop down nav, um 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 invoker 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 tool tips on top of your your values when you simply hover. >> Yeah. 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 where you can anchor it to something else, it is uh really next level API. Also, anchor positioning though not baseline yet. It is behind a flag in Firefox still. So, checking that out yesterday. There's there's been a lot of movement in the Mozilla bug in the last couple days. So, I'm >> there has been >> I'm kind of I'm kind of thinking that it's going to come soon, but I've said that before and been disappointed. So, I'm not not getting my hopes up yet. I am >> feel Firefox has had some movement on some APIs lately that I have been kind of surprised by. So, >> killing it. >> Uh oh, yeah. Next one we have is this one might not be interesting to you but I'll explain why it's interesting to me is a B 64 to u int8 array. So what this means is that if you have been using like windowa tob or b to a to encode and decode base 64 um that's always been a bit of a weird one because you you look up the mdn for b2a which is a a function for encoding and decoding uh base 64. it says like this is deprecated. We're like okay but like why is everybody using it? Um and the replacement for that is using these new UN8 array APIs. Um and I'll explain why this is good because if you have B 64 data um using those old APIs it stores them as a string. Um 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 B 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 B 64 data not as a string, but as a special array, which is a UI 8 array. And there's a really neat I 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. Um, 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 a an array, right? where you probably see it most often in web development is like an image that's been B 64 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 uh create object URL similar to if you've ever had a video stream and you want to 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. Um, and it's also the DOM doesn't have to deal with this massive huge string. So, um, 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 B 64 decode something, reach for this API. Nice. Yeah, I I didn't even notice that. Did not know. And it is funny cuz 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. Uh, I'm going to show you 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 um 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 uh animate from that state to its end state. Uh allowing you to do all kinds of animations where things came into the DOM. In fact, um this actually used to be and and maybe 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 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 like a like a millisecond later you would apply that second class and then that gave you then an A to a B, right? Cuz 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 trans and and most likely what is this used for like like uh animating in a modal like it it can it can >> right come out 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 discreet 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. 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 display block display wait >> display none to display block. You can now 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. >> Scale zero to scale one like literally anything you can. 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 allowed 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 accordians. 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 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 uh animation using only CSS. It's incredible. >> You know why I think you were confused is because I'm just looking at can I use for this and allow discreet 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 >> 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 going to 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 discreet to Firefox and not >> I I think it was allowed discreet was added in 2014 to Chrome. >> Yeah. >> Right. But then the the ability to transition it >> Yeah. a transition behavior was only added recently in all these browsers. So, >> so that is really surprising. But I do love uh APIs like this like view transitions when it didn't work. It just uh 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 Firefox users, yes, we love progressive enhancement. Uh that's always great when you have to do it when you can get progressive enhancement without having to yeah >> um just sacrifice or rewrite a massive amount of code. So either way you can use starting style allow discreet today if you want to sacrifice some animations on Firefox. Next up I have promise.try. This is 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 promisebased. If your whole API is promisebased, 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 um at the very basic like a confirm >> you know if a confirm or like um fs.right 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 try will allow you to just wrap a nonpromisebased function or method and then it will if it throws it will it will catch it in the catch if it returns a value it will return it in your promiseall settled So you can use any API as if it were a promise or not. So it's really nice. >> Love that. Uh 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?" Um if you you catch 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 uh essentially pauses the rendering of an item. So it preserves its rendering state 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 uh 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 um 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 offscreen which is really useful if you have sections of big things that are rendering offscreen. Uh like a lot of times people reach for sometimes virtual lists, virtualized lists for this type of thing. Uh 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 offscreen and uh 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 oo I'll just put every single thing that's offscreen content visibility auto. But I think you want to be more surgical with it. I think you want to test with it. I want you >> 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 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 where 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 like a a use case on Facebook. It says Facebook engineers observed up to 250 millisecond improvement in navigation when uh times when going back to previously cached views. Being able to like have that control in the right circumstance I think can help. Uh so whether that is content visibility hidden or auto it's a cool API to learn. >> Uh all right 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. That's a great idea., Baseline 2025 Features Web Gained in 2025, YouTube, 01kd3njfxg1qpr8jdr92dejd8e.