981: Browsers Are Finally Catching Up (Interop 2026)

Scott and Wes unpack Interop 2026 and the browser features finally aligning across engines, from container style queries and anchor positioning to scroll-driven animations and view transitions. They break down what it all means for day-to-day devs and how close we really are to a fully interoperable web. Show Notes 00:00 Welcome to Syntax! 00:21 What is Interop? Interop GitHub. 02:44 Container Style Queries. 09:32 Brought to you by Sentry.io. 09:57 Anchor Positioning. 12:01 CSS attr(). 15:40 CSS Contrast-color. 19:10 CSS Zoom. 21:36 CSS Custom Highlight API. 24:02 Dialogs and Popovers. 25:44 Fetch Uploads and Ranges. 27:48 IndexedDB. 28:25 JSPI for Wasm. 29:05 Media Pseudo-Classes. 30:00 Navigation API. 31:53 Scoped Custom Element Registries. 32:40 Scroll-Driven Animations. 33:30 Scroll Snap. 36:50 CSS Shape(). 38:25 View Transitions. 41:32 Web Compat. 42:29 WebRTC Improvements. 43:44 WebTransport. 45:44 Investigation Efforts. 46:25 JPEG XL 48:46 Mobile Testing. 49:20 WebVTT. 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?

  Web browsers, as you know them, are about to get a lot better because Interop 2026 just dropped. We're going to have all of the details about what is in Interop 2026 and why you should be excited about it in this episode of Syntax. My name is Scott. I'm a developer from Denver. With me as always is Wes Boss. What's up, Wes?

• 0:19Wes Bos?

  Hey, I love Interop. If you don't know what Interop is, it's basically that all of the browser vendors come together and put up a list of like, features that have to be added to the browser in 2026. Meaning, and then they put this big shame chart up that shows what percentage of passing tests are there. And basically, they say like, these are the things that we are going to be focusing on. And by the end of the year, gosh darn it, we better have all of these things implemented in all of the browsers with no bugs, so that we can, like, we can say that we can, we can continue and start to use these features. Because that's always the thing with these, these features, right?

• 1:03Wes Bos?

  It's just you drag, they drag their feet, or it works 98% in Safari, but there's like some weird bug, you know?

• 1:11Scott Tolinski?

  Yeah.

• 1:11Wes Bos?

  This is just so nice and clear.

• 1:13Scott Tolinski?

  Yeah, it's so nice and clear. And for those of you who are not going to be watching this on YouTube, we'll have links and everything in the show notes, so you can click around and see some of this cool stuff. There's a lot of great information. The FPT.FYI/Interop2026, again, we'll have that link in the show notes. That is a really great place to start to understand kind of the main focus areas. So what's happened is the browsers have gotten together, the folks that are working on these things, and have decided and agreed upon this feature set as the one that they want to get into the 100% territory in the following APIs. Which is great, because it's a clear roadmap, it's a clear picture, you can check

• 1:56Scott Tolinski?

  back at this page, and it's going to show you the progress. And as it stands right now, if you look at this, Chrome Canary has an 87 out of 100 on Interop 2026 already. So, people who wonder why I mainlined- Chrome Canary now. This is why, really. And Edge, Edge is 82, where meanwhile Firefox is 64 and Safari is 64 as well. But the good news is that by the end of the year, these should be at 100, which is a great thing when you look at the actual API. So what we're going to be doing is talking about each individual API and what that means for this API to be an interop. So that way you know what kind of cool stuff is coming to the browser over the course of the year.

• 2:40Scott Tolinski?

  And we'll be discussing a little bit about what makes these things interesting. You want to start at the top, Wes? We want to, we want to start right up. To me, one of the most exciting one of these focus areas is

• 2:51Wes Bos?

  Yeah.

• 2:52Scott Tolinski?

  container style queries. So we got container queries, which was like one of the coolest APIs allowing us to, you know, work with a media query like syntax to style things based on the size of a container. However, the idea of container style queries has always kind of been there from the start, just not a part of the initial implementation. Container style queries allow you to really apply a container query or a like a media query style wrapper based on CSS properties. And man, this to me, even though we have the whole CSS if statements API, whatever,

• 3:35Scott Tolinski?

  this to me is like true if statements because container style queries can be anything from like a CSS variable.

• 3:44Wes Bos?

  Yeah, background color, you know, like basically when this thing has a background of pink, then go ahead and apply the following CSS to it and its children.

• 3:56Scott Tolinski?

  Yeah, it's really wild. And I, and I do think again, like if we're talking like true theming support and stuff like that, that makes this a lot cooler, but it does feel like it is almost like a true if statement in that kind of way. Where again, it's like if this condition has been met, if this property has this value, then therefore apply these styles. So what a cool API.

• 4:23Wes Bos?

  Yeah.

• 4:23Scott Tolinski?

  One of the ones that definitely felt like Wow, it'd be really great if this were to exist when we first heard about it. And to see that it's now landing in Interop 2026 is extremely exciting. This, this is just one of many really cool CSS properties in this.

• 4:41Wes Bos?

  Let's talk about like, like, like where would that actually be useful though? Right? Like it is cool that you can target something when it has a specific background color or, or when it is in a certain display. Like the big one for me is, and this is in the example as well, is just custom themes. Saying like, when this container has a theme of, and like right now in, in color schemes, we have dark and light. And if you want to do any more than that, then it gets, it gets tricky. It gets hard, right? Like Twitter, like last week, they literally removed dim mode. And I was, I was talking with one of the devs on, on Twitter about it. And like, like, I'm like, what's, like, what's the possible?

• 5:24Wes Bos?

  They said they did, they moved it because they don't have the overhead to, to support it, which seems kind of silly, like.

