I recreated the Google Antigravity website with Modern CSS.

If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short).

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal) <dialog> is open.

A while ago I joined Dan Neciu – whom I met at Frontmania in 2023 – on his “Señors @ Scale” podcast. We talked about all things CSS.

Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed ancho

By using two sequential View Transitions when intercepting links with the Navigation API – one in the precommitHandler and one in the regular handler – you can fake a Two-Phase View Transition today!

Chrome no longer forces width/height animations to run on the Main Thread, in case those values don’t actually change throughout an animation.

How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …

There’s a new type of CSS scroll-state query coming: scrolled

I built something that I needed into DevTools: debugging support for CSS @starting-style rules.

Which version of what browser supports which feature of View Transitions?

The CSS Podcast is back! Together with Una I’m co-hosting season 5 of the show, and we have some good episodes coming your way …

Check out the post I wrote for developer.chrome.com to learn what changed for View Transitions in 2025.

CSS Custom Functions (@function) + CSS if() + CSS color-scheme() = one sweet combo!

If you thought we were done with View Transitions, guess again! A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM. We are actively looking for feedback on this one.

A new View Transitions-related feature we shipped in Chrome 140 is the ability to nest ::view-transition-group() pseudos. This is useful for retaining visual effects such as clipping, move elements as part of a group, etc.

At Middlesbrough Front End 2025 I gave a talk about some of the more exotic applications of View Transitions

At JSHeroes 2025 I gave a talk in Scroll-Driven Animations.

Slides + Recording of the talk “Supercharge Web UX with View Transitions” I gave at WebExpo.

For this year’s Google I/O, I recorded the session “Web animations today and tomorrow”. Check it out to learn how to guide, inform, and delight users by adding subtle and supportive animations to your web UIs.

Instead of duplicating an animation on the ::view-transition-group pseudo, you can also rely on CSS transitions on the original element … if you’ve set it up correctly.

In April I attended #BlinkOn, the conference for web platform contributors in the Chromium open source project. At the conference I gave a presentation about “CSS Parser Extensions”, a wild idea I have to fix CSS polyfilling once and for all. If you didn’t know, polyfilling CSS features is extremely hard, mainly because the CSS Parser discards what it does not understand. So what if, instead of having authors write their own parser and cascade to polyfill a CSS feature, they could teach the parser some new tricks?

After a wonderful week in San Francisco and Mountain View, the week ended in a disaster when my colleague and friend Adam was told to find another role at Google – Roughly translated: they fired him without actually firing him.

To smoothly animate things like borders as part of a View Transition, you need to duplicate that animation onto the ::view-transition-group. For best effect, have the View Transition separately capture the background and foreground of the element you’re animating.

New in Chrome 134 on Android: the ability to place the Address Bar (aka “Omnibox”) at the bottom. To enable it, go to Chrome’s Settings, locate and tap “Address Bar”, and choose “Bottom”.

Beware when manipulating the coordinates of the View Transition’s ::view-transition-group(*) pseudo. Depending on where you read those coordinates from, you might end up with layout jumps when writing them back. This post details the pitfalls and how to deal with them, unlocking more performant animations on the ::view-transition-group() pseudo along the way.

Martin Winkler published a package that polyfills Element.matchContainer to get notified in script when a Container Query matches/unmatches. Under the hood, it uses a StyleObserver.