Modern CSS at Scale with Bramus

🎧 New Señors @ Scale Episode

This week, I spoke with Bramus Van Damme, a Chrome Developer Relations Engineer at Google, about how new CSS features are fundamentally changing the way we build user interfaces at scale.

Bramus has been building the web since the late 90s, when he first discovered "view source". He now sits at the intersection of web developers, Chrome engineers, and the CSS Working Group. In this episode, we unpack the new era of CSS features that are moving animations and complex UI patterns off of JavaScript and into the native platform.

⚙️ Main Takeaways

1. View Transitions create seamless, app-like experiences

View Transitions allow you to add rich animations when swapping between two different views of a website. This is done by identifying and morphing elements that appear on both the old and new pages, such as a movie poster growing from a thumbnail into a large photo on a detail page.

• How it works: The browser calculates the delta between two states (DOM dips) and animates the change.
• Best Practice: Don't overdo it. Respect the user's prefers-reduced-motion setting by using a crossfade instead of excessive sliding motion.
• Framework Integration: Features like View Transitions required close contact with teams like React to ensure compatibility with their internal virtual DOM and batching logic.

2. Scroll-Driven Animations are natively performant

Scroll-Driven Animations (SDA) allow you to link an element's animation progress directly to the scroll offset of a container using only CSS.

• Performance Advantage: Unlike traditional JavaScript scroll listeners, which run on the main thread and cause "jank", CSS-based SDAs run on the compositor thread (GPU).
• Current Status: SDAs are now supported in Chrome and Safari (as of Safari 26).
• What's Next: The successor feature, Triggered Animations, is in Chrome Canary. It allows time-based animations to run once you cross a specific scroll offset, supporting entry and exit animations.

3. Anchor Positioning is the CSS fix for Popovers and Tooltips

Anchor Positioning allows an element (like a popover or tooltip) to be tethered and positioned relative to a source element (the anchor) using only CSS. This removes the need for complex, manual JavaScript calculations.

• Easy Positioning: Developers can use keywords like position-area: top span left to easily dictate the popover's position relative to the anchor.
• Status: It's shipped in Chrome and Safari, with Firefox at 71.5% compliance as part of the Interop 2025 effort.

4. Custom CSS Functions and Mixins are turning CSS into a "true" programming language

The introduction of Custom Functions allows developers to build their own functions (prefixed with --) that accept arguments and return a single output value using a block of pure CSS.

• Example: It allows for a custom light/dark function that works with any CSS value (not just colors) by using @media (prefers-color-scheme: dark) inside the function body.
• Mixins: Mixins are the next step, allowing a function-like structure to return a bag of multiple properties. This core concept, borrowed from preprocessors like Sass, is now being natively built into the language.

5. Chrome DevRel and Interop are driving cross-browser consistency

Bramus’s role in Developer Relations (DevRel) acts as a translator, voicing the needs of web developers (gathered from surveys like the State of CSS and conferences) to the Chrome engineering teams.

• The Interop Effort: Interop is a collaboration between browser vendors (Chrome, Safari, Firefox) to prioritize and ensure consistent, high-quality implementations of key platform features across all engines.
• Prioritization: Feature work is largely driven by the voice of authors. For example, the long-standing difficulty of styling forms (like the <select> element) led to the development and implementation of the customizable select and, later, specifications for easier styling of all form controls.

🧠 What I Learned

• Jank avoidance is the primary driver for new CSS animation features. Any animation involving non-geometric changes (like opacity or transform: scale) can run on the compositor, but changes to width and height currently force the animation onto the main thread.
• The concept for View Transitions was being incubated for over five years, with the idea of shared transitions first discussed around 2016-2018.
• Bramus's coolest demo combined Scroll-Driven Animations with View Transitions by starting the transition, then pausing its underlying CSS animations, and finally mapping the scroll position delta to control the animation's progress time.
• Developers should be vocal about missing or difficult platform features, as DevRel relies on this feedback (complaints, demos, blog posts) to champion new standards to the CSS Working Group.

💬 Favorite Quotes

"You swap out my Lego bricks for HTML bricks basically back then."
"Sometimes one declaration can replace 20 lines of JavaScript code or maybe 200 lines of JavaScript code."
"View transitions will automatically morph from the one thing to the other thing."
"If your browser doesn't support scroll-driven animations, well, you just get the thing without the scroll-driven animation. I think this is like a perfect progressive enhancement."
"The key benefit of using scroll-driven animations in CSS... is that they are built on top of CSS animations and web animations. And those animations, they know how to run stuff on the compositor."
"The web always catches up."

🎯 Also in this Episode

• Bramus's start in web development in the late 90s using Notepad.
• The power of CSS Selectors (including :has(), :not(), and :nth-child()).
• The time it takes for a feature to land across all browsers (from 3 months up to 10 years).
• The timeline of the customizable select feature (over six years of incubation).
• Why width and height animations often run on the main thread and how Chrome is optimizing this.
• Triggered Animations (the logic successor to SDAs) that run a time-based animation once a scroll boundary is crossed.
• The new CSS inline if() function that aids in building custom functions.

Resources

More from Bramus:
Bram.us (Bramus's Blog)
Scroll-Driven Animations Course
Scroll-Driven View Transition Demo (on CodePen)
Talk on Scroll-Driven View Transitions

Tools and Colleagues:
Anchor-Tool.com (by Una Kravets)
Una Kravets' Blog
Adam Argyle's Blog
Piccolill.li (Blog recommendation)
WPT.FYI (Web Platform Tests dashboard for Interop)

🎧 Listen Now

🎧 Spotify
📺 YouTube
🍏 Apple Podcasts

Episode Length: 53 minutes on the native browser features that are replacing JavaScript for UI, performance, and cross-browser consistency.

Happy building,
Dan