• 5:30Scott Tolinski?

  It's silly. No, I don't accept that answer.

• 5:33Wes Bos?

  And it's not that different than dark mode. So I was like trying to like poke at like, like, what's the actual reason? And like, I could have said like, like, I understand some of the reasons. One of the reasons is that light and dark is very easy. You add a third, then you start getting really, really hairy. Another issue is server side rendering, right? Like if you default it to light mode and then you, you load it and then it's, it's a, it's a different theme, then you'll have like a little bit of flicker, right? And, and, or like caching, we had, we had this issue on the syntax website where if somebody had a different theme set on one of the pages and they visited that page, it would be cached server side rendered on their theme.

• 6:15Wes Bos?

  So we just had random pages on the, the website that were, that were being rendered as a different theme. So like this type of stuff where it's just like a first class citizen in the very first render, you're not doing some weird JavaScript thing where you update it later. It's fantastic. So I think that's probably a huge use case as well.

• 6:35Scott Tolinski?

  Yeah, totally. I think there's a lot of cool stuff about this. But again, I'm back to the Twitter thing. I don't buy that. If you have a 000 background working and a white background, that is, if you have both of those working, then the difference between a 000 background and like a 222 or whatever the heck their gray mode was, is nothing. It's one color. I don't buy any other description.

• 6:59Wes Bos?

  Yeah.

• 7:00Scott Tolinski?

  I don't buy any other description because they don't have to worry about contrast, the OLED dark background, the text is all white on the dang site anyways. So like, how much more contrast do you need?

• 7:11Wes Bos?

  I don't understand it. And it's not like, like you have a design system. Like, it's not like you're building a new feature and being like, hmm, make sure we set the text correctly on this feature. Like, shouldn't that just inherit?

• 7:23Scott Tolinski?

  Yeah.

• 7:24Wes Bos?

  I don't, I don't understand that at all. That was, was shocking to me that they would say that that, and also on the same day, Elon Musk posted that by the end of the year, AI will be writing binaries. So we had the same day where we had somebody say, "A third color scheme is too much overhead to support, and AI will be writing binaries by end of year."

• 7:49Scott Tolinski?

  Oh my god. What a, yeah, yeah, I can't even, I can't even with that. Either way. So back to this. So if you, if you are on this, we'll have a link to this GitHub. There's an Interop GitHub too. I'll have a link in the show notes for you. The coolest thing about this GitHub is that they not only link to the proposal for the issue, the docs, if there are MDN docs available, the spec, but they also link to things like the tests, the web platform tests. So if you're the type of person who wants to really nerd out and see why Chrome has such a better score on this than Firefox or Safari, they have each individual test in here where you can see if there's a bug with the test,

• 8:32Scott Tolinski?

  or if there's a bug in the implementation, or what it's missing. So you could even follow feature by feature. It's really, really, like, I nerded out on these tests so hard this morning, trying to see what was what and what was missing here and there. Because some of these, as we'll get into, are nuanced because you'll be like, oh, wait, this API already exists, right? But there are like nuance here and you can find that nuance inside of the test links inside of all of these. If that's the type of thing you're gonna nerd out on like me, it's available for you.

• 9:03Wes Bos?

  And typically, this is how, like, when you find a bug in the platform, like, I've done this many times. I've created a, an issue in like with Chrome or with Firefox and being like, this is broken when you do X, Y, and Z. And what they will do is they will then go and make a new web platform test and publish that. And then the, all of the browsers will run that and they'll see, oh, we found an edge case. And now this is broken in X, Y, and Z.

• 9:30Scott Tolinski?

  Yes. Yeah. So really cool stuff. And if you want to see all of the errors in your application, you'll want to check out Sentry at 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. All right.

• 9:56Wes Bos?

  Uh, anchor positioning. We're pretty much almost there. We've talked a whole bunch about anchor positioning. I absolutely love anchor positioning. This is an API that allows you to position two elements relative to each other, even if they are not nested inside of each other. So this was, this is really helpful for like a tooltips or, or little pop-ups that need to be shown or like price tags that you want to put something on. And there is a whole bunch to anchor positioning, right? You can, you can have different named areas where you can, you can stick things in the top left or bottom right.

• 10:33Wes Bos?

  But then you can also use calc-size, which is a CSS function to center it. You can animate a whole bunch of them. It's an absolutely massive spec. It just landed in Firefox. I've got some demos that I need to make a video on because I've been, been pretty excited about this. It, the stuff that is not, it's, we're at like 99% in almost all the browsers. And the stuff that is not supported is some of the animation stuff. And then there's just some, some oddities. But this is one that you can, you can start using today.

• 11:05Scott Tolinski?

  Yeah. Which is great. I love anchor positioning as well. It's one of the coolest new APIs. Getting AI to write anchor positioning though, uh, still I gotta pass like the whole API and be like, hey, it's like, it's like, well, maybe I'll just position absolute and say, no.

• 11:21Wes Bos?

  Yeah.

• 11:22Scott Tolinski?

  I told you, this is the way. Listen to me.

• 11:25Wes Bos?

  Or installs like a, like a floating UI. There's, there's like libraries out there that are like floating UI. And another thing anchor positioning does is if you have like, you can tell it multiple spots where you want it to go. So if you like, uh, go to the right of this element, but if for some reason that element is on the very right of the page and there's not enough space for that element to, to pop over top of it, then you can, you can fall back. You could say flip in line or flip block, like flip vertically, or you can just give it like a, like three or four different possible areas where you'd like it to go. And then it will then, um, update itself. But let's get on to the next one. CSS A T T R. What does this do, Scott?

