981: Browsers Are Finally Catching Up (Interop 2026)
Episode
51 min
Read time
2 min
Topics
Productivity, Design & UX, Software Development
AI-Generated Summary
Key Takeaways
- ✓Container Style Queries: Apply CSS conditionally based on a container's property values — including custom CSS variables — enabling true native theming beyond light/dark mode. When combined with the CSS `attr()` function, components can accept data attributes as style inputs, eliminating JavaScript-driven class toggling for multi-theme design systems without server-side rendering flicker issues.
- ✓CSS `attr()` Function Upgrade: The revamped attribute function lets you pass HTML data attributes directly as typed CSS values — numbers, angles, colors — functioning like props in Styled Components. Chrome Canary supports 99% of the spec today, but Firefox and Safari remain at 11%, making this a feature to prototype now and ship later in 2026.
- ✓Anchor Positioning Completion: Anchor positioning, which places two DOM elements relative to each other regardless of nesting, is at 99% in most browsers with only animation edge cases remaining. It supports automatic fallback repositioning via `flip-inline` or `flip-block` when viewport space is constrained, replacing floating UI libraries like Floating UI for tooltips and popovers.
- ✓Media Pseudo-Classes: New CSS pseudo-classes — `:playing`, `:paused`, `:buffering`, `:stalled`, `:muted`, and `:volume-locked` — let developers style audio and video elements based on playback state entirely in CSS. This eliminates the current pattern of attaching JavaScript event listeners to media elements and manually toggling classes to show spinners, hide buttons, or indicate buffering states.
- ✓WebTransport as WebSocket Alternative: WebTransport uses HTTP/3 instead of TCP, enabling persistent connections that survive network switches — such as moving from Wi-Fi to 5G — without reconnection. It supports multiple simultaneous streams and stream prioritization on one connection, making it suited for real-time games, live streaming, and collaborative apps. Safari currently sits at 0% support.
What It Covers
Syntax hosts Scott and Wes break down Interop 2026, the annual cross-browser commitment where Chrome, Firefox, Safari, and Edge align on specific APIs to reach 100% implementation by year-end. Chrome Canary already scores 87/100 while Firefox and Safari sit at 64/100, with 15 focus areas targeted for full standardization.
Key Questions Answered
- •Container Style Queries: Apply CSS conditionally based on a container's property values — including custom CSS variables — enabling true native theming beyond light/dark mode. When combined with the CSS `attr()` function, components can accept data attributes as style inputs, eliminating JavaScript-driven class toggling for multi-theme design systems without server-side rendering flicker issues.
- •CSS `attr()` Function Upgrade: The revamped attribute function lets you pass HTML data attributes directly as typed CSS values — numbers, angles, colors — functioning like props in Styled Components. Chrome Canary supports 99% of the spec today, but Firefox and Safari remain at 11%, making this a feature to prototype now and ship later in 2026.
- •Anchor Positioning Completion: Anchor positioning, which places two DOM elements relative to each other regardless of nesting, is at 99% in most browsers with only animation edge cases remaining. It supports automatic fallback repositioning via `flip-inline` or `flip-block` when viewport space is constrained, replacing floating UI libraries like Floating UI for tooltips and popovers.
- •Media Pseudo-Classes: New CSS pseudo-classes — `:playing`, `:paused`, `:buffering`, `:stalled`, `:muted`, and `:volume-locked` — let developers style audio and video elements based on playback state entirely in CSS. This eliminates the current pattern of attaching JavaScript event listeners to media elements and manually toggling classes to show spinners, hide buttons, or indicate buffering states.
- •WebTransport as WebSocket Alternative: WebTransport uses HTTP/3 instead of TCP, enabling persistent connections that survive network switches — such as moving from Wi-Fi to 5G — without reconnection. It supports multiple simultaneous streams and stream prioritization on one connection, making it suited for real-time games, live streaming, and collaborative apps. Safari currently sits at 0% support.
Notable Moment
Twitter removed its "Dimmed" dark mode theme, citing maintenance overhead. One host pushed back, arguing that a third color scheme — essentially one additional background color value — requires negligible extra work compared to supporting two, especially when all text is already white regardless of theme.
Episode Transcript
Web browsers as you know them are about to get a lot better because Interop 2026 just dropped. We're gonna 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 as Wes Bos. What's up, Wes? Hey. I love Interop. If you don't know what Interop is, it's basically the all of the browser vendors come together and 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 that shows what percentage of of passing tests are there. And and basically, they say, like like, these are the things that we are gonna 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 that's always the thing with these these features. Right? It's just you drag they drag their feet or the it works 98% in in Safari, but there's, like, some weird bug, you know? Yeah. This is just so nice and clear. Yeah. It 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/drop2020six. 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 the browsers have gotten together. They, the folks that are working on these things and they 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 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 a 100 on Intrap 2026 already. So, people who wonder why I mainline 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 is that by the end of the year, these should be at a 100, which, is a great thing when you look at the actual API. So what we're gonna 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 …
Get the full transcript (9,130 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 48-minute episode.
Get Syntax summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
“Anchor positioning, which places two DOM elements relative to each other regardless of nesting, is at 99% in most browsers with only animation edge cases remaining... replacing floating UI libraries like Floating UI for tooltips and popovers.”
“💼 SPONSORS [{"name": "Sentry", "url": "https://sentry.io/syntax"}]”
More from Syntax
We summarize every new episode. Want them in your inbox?
Similar Episodes
Related episodes from other podcasts
The Prof G Pod
Aug 15
No Mercy / No Malice: The Prof G Storytelling Playbook
Stuff You Should Know
Jun 19
How Big Bang Theory Works, with Neil deGrasse Tyson
The Vergecast
Jun 8
Siri AI, Screen Time, and the rest of WWDC 2026: The Vergecast Livestream
The Joe Rogan Experience
May 15
#2500 - Scott Horton
Business Breakdowns
May 15
Auto1: EU-sed Car Marketplace - [Business Breakdowns, EP.246]
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Syntax.
Every Monday, we deliver AI summaries of the latest episodes from Syntax and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime