981: Browsers Are Finally Catching Up (Interop 2026)

February 23, 2026

51 min episode · 2 min read

Episode

51 min

Read time

2 min

AI-Generated Summary

Published Feb 24, 2026

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.

Know someone who'd find this useful?