• 12:05Scott Tolinski?

  Oh yeah. CSS attributes. So CSS, uh, the attribute function inside of CSS is something that has existed for a long time inside.

• 12:15Wes Bos?

  Yeah.

• 12:15Scott Tolinski?

  Uh, of CSS, but the improvements here for CSS attributes is getting to use the values from a CSS attribute inside of your CSS. So, uh, if we go to browser compatibility, you can see why this isn't like widely a hundred percent already, considering the attribute function first dropped in Chrome in version two of, of Chrome. But more recently, it's, it's along with the ability to use the, the new like, what type of something is? Like we had the at property syntax in CSS that was basically like TypeScript types for CSS where you can find this as a.

• 12:56Wes Bos?

  Yeah. Is it a number? Is it a rotation?

• 12:59Scott Tolinski?

  Exactly.

• 12:59Wes Bos?

  Is it a background and angle, et cetera?

• 13:03Scott Tolinski?

  And that gives us the ability to use the attribute function in a much better way inside of CSS. The way that I like to think about the attribute function is it's almost like props in CSS. You remember in styled components, you could put a prop into a styled component and get access to those values in your CSS. Well, that's pretty much what the attribute allows us to do with this API. It allows us to actually access the values of an attribute directly in your CSS as the value. It's really, really sick. Like,

• 13:41Scott Tolinski?

  imagine you could put a data rotation value as an attribute on a div and then use that actual number value as the rotation degree in your CSS. So that's what this is. And it is really cool.

• 13:59Wes Bos?

  Yeah, it's making declarative UIs a lot easier. And previously, I've had to do like inline CSS where you like pass a variable and that has a whole bunch of issues just with simply being inline CSS is much more specific. Don't make me say the word, but that and like the other thing about this is that like, imagine you combine this with the first one we talked about, which is container style queries. So you could have, you could have like a attribute of like data dash size is equal to large. And then you can say like, when the variable size is set to large, then apply the following styles to this, this

• 14:41Wes Bos?

  container. This is so great for like components and making reusable things over and over again, which have many different permutations, can live in different areas. And then when the people are authoring them, you don't necessarily need to dip into dip into the CSS.

• 14:58Scott Tolinski?

  Yeah, it really feels like this is a step of getting HTML and CSS to be more. Like less out of your front end framework and more into the browser. Like I have been thinking about this as if they are props in that kind of way. And I think it's really super neat. This is one of the ones, it's 99% available in Chrome Canary today. By the way, folks, if you're listening to this and as well as Edge, it is only 11% in both Firefox and Safari. That's because they have the old version of this where you couldn't actually use the values. So hopefully we'll be getting those very soon in the other two browsers. Cause this is one that I'm super, super excited to use and we'll be getting deep on this one for sure.

• 15:40Scott Tolinski?

  Next one here we have is contrast color, the long awaited contrast color function. I do feel like the actual what we got with contrast color is maybe less useful than I was hoping it would be. But contrast color basically takes a color value and will return a contrasting color. There is not that much control in this API that I was hoping it would be. Where again, it's basically going to be returning a black or a white value essentially. Let me find out exactly here.

• 16:15Wes Bos?

  It's only black or white? I thought it would, it would calculate what the color should be based on.

• 16:20Scott Tolinski?

  That's what I'm telling you. Yeah.

• 16:21Wes Bos?

  What it's falling on?

• 16:22Scott Tolinski?

  So the, the actual implementation returns a value of white or black, based on which value has the greatest contrast of the input. So it feels like this API was nerfed.

• 16:33Wes Bos?

  It's so hard though, because like if you did give me the, like the calculated perfect contrast, then like you, you would be getting like green on red.

• 16:44Scott Tolinski?

  Sure.

• 16:44Wes Bos?

  And like, you would be having awful looking combinations.

• 16:50Scott Tolinski?

  I wish this would be like a light dark situation where you could specify what that is. So it's not just like a white, black.

• 16:56Wes Bos?

  Can you not feed that, like stick it in a variable and then feed that into the, the from? Like you, you basically say, all right, here it is. Or use a, again, the thing we talked about first today, use a style query. So when it is black, when it is dark, then use red. And then when it is white, then, then use X, Y, and Z. So it's probably doable. But the color, do you know that there's, there's color drama, Scott?

• 17:26Scott Tolinski?

  Is there never not?

• 17:27Wes Bos?

  Accessible color drama.

• 17:29Scott Tolinski?

  No.

• 17:30Wes Bos?

  I had a post the other day about like, I forget what it was, but, but Kilian Volkov, he's the dev behind Polly Payne, which is fantastic browser, you should check it out. And he was, he like filled me in on like, you know how if you put like white text on a red background, it's technically inaccessible, right? Like YouTube red, white text on top, it's that, that is inaccessible and you're just like, you're look at it and be like, well, I'm, I'm not disabled, but that looks very readable to me. And there are so many color combinations out there that are simply like, okay, that, that is fine, but it's, the algorithm says that it is incorrect, right?

• 18:10Wes Bos?

  And then it turns out that those colors that are in your dev tools are WCAG2, but then there's a, they're working on a new one called WCAG3, but then there's like a competing standard called APAC. And I'm not going to go into it, but like, there's drama in the color space of like which one should be done and what the browser ends up figuring out, is this accessible or not? Is, is going to be up to the browser, which may or may not also be like, like people, you can get sued if your, if your website is not accessible right now. So right now, if you have a button, background color, red, text, white, that is inaccessible

• 18:53Wes Bos?

  and you can get sued for that, which is, is nuts. But under the new, this APCA, it, there is much more reasonable and it, it stands to whether this will actually be the standard, but hopefully it is because it seems much more reasonable.

