Skip to main content
Syntax

965: Baseline 2025 Features web gained in 2025

26 min episode · 2 min read

Episode

26 min

Read time

2 min

AI-Generated Summary

Key Takeaways

  • View Transitions API: Animate DOM elements between positions using document.startViewTransition with custom easings, enabling smooth transitions for card shuffles, hamburger menus, and SPAs without complex JavaScript animation libraries or manual state management across all modern browsers.
  • Popover with Anchor Positioning: Build tooltips and dropdowns declaratively using popover attribute and popover-target on buttons, placing elements on the top layer above z-index stacking contexts, eliminating React portal needs though anchor positioning still requires Firefox flag until 2026.
  • Starting Style with Allow-Discrete: Animate display property changes from none to block by combining starting style declarations with transition behavior allow-discrete, enabling CSS-only modal and drawer animations that gracefully degrade to instant display in unsupported browsers.
  • Content Visibility Auto: Defer rendering of off-screen elements to improve initial page load performance, with Facebook engineers measuring 250 millisecond improvements on cached views, though surgical application with testing prevents layout shift issues from overuse across entire pages.

What It Covers

Scott and Wes review Baseline 2025 features now available across all browsers, covering 24 new APIs including view transitions, popover elements, CSS absolute value function, and content visibility controls for web developers.

Key Questions Answered

  • View Transitions API: Animate DOM elements between positions using document.startViewTransition with custom easings, enabling smooth transitions for card shuffles, hamburger menus, and SPAs without complex JavaScript animation libraries or manual state management across all modern browsers.
  • Popover with Anchor Positioning: Build tooltips and dropdowns declaratively using popover attribute and popover-target on buttons, placing elements on the top layer above z-index stacking contexts, eliminating React portal needs though anchor positioning still requires Firefox flag until 2026.
  • Starting Style with Allow-Discrete: Animate display property changes from none to block by combining starting style declarations with transition behavior allow-discrete, enabling CSS-only modal and drawer animations that gracefully degrade to instant display in unsupported browsers.
  • Content Visibility Auto: Defer rendering of off-screen elements to improve initial page load performance, with Facebook engineers measuring 250 millisecond improvements on cached views, though surgical application with testing prevents layout shift issues from overuse across entire pages.

Notable Moment

The hosts demonstrate how base64 to uint8array conversion reduces DOM memory usage significantly by storing binary data as typed arrays instead of massive strings, then creating blob URLs that multiple image elements can reference efficiently.

Know someone who'd find this useful?

You just read a 3-minute summary of a 23-minute episode.

Get Syntax summarized like this every Monday — plus up to 2 more podcasts, free.

Pick Your Podcasts — Free

Keep Reading

More from Syntax

We summarize every new episode. Want them in your inbox?

Similar Episodes

Related episodes from other podcasts

This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.

You're clearly into Syntax.

Every Monday, we deliver AI summaries of the latest episodes from Syntax and 192+ other podcasts. Free for up to 3 shows.

Start My Monday Digest

No credit card · Unsubscribe anytime