What are the key takeaways from this Syntax episode?

Key insights include: **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.

How long is this episode of Syntax?

This episode is 26 minutes long. SignalCast provides an AI-generated summary so you can get the key insights in about 3 minutes.

Syntax

965: Baseline 2025 Features web gained in 2025

December 22, 2025

26 min episode · 2 min read

Episode

26 min

Read time

2 min

Topics

Leadership, Software Development, Psychology & Behavior

AI-Generated Summary

Published Dec 22, 2025

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?

Episode Transcript

The end of 2025 is here, and the browser gained so much cool stuff. We're gonna be talking about what we gained in 2025 for baseline on this episode of Syntax. My name is Scott Tylinski. I'm a developer from Denver. With me, as always, is Wes Bos. What's up, Wes? Hey. Yeah. Baseline is like a project from Google, and Google started it, but, basically, it's all the, like, the the web industry. And and baseline is this idea that you aim to show what features are usable today or or usable now. Not like, you know, you go to, can I use, and everyone's like, oh, but, like, Samsung Internet from fifteen years ago doesn't support this? And it's kinda hard to just glance at that and see if you can use it. Whereas baseline will just tell you, like, newly available or, like, go for it, son. You know, you can you can use this thing. So baseline twenty twenty five, these are features that were added to every they they may have been added previously, but these are features that you can use today because they are part of baseline twenty twenty five. They are in all browsers. Yes. And if you have to support Internet Explorer five today or whatever, this ain't for you. L in the comments for IE supporters. Is anyone I'm curious if anyone is still supporting IE at all. Oh, I can't imagine. I can't imagine. I'm sure there's some, like, weird, like, embedded devices that have to support, like, a eight year old version of Chrome or something odd like that, but not as common. Yes. Not as common. Alright. Let's get into it, Wes. What do you got for me? Yeah. So there is 24 new APIs. We'll link up the the actual list of them. Some of them not interesting at all, and some of them are are pretty exciting. So we're gonna explain what they are. So first one is same document view transitions. So view transitions in CSS allow you to essentially transition anything. Right? Like, we're we're used to putting a transition on something and you can, like, transition the the width or the height or the opacity, you know? But when you wanna transition something from one spot to another, it's it's not always doable. So I I built this right here, which is this is woo. Can you can you guess what this is right here, Scott? Can I guess? Maybe what do you mean can I guess? Can you like, what do you think what do you think this is built in right here? What do I think this is built in? I'm gonna say view transitions. Yes. This is you got it right. So this is For people who are not seeing, there's a bunch of squares jumbling around on screen Yeah. Of of Wes's video, just for the audio listeners so they're not wondering what the hell we're talking about. …

Get the full transcript (4,781 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.

Browse all Syntax transcripts →