• 19:09Scott Tolinski?

  Yeah, word. Cool. All right. Next one here that we have is a feature that's been around in all of the browsers for a billion years, which is CSS zoom. CSS zoom, we talked about on the show before, it's kind of like the scale property in many ways, but Wes, do you want to explain like what makes it different?

• 19:31Wes Bos?

  Yeah. It, if you zoom an item, it scales its size up, but, but will then bump down, it still takes up its room in the DOM, right? So like if you, I don't know, Scott, if you just inspect element on any element in there and then put a zoom to on that. What it will do is it will grow to be twice the size and then it will bump down the elements below it, which is fantastic. So we had something in the Sinhacks platform where I needed to to scale up and down iframes, right? Because like I want the iframe to be rendered 600 pixels wide, but I literally want it to scale up and down like if it were an image.

• 20:15Wes Bos?

  And I wrote this very complex thing with container queries and transform and scale. So I could like, I got it working. I was pretty proud of it, but then I was looking at it being like, oh, that would probably been a lot easier with just zoom.

• 20:33Scott Tolinski?

  Yeah, right. Yeah.

• 20:34Wes Bos?

  Yeah. So that's, that's awesome, especially for like, like almost everything on the web is vector based, right? So you could just

• 20:42Scott Tolinski?

  Yes.

• 20:42Wes Bos?

  scale things up and down accordingly.

• 20:45Scott Tolinski?

  Yeah. And my understanding with this, why it's an inter, an interop 2026 is that this is an API that's kind of existed and was written and kind of implemented differently and kind of not neglected that it even existed at all. So my understanding is that this is just kind of shoring things up, making sure all the browsers handle it the exact same way, making sure that there's no bugs. So this should work in any browser today already. It's just making it, it's tightening it up and saying,

• 21:13Wes Bos?

  I, I looked into like, like what's actually making it fail. And it, it turns out it's like nested iframes. So if you have an iframe and you zoom it down, but there's like an iframe inside of that, which is somewhat of a legitimate use case. You know, like you could have like a YouTube video and that YouTube video could have another iframe inside of it, then you're in trouble. But whatever. The next one is CSS custom highlight API.

• 21:39Scott Tolinski?

  Yes, cool.

• 21:39Wes Bos?

  I've looked into this several times and this is great. So if you've ever done sperran wrapping, meaning that you want to highlight something, you know that you'll have to like, you literally need an element to, to color something, you know, put a background color, change the color, whatever. And then the custom highlight API will allow you to create ranges on your DOM nodes.

• 22:05Wes Bos?

  And then in CSS, you can name them. And then in CSS, you can simply just write a selector that is like a custom highlight. Scott will show it. And then you can, you can change the background. What you can apply to it is somewhat limited. You can only use, I think it's like background color, probably opacity, you know, like there's only a couple of things you can apply to it. But it certainly is really handy for just highlighting text.

• 22:34Wes Bos?

  I'm trying to remember when I used this. I think I used it to blur out to like redact some information.

• 22:41Scott Tolinski?

  Yeah, that's cool. That's a cool usage.

• 22:43Wes Bos?

  Yeah, I wrote like an AI thing that would figure out, would, it would tell me I had like a paragraph. And I said, where in the paragraph is like a phone number or any sensitive information? And it gave me the start and stop values from all of them. And then I turned those into like DOM ranges. And then I simply just blacked them out.

• 23:02Scott Tolinski?

  Yeah, there's some of their examples are showing like highlighted search results or spelling errors and stuff like that. It's like just giving you that level of control over the display of text when it needs to be highlighted. So I think this is a really cool API. It's not one that I see myself using all the time, but I know that like when I'm going to need it, I'm going to be thankful that it exists because like your alternative right now is JavaScript for this. That is like hacky to some degree.

• 23:29Wes Bos?

  Yeah, or you look at something like VS Code. VS Code does a lot of text decoration, you know? Underlines, squiggles, overlines. There's all kinds of little decorations on VS Code. And if you inspect element on VS Code, they have an entire separate layer that they just render these elements on top of and then place them exactly where they need to go. And that would probably be easier with, with Anchor API now, but like there's not always an element wrapped around like a line of code. So this API would certainly make that a lot easier.

• 24:02Scott Tolinski?

  Totally. Dialogues and popovers is also included in here, not because dialogues and popovers don't exist. In fact, they're very well supported, but there is a number of little outstanding things here and there. Actually, Safari only has a 26%

• 24:18Wes Bos?

  New features.

• 24:18Scott Tolinski?

  percent on dialogues and popovers. I didn't realize that, but yeah, there's, there's new features in here like a dialogue closed by attribute. It allows you to, to like, close, have a dialogue that's closed when you click outside of it and having to like, instead of having to write that with JavaScript, there's an open CSS pseudo class allows you to style where they're based on if the dialogue is open or not. Popover hint is another attribute here that is used for like tool tips for pop, like you can make tool tips really easily and pop over. It's actually really nice. I've used this myself. So a lot of little things here and there.

• 24:57Wes Bos?

  The, this closed by is actually really handy. On the Sinhacks platform, when we finish a battle, we use a pop over or a dialogue to say, time's up and like you just have to wait there. But if you hit escape, it closes it because the escape key is, is by default. So we, we need to put this in because the closed by attribute will allow you to disable hitting the escape key.

• 25:19Scott Tolinski?

  Yeah. Cause there's a difference where it's like a takeover, like something that you, you have to prevent the user from advance. I actually just hit this exact same issue, Wes, in my video, my Vframer app, I have like an onboarding modal and I hit escape and it's like my onboarding modal went away and I'm like, I can't get that back now. Like the user could hit escape and then never see their onboarding again. So definitely a lot of nice stuff needed here. Next is JavaScript API, which is fetch uploads and ranges. So there's a couple of things, the readable stream inside of the body to stream data to the server, supporting form data, data and mime types for requests and responses, and supporting the range header. Now I don't really know too much about these ones, Wes,

