New Blog Post:

View Transitions: Should you use the new `attr()` or `match-element` for the `view-transition-name`?

Well … It Depends™

https://www.bram.us/2026/06/19/view-transition-name-attr-or-match-element/

New demo: Animated CSS Grid Layout.

https://codepen.io/bramus/pen/ogBYjgm

Here’s the thing, though: No View Transitions. Heck, no JS at all!

Instead, it uses Anchor Positioning to anchor the cell contents to the cell. Then, CSS transitions are used to animate the contents to their new location as the grid re-layouts.

Here's that calc-size() article @argyleink mentioned just now.

https://developer.chrome.com/docs/css-ui/animate-to-height-auto

Animate to `height: auto` is possible nowadays!

#CSSDay

Excited for this talk by @argyleink.

I got a sneak peek yesterday, and this is gonna be gooooodddd! 🤩

#CSSDay

Here's that issue about overscroll areas that @Una just mentioned.

https://github.com/openui/open-ui/issues/1457

I feel like they should probably be defined in CSS. See the issue for my reasoning here.

#CSSDay #OverscrollAreas #OpenUI

@nomster We want your feedback! Write a blogpost, send me a message, etc.

Very eager to hear what your use cases and needs are here 😊

At #CSSDay, we (@nomster and I) did a first public pitch of something we are currently prototyping: a way to add styles based on the active navigation.

Handy for View Transitions, and a few other things.

https://drafts.csswg.org/css-navigation-1/ is a WIP spec, with some bits implemented (behind a flag) in Chrome.

There, I fixed it:

:root {
--masonry: grid-lanes;
}

.container {
display: var(--masonry);
}

#CSSDay #GridLanes #Masonry

YES, Dark Mode Toggles _should_ be a browser feature.

I wrote about this before: https://brm.us/dark-mode-override

Find the link to the Chrome Bug in the post, and hit the star next to it to "upvote" the bug.

#cssday

If you liked Jelle's talk and want to revisit, I have a small section on value processing on my blog (as part of a post on IACVT): https://brm.us/value-processing

#CSSDay

CSS Day, day 1. #cssday

CSS DevRel, The Reunion. #CSSDay #ChromeDevRel

Caption: @argyleink, @Una, and I.

#cssday, day 0.

Tomorrow's gonna be a day of travelling + some meetings at the NL office + setting up our booth at the venue + pre-conf speaker dinner + a final rehearsal (and some last minute changes to the deck)

On Thursday the it's showtime 🤩 #cssday

Ready for this! #cssday

https://cssday.nl/speakers.html#bramus

RE: https://mastodon.social/@cssday/116685419264339242

👀

/ping @sarajw, for your #CSSDay talk 😉

👀 https://github.com/WebKit/WebKit/pull/66078

“[css-images] Add support for light-dark(<image>, <image>)”

✅ Firefox 150
✅ Chrome 150 (Jun 17)
🔜 Safari

Find all info about light-dark with images right here: https://www.bram.us/2026/03/19/more-easy-light-dark-mode-switching-light-dark-is-about-to-support-images/

👀 https://chromium-review.googlesource.com/7853759

“[flex-balance] Enable by default.”

Chrome 150, let’s go! 🎉

@Una I might need to recount, but I think we cover 34 (!!) new #CSS and Web UI features in 45 minutes in this talk.

Every demo shown in the talk has a link, and there's also a ton of links to articles and explainers included throughout.

And yes, we also show compat tables and baseline indicators.

Here's the recording of this year's “What's new in Web UI” talk @Una and I gave at Google I/O earlier this week.

https://youtu.be/uT7MVcCQ4rw

Very happy with how it went, and I think you might find it useful, so give it a watch 😊

#ChromeDevRel #GoogleIO

Half an hour to go before @Una and I take the stage at #GoogleIO to give you an update on CSS and Web UI.

Tune in here: https://io.google/2026/explore/pa-keynote-10

#ChromeDevRel

The one where Ladybird added basic CSS Anchor Positioning support just so it can more accurately run @html5test ’s cssDOOM:

https://github.com/LadybirdBrowser/ladybird/pull/8686

🤩

Blown away by @andremichelle's openDAW, which runs ENTIRELY in the browser! 🤯

https://opendaw.org

So much thought and attention to detail went into this. And it's all Open Source too!

https://github.com/andremichelle/openDAW

The web is AMAZING 🤩

#BTConf

RE: https://mastodon.social/@btconf/116452257783154891

I’ll be at Beyond Tellerrand next week to tick all 4 boxes but I need your help with number 3 … see you there?

Built something cool with HTML-in-canvas?

Go add it to https://github.com/GoogleChromeLabs/css-web-ui-demos/blob/main/html-in-canvas/awesome-html-in-canvas.md, which gathers all demos in one place.

(Only add the stuff **you** built though, not stuff by other folks)

Get the details on @scope here: https://developer.chrome.com/docs/css-ui/at-scope.

Yes, but. #CSS #scope

Over the past years, I’ve written a bunch of posts and done quite a few experiments with View Transitions, such as optimizing the keyframes (so that they animate on the compositor) or driving a VT by scroll.

I noticed I repeated a lot of code while creating all those … so I bundled that all up in a package for you to use as well.

Optimizing the keyframes or a VT for example now is just a one-liner: optimize(transition);

👉 https://chrome.dev/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: 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_.

https://www.bram.us/2026/03/30/css-sticky-per-axis/