981: Browsers Are Finally Catching Up (Interop 2026)

Summary of 981: Browsers Are Finally Catching Up (Interop 2026)

by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

51m•February 23, 2026
Listen to Episode

Overview of Syntax — Episode 981: Browsers Are Finally Catching Up (Interop 2026)

In this episode Wes Bos and Scott Tolinski walk through Interop 2026 — the cross‑vendor roadmap and test suite where browser teams agree on a set of features they will implement and get to 100% interoperability in 2026. They explain the big features, why they matter to real‑world development, current browser support roughness, and how to follow the tests and proposals yourself.

What is Interop 2026 (quick primer)

  • Interop 2026 is a coordinated list of browser features plus web‑platform tests aimed at getting consistent implementations across Chrome, Edge, Firefox and Safari in 2026.
  • The interop dashboard (fpt.fyi/interop-2026) shows progress and links to specs, docs, tests, and issues so you can see exactly what’s passing/failing and why.
  • Current snapshot (at time of recording): Chrome Canary ~87/100, Edge ~82, Firefox ~64, Safari ~64 — goal is 100 across vendors by end of year.

Major features covered (what they do and why they matter)

  • Container style queries
    • Extend container queries to conditionally apply styles based on CSS properties (not just size). Useful for theming and true “if‑statement” style CSS (easier server‑rendered theming, component variance).
  • Anchor positioning
    • Native positioning of elements relative to non‑nested anchors (tooltips, popovers), with fallback placements and animations. Reduces need for JS libraries like Floating UI.
  • CSS attr() improvements
    • Use HTML attribute values (with typed parsing) inside CSS — effectively props for CSS. Great for component reuse without inline styles.
  • contrast() / contrast color function
    • Returns either black or white to maximize contrast against an input color (note: current implementation returns only black/white, not an arbitrary optimized color).
  • CSS Zoom
    • A standardized zoom property that scales an element visually while keeping its layout footprint — helpful for iframes, scalable UI elements.
  • CSS Custom Highlight API
    • Define named highlights and style them in CSS (useful for search hits, redaction, syntax/IDE‑like decorations).
  • Dialogs & Popovers enhancements
    • Small but important UX improvements: open pseudo‑class, closeable options, popover hints, attributes to manage focus/close behavior without extra JS.
  • Fetch uploads / readable stream support / range headers
    • Allow request bodies to be readable streams and better upload primitives — useful for streaming uploads, large file handling, and progressive uploads (relevant for AI, live processing).
  • IndexedDB improvements
    • Methods like getAllRecords for faster operations on large stores; bringing parity across browsers.
  • JSPI for WASM
    • Makes WASM that expects synchronous host functions work better in asynchronous environments.
  • Media pseudo‑classes
    • CSS pseudo‑classes for <audio>/<video> states (playing, paused, buffering, muted, etc.) so you can style state directly in CSS without JS event handlers.
  • Navigation API improvements
    • Native interception of navigations (helpful for routers, preloading patterns) — big for framework authors.
  • Scoped custom element registries
    • Allow multiple custom element registries so identical tag names can coexist in different scopes (improves web component ergonomics).
  • Scroll‑driven animations & Scroll snap polish
    • More powerful, consistent scroll animations and fixes for scroll snap inconsistencies across browsers. Big for rich scrolling interactions.
  • CSS Shape
    • Easier, more readable syntax for non‑rectangular shapes (alternative to verbose SVG path syntax).
  • View Transitions improvements
    • More consistent same‑document and cross‑document transitions, blocking render hints (link/script/style), and pseudo‑classes to detect transition types — makes page/page transitions more feasible without SPA hacks.
  • Web compatibility fixes
    • A collection of smaller fixes (ESM loading, timing of scroll vs animation events, unprefixed properties) to reduce cross‑browser surprises.
  • WebRTC improvements
    • Fix remaining interoperability test failures for real‑time audio/video/data channels.
  • WebTransport
    • A modern alternative to WebSockets built on HTTP/3: supports multiple streams, stream priorities, and resilience across network changes (better for mobile, real‑time games, live streaming). Safari support lagging.

Investigations worth watching

  • Accessibility testing standardization (consistent accessibility trees across browsers).
  • JPEG XL investigation — promising image format (animation, alpha, lossless/lossy) under consideration; potential future image format to watch.
  • Mobile testing improvements (dynamic viewport, device behaviors).
  • WebVTT and subtitling/caption handling refinements.

Key takeaways / why this matters

  • Interop 2026 signals browsers committing to parity on many modern, developer‑friendly APIs — meaning less cross‑browser firefighting and more ability to ship features natively.
  • Many improvements shift behavior from JS to declarative CSS/HTML (container style queries, CSS attr(), media pseudo‑classes, custom highlights), simplifying code and SSR/theming workflows.
  • Visual/UI APIs (anchor positioning, scroll animations, view transitions, CSS shapes) are getting much better and more consistent — expect richer, less JS‑heavy animations and UI components.
  • Platform streaming and transport features (fetch readable streams, WebTransport) prepare the web for real‑time, high‑throughput scenarios (AI, live encoding, complex uploads).
  • The web‑platform‑tests links in the interop repo are invaluable: you can inspect the failing tests, understand exact differences, and file or follow bug fixes.

Practical recommendations for developers

  • Try features in Chrome Canary or Edge Canary where many are already implemented; use feature detection and progressive enhancement for wider support.
  • Explore the interop dashboard (fpt.fyi/interop-2026) and the linked web‑platform‑tests to:
    • See exact behavior differences.
    • File or follow bugs for features you depend on.
  • Start experimenting with:
    • Anchor positioning for tooltips/popovers.
    • Container style queries + CSS attr() for component theming (reduce JS).
    • Media pseudo‑classes for custom audio/video UIs.
    • View Transitions and scroll‑driven animations for smoother page/scroll UX.
  • For real‑time apps, watch WebRTC/WebTransport progress and test early where possible.
  • Monitor JPEG XL and accessibility investigation outcomes if you manage assets or need robust accessibility tooling.

Notable quotes / quick insights from Wes & Scott

  • Container style queries “feel like true if‑statements” for CSS.
  • CSS attr() is described as “props in CSS” — attribute values usable directly in styles.
  • contrast() currently returns only black or white (not an arbitrary optimized color).
  • WebTransport uses HTTP/3, supports multiple streams and better resilience across network changes — big win for mobile and real‑time use cases.

If you want to dig deeper, check the episode show notes for links to Interop 2026, the GitHub, and the specific web‑platform tests referenced — great resources for following progress and contributing testing/bug reports.