• 26:03Scott Tolinski?

  or specifically, I don't, I don't, I don't know where they're going to come in handy for me. They seem nice.

• 26:10Wes Bos?

  Yes, was kind of interesting. It's more of a lower level. Level thing that maybe you haven't run into previously, but essentially when you are sending off a fetch request, the body of that fetch request in all browsers cannot be what's called a readable stream. Meaning like it's something that is is still being worked on. And and as we are getting more into to AI, as we're getting more into like if you are compressing video as you go and you want to like send that off as a fetch request, you want to send data somewhere likely to a server at once. You you need like a readable stream for that. And that's not something that is is totally doable. And simply one could be like, I want to upload this large file to a server and I want to get like

• 26:55Wes Bos?

  progress reports of like how how much is is currently being uploaded. And that is just not doable with a fetch. And I quite honestly, I've never run into that. It's because like usually when you're doing this, you're using some sort of library. And then the library will will handle that under the hood because you can do it with like XML HTTP requests. You can do it with like Axios, things like that. But this would be a nice feature being added, especially like everything's starting to be streaming right now. All of those React server components, looks like the opener of this issue is the maintainer of spellkit. So certainly lots of things there with the, what's the new spellkit stuff? That's like streamable, the sync components, that's it.

• 27:33Scott Tolinski?

  Yeah, yeah, yeah, components. Yeah, yeah. Cool. Yeah, I'm sure there's some people that are more excited about this than me. That's for sure. I don't, I just, I don't, I don't hit these issues or at least I don't directly hit these issues. But this is an interesting one nonetheless. Next is going to be indexed DB API changes. And this is one that really just brings Firefox and Safari up to the level of where Chrome's at. There's a number of APIs like get all records, which returns the records and their primary keys from an indexed DB store or index. So the get all records method speeds up operations on large data sets. It seems like that is the main focus for this inside of indexed DB.

• 28:15Scott Tolinski?

  But as somebody who does use indexed DB for my local data stuff, gotta love that. And I'm sure library. Authors who work with this stuff will be liking this as well. Next one is JSPI for Wasm, which really my understanding of this one is that it just makes Wasm more reliable in an asynchronous setup. It says that it allows for Wasm applications that were written assuming synchronous access to external functionality to operate smoothly in an environment where the functionality is actually asynchronous. And that is already at 100% in Chrome and Edge, but at 7% inside of Firefox and Safari.

• 28:58Scott Tolinski?

  So again, another one of these APIs that's just like a nice thing that exists inside of Chrome that we're getting in the other browsers.

• 29:05Wes Bos?

  Next one, media pseudo-classes. This is amazing. The playing paused, seeking buffering stalled, muted and volume locked CSS pseudo-matches on an audio and video element based on their state. Absolutely. Please, please give me this. I basically, if you want to hide a button while you're playing or paused, you want to toggle them. If you want to like show a buffering little icon when it is buffering, when it is stalled, you want to like show a little spinner. All of that right now has to simply, you set up some JavaScript, you listen for the events on your media element and then you like apply a class and then, or like show and hide things.

• 29:50Wes Bos?

  This is going to be a game changer for building custom video and audio elements.

• 29:57Scott Tolinski?

  Yeah, I love this stuff. Very excited to have all of this. Next one is the navigation API. Now, the navigation API, I believe, is already pretty decently supported. We're at a 98% in Chrome, 89% and 92% in Safari. But if, this is one of the ones where framework authors are going to really have a good time. But us normal folks probably won't be using this directly. But it, are you familiar, Wes, with the navigation API?

• 30:26Wes Bos?

  Yeah, I know like React Router, anybody who's working on a router for a Frameworks is already using these types of things because essentially it allows you to intercept navigation things. So like, you know, like one thing right now is some frameworks let you use like an anchor link, like SvelteKit, right? And what they'll do is they'll simply just like listen for link clicks and then they'll prevent default on that and they'll sort of like intercept it and then they'll they'll do all their little special sauce to preload that data in and then switch out the page, right? This is sort of like a native API for intercepting navigation APIs and then

• 31:09Wes Bos?

  you can sort of like step in. So like I don't, hopefully, I always hate these frameworks that make you use like a link component.

• 31:15Scott Tolinski?

  Oh, I hate it.

• 31:17Wes Bos?

  Yeah. So that's one of my favorite things about Svelte is like, yeah, a link is a, is a A tag? Hell, yeah, I'm into that.

• 31:26Scott Tolinski?

  Dude. Yeah, that's actually, it's one of the low key, you know, can't go an episode without mentioning Svelte things, but it's one of the low key things I love about Svelte is just that like when I think that React devs are still using a link component or something, I like that blows my mind, honestly. Yes, but navigation API changes more than just that. I think it could be really cool and stoked that I'm sure framework authors are stoked to have this with better support here. Next one is scoped custom element registries. This is a web components thing for basically allowing you to construct a custom element registry that's separate from the global one, which is living on Windows. So therefore by creating more than one registry, you can have

• 32:09Scott Tolinski?

  multiple custom elements with the same tag name to coexist. It's basically just like scoping for creating named custom elements. So super cool for that one. The big one for what?

• 32:22Wes Bos?

  Hopefully that will save some of the stupid names for all these components, you know?

