Mid May, at this year’s Google I/O, Una and I gave a talk “What’s new in Web UI” live at Shoreline in the Chrome tent.

In May I spoke at the 10th (and final 😔) edition All Day Hey! in Leeds, UK. I opened the conference with a talk on View Transitions.

Back in April I went to Beyond Tellerrand in Düsseldorf. I initially planned on going as an attendee, but when organizer Marc asked me to speak I couldn’t say no …

While we’ve accepted that websites don't need to look the same everywhere, we seem to be stuck on a new hurdle: the idea that websites need to function the same everywhere.

At CSS Day, “YouTube guy” Kevin Powell showed a lot of demos that relied on the advanced attr() function. In one of the examples he used attr() to set view-transition-name values — a technique I covered in my article on advanced attr() function.

But then during the Q&A, Cyd Stumpel wondered if he couldn’t just use match-element there.

The short answer to that question is yes. The longer answer is … It Depends™

Over the past years, I’ve published a bunch of View Transitions contents: articles, talks, demos, etc. I’ve also done a bunch of more experimental things with them, such as optimizing the keyframes or driving a View Transition by scroll.

What I noticed while doing all those experiments is that I repeated a lot of the code … and they were scattered a bit all over the place as well. So I bundled that all up in a package: view-transitions-toolkit.

If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the reality was that only one of both would stick.

A recent change to CSS fixes this: position: sticky now plays nice with single-axis scrollers, allowing you to have sticky elements that track different scroll containers on different axes. This change is available in Chrome 148.

Talk on View Transitions, given at the devs.gent March meetup

CSS light-dark() is being extended to support images.

Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). Fast forward to today, and the CSS Conditional Rules Module Level 5 specification has solidified how this feature works and Chromium (Chrome, Edge, etc.) is about to ship it in Chromium 148!

View Transitions are a powerful Modern Web feature allow for smooth seamless animated transitions two between different states of a web page. They can make for a much more pleasant user experience, but as with any new web platform feature, browser support is not yet fully universal so you need to add some fallback logic to your code.

view-transitions-mock bridges that gap by polyfilling the full JavaScript API surface of Same-Document View Transitions, without the animation bits.

CSS Anchor Positioning is a powerful tool, but one of the things that you cannot do natively (yet) is animating the position-area property. This blog post introduces a technique to animate position-area changes using View Transitions.

Talk on CSS Anchor Positioning

Talk on CSS Anchor Positioning.

Vertical Tabs are available behind a flag in Chrome 145 (current beta)

From Chrome 145 onwards, 100vw will automatically subtract the size of the scrollbar from it if you have forced the html element to always show a scrollbar (using overflow{-y}: scroll) or have it reserve space for a scrollbar (using scrollbar-gutter: stable).

If you gloss over the Safari release notes – like the Safari 26.2 release notes – you see a lot of trailing “(12345678)”-mentions in the list of fixed bugs. These numbers are the internal bug IDs, as used within Apple’s internal bug tracker fka “Radar” (now Feedback Assistant).

These numbers are not linked to anything because Radar is an Apple-internal tool, so to external people these numbers are practically useless … or are they?

We have Scroll-Driven Animations. Now say hi to Scroll-Triggered Animations.

Once again, it has been an AMAZING year for CSS and UI. To celebrate this, we – the Chrome CSS/UI DevRel Team – created another edition of CSS Wrapped!

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?