Issue 131  December 12th 2025

<dialog> and popover: Baseline layered UI patterns

The <dialog> element and the popover attribute are two Baseline layered UI patterns that developers can reach for instead of custom implementations. To show the advantages of using layered UI patterns built into today's web browsers—and to give an example of when you might reach for <dialog> or use the popover attribute—this article walks through an example of a modal that appears when the user attempts to save an image to a favorites list without being logged in.

Using CSS custom functions

CSS custom functions enable you to create reusable blocks of CSS code that can accept arguments, contain complex logic (defined using features such as CSS if() functions and @media at-rules), and return values based on that logic. They work similarly to CSS custom properties, but provide more flexibility.

In this article, we'll show you how to use them and present some real-world examples.

How To Create an Adaptive SVG Favicon Using the prefers-color-scheme Media Query

Find out how to create an adaptive favicon that automatically switches to a light/dark color scheme using SVG icon format and prefers-color-scheme media query.

Scrollytelling on Steroids With Scroll-State Queries

Unconvinced of the value of scrollytelling? Alright, skeptic, let’s first warm up with some common use cases for scroll-based styling.

CSS Wrapped 2025

Ready to see what we molded in 2025? The Chrome DevRel team will guide you through 17 CSS and UI features that landed on the Web Platform.

The Deep Card Conundrum

Imagine a card that isn’t just a 2D plane, but a container with actual volume. A card that holds a miniature 3D world inside it. When you rotate this card, you don’t just see it skew, you see the elements inside it shift in perspective, revealing their depth. It’s like holding a glass box filled with floating objects.

A pragmatic guide to modern CSS colours - part two

In my previous article on colours, I dove into the practical side of the new colour features for developers who primarily copy and paste values from a design file into their editor.

With all the new colour features that we have in CSS now, we can do more with colours in the browser than designers can do in their design apps, and it opens up a whole world of possibilities.

Why are my view transitions blinking?

When you call document.startViewTransition(), the browser creates pseudo-elements (::view-transition-old() and ::view-transition-new()) that represent the before and after states of your content. The browser then animates between these snapshots, creating smooth visual transitions. You can read more on that here.

I spent more time than I’d like to admit debugging view transitions blinks before understanding what was happening. The API seemed straightforward enough, but my transitions kept flashing. Here’s what I learned, so you don’t have to repeat my mistakes.

Creating Scroll-Based Animations in Full view()

The CSS animation-timeline property accepts a view() function which, in turn, returns a timeline of how much of an element is visible in the part of a scroll container that’s viewable (formally known as a scrollport). In other words, rather than letting an animation run a linear progression based on how much time has elapsed, view() runs animations based on the visibility of the animated element within a scrollport.

I like to equate it as the CSS version of JavaScript’s Intersection Observer. We can run an animation on an element as that element enters and exits the scrollport.