• 32:26Scott Tolinski?

  Hate that. Yes. Oh, yeah. That's one of my least favorite things about web components is the names, the prefixes and stuff. I don't know why. I would just rather the names be nicer. That's like, so it's such a minor complaint.

• 32:38Wes Bos?

  It is.

• 32:39Scott Tolinski?

  Yeah. Next one here is. Man, one of the coolest APIs in the world, scroll-driven animations. You can tell where my interests lie, because all of the things that I'm deeming to be are the coolest are like the visual CSS things. And like, it's like the JavaScript APIs, I'm like, okay, whatever. But like, if it's scroll animations, I'm like going nuts over it. So scrolled animations allow you to do all kinds of stuff. It already has good support in Chrome with 95% support. Firefox is still majorly lagging. Safari has good support for them. But it's really just like, when this gets a little bit more closer, we'll do an extreme deep dive.

• 33:18Scott Tolinski?

  There is so many outrageous things you can do with scroll animations beyond just making fancy things fly onto the screen when you scroll down.

• 33:29Wes Bos?

  Yeah. Scroll Snap is also one on there. Scroll Snap is pretty well made.

• 33:36Scott Tolinski?

  Very well supported, yeah.

• 33:37Wes Bos?

  Where are we at right now with that one?

• 33:39Scott Tolinski?

  So, the thing with Scroll Snap here is there are a number of, if you come into the test suite, this was the one that I found very interesting, a number of small bugs and different behaviors across browsers that make it so it's not like super consistent across all browsers. So you can see a handful of bugs and some red here. But basically, if you read through the tests here, but also you read through the proposal, it's just a number of little small things with the API where they're saying, you know, things can be jumpy, or the snap behavior, how it looks and feels across different browsers is not consistent, doesn't have full control.

• 34:22Scott Tolinski?

  And what this is doing is it's just shoring up that API to make sure that Scroll Snap is as useful as we all want it to be. It's so cool. Yeah, I love Scroll Snap.

• 34:33Wes Bos?

  There's a couple more things to Scroll Snap, which is often kind of a bummer when you go to build, like if you're going to build a slider, or if you, if you're simply making, like Scott was working on something where you could do that, like, kind of like swipe to delete experience, in order to like get Those full experiences, you need scroll snap events, which is basically when something has has changed or snapped. Like something as simple as like highlighting the current little dot. I know that there is a CSS API for like being able to show like you've you've got five slides and you're sliding through them. You want to show that you're on slide three of five, right? And make that one yellow instead of black.

• 35:16Wes Bos?

  Right now, the way to do that is is you have to listen for like the the snap event or scroll snap. I forget what the actual event name is. Snoll scroll snap changing is is when it starts and scroll snap change is is when it's when you have snapped to something. And that's not in Safari. Being able to style things with a container query when something is snapped versus not, that's not in Safari. And then scroll state queries, that's kind of cool, right? Like people have always wanted to like stuck, you know, like CSS sticky is something currently stuck. That's another one that that's just not in Safari yet. So I'm hoping that those are part of this interop.

• 36:00Scott Tolinski?

  Yeah. And if you want to see, if you go through the tests, it will show you what exactly is in the interop here. So capturing snap position, scroll target align, snap after initial layout, snap after relayout. That sounds nice.

• 36:17Wes Bos?

  Related gesture during snap.

• 36:20Scott Tolinski?

  Yeah. So some of these are really just bugs and making this a little bit more reliable.

• 36:25Wes Bos?

  Usually when everything is nested very, very deep. Snap after relayout. Oh, that's an interesting one, right? You have scroll snap on like a container, but then you resize that element. What happens, right? So yeah, doesn't look like there is anything related to the events here, though.

• 36:47Scott Tolinski?

  Yeah, that might be a separate, separate work.

• 36:49Wes Bos?

  Separate year.

• 36:50Scott Tolinski?

  Next up is CSS shape, which we've talked about shape before on the show can be used with things like clip path. But it's basically just a really nice API for declaring how to.

• 37:02Scott Tolinski?

  Create shapes. I actually, I don't know if you would say famously, I used this in one of our CSS battles without knowing the syntax very well and it doomed me for that. But it's to me, this is a much nicer syntax than trying to write the SVG syntax.

• 37:18Wes Bos?

  Oh, my gosh.

• 37:19Scott Tolinski?

  Shapes. So the syntax, if you don't know, is basically you're saying like, if I want to make a shape, you have a shape function. You can say from 10 picks, 10 picks. H line by 50 picks. V line to five Rems. Like the syntax is so readable comparatively. It's a great API. It's really cool.

• 37:37Wes Bos?

  I wrote a library for like following tabs on one of my sites about a year ago and it was all with like, I had to like learn the entire SVG spec. Like if you ever look at an SVG and there's all these numbers and like M and P and A and in there like that's, that's basically just describing like where it's going to go. Where arc to move to line to, that sucks having to write all that stuff yourself. So this, this is very welcome.

• 38:06Scott Tolinski?

  Yeah, totally. Word. Yeah. Shape. And shape's one of those ones that has decent support at the end of last year. I don't even see it in this chart here to CSS shape 95% in Safari, 83% in Chrome. So just one of those ones that is completing the loop there and getting that one wrapped up. Next one is a handful of view transitions API things. We love view transitions for animating things when you change pages. Right now, this year's work will continue to focus on interoperability of the same document view transition. So spas. Getting those animations, making sure that they, all the browsers are functioning the exact same way. Blocking render attribute for link script and style elements, which blocks rendering until the external script of the style sheet has been loaded.

• 38:52Scott Tolinski?

  Then there's. Link rel expect attribute, which is a hint to the browser to block rendering until the element that the href value references is connected to the document is fully parsed. So again, these all seem like just nice little quality of life updates. And then a new CSS pseudo class, which matches only when the active view transition was started with the specified type. That one, that's, that's one of those little functions or pseudo classes that I'm sure will come up at some point, but that seems kind of interesting. And then there's going to be work on cross document view transitions, which is multi-page applications view transitions, which is something that I think is, is really great because

• 39:36Scott Tolinski?

  right now, like if you want page transitions in the browser, you want your app to feel like a native app, you're pretty much guaranteed to be reaching for a, a spa type of style navigation. And this does work to improve that.

• 39:50Wes Bos?

  I was just looking, I was like, oh, the probably thing that's not supported is view transition groups. So if you have like multiple elements that you want to just apply the same value to, the same transition to, like this is, this would be helpful if you're adding and removing cards from, from like a list of things, you know, you want to, you want to transition them in and out, but it's, that was in Rob 2020 or baseline 2025 and it looks like it's fully supported in all the browsers, which is fantastic.

• 40:20Scott Tolinski?

  Dude, view transition is still supremely underrated API. And this is one that is, it seems like most of the work to be done here is in Firefox and a handful of other things that are small time, but like,

• 40:32Wes Bos?

  Yeah.

• 40:33Scott Tolinski?

  Man, view transitions API, I recently, Wes, I recently added a new view transition to my website because I was tired of people saying my website was bad. So.

• 40:42Wes Bos?

  Hold on, wait, what is it? What's your domain that you're using now?

• 40:46Scott Tolinski?

  Tolyn.ski.

• 40:48Wes Bos?

  T O L I N S K I.

• 40:53Scott Tolinski?

  Yeah, you can see I got a nice little.

• 40:55Wes Bos?

  What do, what do I do? Oh, sorry, you're on it right now.

• 40:58Scott Tolinski?

  You just click any of the links. Yeah.

• 41:02Wes Bos?

  Oh, yeah, baby.

• 41:05Scott Tolinski?

  Nice little gravity fall.

• 41:08Scott Tolinski?

  Yeah, that's not too long. It's not too annoying. Peels away. I did a, I did some work overall on my website just to make it look feel a bit nicer after getting clowned on. It's not like perfect or anything, but.

• 41:20Scott Tolinski?

  I know, I was just tired of that. And.

• 41:23Wes Bos?

  The comments work.

• 41:25Scott Tolinski?

  The comments work. Bullying works. Yeah, it works. So I needed to do that for, for my own sanity here. Cool. Next one here is something that I also don't necessarily understand. Web compat, web compatibility refers to whether a website is works as intended in a particular browser version. This year's focus on web compatibility issues are ESM module loading, the timing, scroll events relative to animation events and unprefixing the webkit user select property. This feels just kind of like a, just a dumping ground of a few things.

• 41:57Wes Bos?

  This seems like a grab bag of, I'm not sure why these things are, the unprefixing of webkit user select property.

• 42:05Scott Tolinski?

  Yeah, yeah. Okay.

• 42:06Wes Bos?

  Maybe this is the grab bag of like, all right, Safari, hold on, let's, let's take a look at where Safari at. Chrome 88.

• 42:15Wes Bos?

  Firefox 88, Edge 88, Firefox, or sorry, Safari 55. Yeah, this, this is just like a shame bucket for Safari to fix their shit.

• 42:25Scott Tolinski?

  Yeah, I know. No kidding. Yeah, it's super funny. Next one here is WebRTC improvements. So they're going to continue to improve the interop of WebRTC, fixing the remaining failing tests. So it just seems like, again, there is a handful of failing WebRTC tests. This is for WebRTC video over the web, like a real time video over the web.

• 42:52Wes Bos?

  It's, it's for anything. WebRTC is like a communications channel. It's, it's most likely going to be video or audio. That's how, that's how a lot of these applications work. Right, but it could be, could be torrent data, could be literally anything, any sort of communication between, directly between two browsers. And I've, I've talked to many people over, I'm sure the, the folks at Riverside have many qualms about it. Like, not everybody is building a, like a Zoom in the browser, but the, the people that do, I'm sure they are just mad at some of these browsers for like these weird edge cases.

• 43:30Scott Tolinski?

  Yeah, I'm sure they're seeing some of the, the red on these tests and being like, would be really great if it was green. There's a handful of red and yellow here that, well, I would imagine anybody who's working with WebRTC in a professional manner is going to be stoked about. The last one here is web transport. Wes, do you know anything about web transport? I think this one's actually pretty dang interesting if you, if you haven't taken a look at this.

• 43:52Wes Bos?

  Yeah, I've, I've dipped into it, but give us an explainer.

• 43:56Scott Tolinski?

  Yeah, my, and you correct me if I'm wrong. My understanding is that web transport is a, you could think of it as an alternative to web sockets, using HTTP three instead of TCP, which is what web sockets use. Now, my research this morning led me to believe that the benefits of this are that it, web transport allows you to, it uses IDs instead of IP addresses, which becomes important because if you go from one network to another web network, the web socket would fail because it's based on the IP. Where if you were going from your Wi-Fi to your 5G,

• 44:40Scott Tolinski?

  using this, it would stay connected the entire time without having like a, any of refresh required. Multiple streams on one connection as well, stream priorities.

• 44:51Wes Bos?

  So it's a, it's a two-way data transport. So if you're, if you're sending data back and forth, which, which could be like a, like a video communication thing, or like probably also just like streaming video, you want to have multiple, then I keep wanting to say sockets, right? Like, what do you, what do you call that? Connections open at once.

• 45:12Wes Bos?

  Sweet. I'm into this.

• 45:14Scott Tolinski?

  Says a high.

• 45:15Wes Bos?

  What I was doing where somebody suggested that I look into it.

• 45:18Scott Tolinski?

  Real-time games, live streaming, collaborative apps, mobile user switching networks frequently, high latency, lossy connections. Yeah, Safari currently sitting at 0%. So let's get it together and let's get all these things on board because that sounds like something I like. I've been using WebSockets a lot for my, I mean, we use it all over SinHack. So I would love some of these things to be fixed, not necessarily, who knows if there are actual issues that I face right now. Now, there's also in addition to these new APIs being on the interop is like, these are what they're going to work on. There's also investigation efforts, which are things that have been listed as, these are things that we're going to be taking

• 45:59Scott Tolinski?

  a serious look investigating and planning on for Interop 2026. Now, there's a whole thing about accessibility testing. So basically how browsers are able to generate consistent accessibility trees from the same DOM and CSS across browsers, making accessibility testing, I would imagine, inside of browser tools to be much more reliable, predictable, unified across browsers. The one that I am most excited about in these investigations is JPEG XL, which is an awesome JPEG format that supports animation in alpha, lossy, as well as lossless compression. JPEG XL has been one of those things that has been

• 46:43Scott Tolinski?

  kind of up in the air for a long time. If you go through any of the proposals here on GitHub, there's a lot of great discussion about this. And you see basically the dev teams for the different browsers all saying, yes, we are committed to working with JPEG XL. And there's different, there's a Rust library. I went, I went, I've read all this stuff today. It's very fascinating, but I think the long story short here is that even though JPEG XL isn't on the Interop as a feature that will be coming into the browser, it seems like all of the browsers are getting on board saying, you know what, we're going to figure this out and JPEG XL is most likely coming. That is like my read on the situation.

• 47:28Wes Bos?

  If people are probably listening right now, I mean, like, like, why do we need another image format? You know, like we had, we have WebP now, which seems to kind of support.

• 47:40Wes Bos?

  Lot of the stuff, right?

• 47:41Scott Tolinski?

  Yeah, WebP is dope for people who

• 47:43Wes Bos?

  transparency.

• 47:44Scott Tolinski?

  Who don't like it, it's dope.

• 47:47Wes Bos?

  Like, what's the, I'm just trying to look up, like, what's the benefit of JPEG XL?

• 47:52Scott Tolinski?

  I think there's a lot there, Wes. We could do a whole episode on it, yeah.

• 47:57Wes Bos?

  All right, send us, leave in the comments below, why we should be using JPEG XL. That's a dope ass name, though. Man, I almost, we should almost do some merch. JPEG XL on it, though.

• 48:08Scott Tolinski?

  Syntax XL.

• 48:09Wes Bos?

  Way better than WebP, come on.

• 48:11Scott Tolinski?

  Yes.

• 48:12Wes Bos?

  WebP? JPEG XL? What an absolute chat of a file name.

• 48:20Scott Tolinski?

  Somebody, yeah, that's a, yeah, that's a, that's a great point, Wes.

• 48:25Wes Bos?

  I hope that I can drag them into apps without the apps crashing. It's fricking WebP. If I drag a WebP into Screenflow, the whole app crashes.

• 48:33Scott Tolinski?

  What about like HEIC, like, come on, like?

• 48:36Wes Bos?

  Yeah.

• 48:36Scott Tolinski?

  That's those formats.

• 48:38Wes Bos?

  Too many, too many formats.

• 48:40Scott Tolinski?

  Yeah, yeah, let's get just a good old JPEG going and make it better. All right, mobile testing, just in addition to the accessibility testing stuff, there basically is going to be an effort into standardizing how browsers test mobile-specific features, like dynamic viewport stuff, which like, right now, like, you're doing that by testing it on your phone, you know?

• 49:04Wes Bos?

  You've resized the little thing, yeah.

• 49:07Scott Tolinski?

  I always find that the, the little media query device view or whatever, it's just like, okay.

• 49:12Wes Bos?

  I hate that thing.

• 49:13Scott Tolinski?

  It looks like a phone, but it doesn't actually represent your phone. And there's so many missing things, so hopefully that fixes some of that. There's also Web VTT, which is basically like, the way that I'm understanding this is, is it's for things like subtitles, but not limited to subtitles. Again, these are just things that they're investigating, so not anything that I dove into crazy, but that is the various investigations. And all of the features in Interop 2026, it's gonna be an awesome year. We should do a follow-up on this later on to explain some of these things in more depth that we haven't done so, especially like JPEG XL. If there's any of these features you want to see us do deep dives on with examples

• 49:55Scott Tolinski?

  and really cool stuff, like me personally, I feel like I'm gonna be getting into scroll animations heavy this year and like, doing some experimental work there. So, anything you were particularly excited about, Wes?

• 50:08Wes Bos?

  I've been using Web VTT on my course platform for a long time. And it's awesome because you can like totally style a lot of it, you know? Although I've been like, this is totally, totally random, but I've been thinking about just putting the captions below the video player. Because the captions always get in the way of something important on the screen. Yeah, especially with code, right? And like, you're watching a show and sometimes they'll, they'll move it above, you know? But there's, it's not perfect. I kind of want to put it below the player. But that's the, I, out of all of this stuff, besides JPEG, XL, what am I most excited for?

• 50:48Wes Bos?

  I think probably either container style queries or the anchor positioning just being absolutely everywhere. Those are two big game changers that are going to change how we write CSS. And those are things that I'll be using in probably every app that I'm writing.

• 51:04Scott Tolinski?

  Yeah, yeah, word. Awesome. Well, that's it for Interop 2026. Let us know what you think. Leave a comment below. We'd love to hear from you. Thanks for watching and we will see you in the next one. Peace.