Bramus

Chrome DevRel at Google (CSS + Web UI). @CSSWG Member. Former University Lecturer. PADI Divemaster. Blogs at @bramusblog. You should follow me on Bsky 🦋.

[Bramus @bramus]

(You know the good stuff is happening on b​sk​y, right?)

[Bramus @bramus]

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

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

And yes, we also have compat tables + baseline indicators throughout.

[Bramus @bramus]

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://t.co/XqmGnyD3u5

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

#ChromeDevRel #GoogleIO

[Bramus @bramus]

@scott_c_dev @Una Oh, good catch; thanks! I deployed a fix just now :)

[Bramus @bramus]

@kurtextrem @fabiospampinato A third benchmark for `:is(.matching-class):first-child` would be needed here. My expectation is that it would perform the same as the nested version, which would explain things.

(Also: 76 match attempts at 0.053ms is pretty much neglible in the grand scheme of things)

[Bramus @bramus]

The past years I’ve done a bunch of experiments with View Transitions, such as optimizing the keyframes or driving them by scroll.

I noticed I repeat a lot of code throughout those experiments … so I bundled that all up in a package.

👉 https://t.co/RHqq3DMJJD

[Bramus @bramus]

@UtterDonkey @Arif_hossain921 This is a known shortcoming, and looking at the comments I believe you've already found your way to the bug.

https://t.co/gSHXPpLXs3

The bug is currently assigned which means someone is working on it.

[Bramus @bramus]

🗣️ PSA: Chrome on Android is getting an upgrade and will support edge-to-edge from Chrome 135.

Here’s all you need to know to migrate your website to support edge-to-edge: https://t.co/K8WOVKlvXC

(Be sure to check this guide if you have `position: fixed` content at `bottom: 0`)

[Bramus @bramus]

@clckkkkk @theo It’s getting better and better with each build … have you tried 147 yet?

[Bramus @bramus]

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

1. Go to `chrome://flags/#vertical-tabs`
2. Set it to enabled
3. Relaunch Chrome
4. Right click the tabbar and choose “Move Tabs To The Side”

Attached are before and after screenshots.

[Bramus @bramus]

@wesbos Chrome 138

https://t.co/fzyBQQXuvM

[Bramus @bramus]

More things you’ve missed:

- view-transitions-mock, a non-visual polyfill for Same-Document View Transitions

- Element-Scoped View Transitions excitement (see video)

- All DevTools can’t properly deal with scrollbars in the Box Model.

The sky is bluer on the other side 😉

[Bramus @bramus]

(You know the good stuff is happening on b​sk​y, right?)

[Bramus @bramus]

Some more things you’ve missed while being here instead of there:

- Dynamic connections with CSS anchor() using REAL borders demo.

- Sneak Peek: Retargetable View Transitions (aka Interruptible View Transitions) demo

- CSS-only Scroll-Triggered Animations

[Bramus @bramus]

@filos That’s the current Chrome Canary.

(Note that using Chrome Canary as your daily driver can be risky, so maybe it’s best to wait until that version reaches Chrome Beta (or Chrome Stable))

[Bramus @bramus]

UPDATE: Looks like the flag is no longer available in Chrome 145. You can still find it in Chrome 146 though :)

[Bramus @bramus]

ICYWW:

- Yes, you can resize the sidebar (and can even collapse it to a minimal state).

- Yes, it plays nice with Tab Groups.

[Bramus @bramus]

@kaimnsrvr Hmm, looks like the flag is no longer available in Chrome 145. You can still find it in Chrome 146 though :)

[Bramus @bramus]

@k_grajeda @jrgarciadev Awesome! 🤩

[Bramus @bramus]

@theo Good feedback, I appreciate it. Thanks!

As for the laggy animation: have you tried Chrome 146 (current Chrome Dev and Canary) yet? AFAICT the feature is doing much better in those versions.

[Bramus @bramus]

@Mr_Jfranklin That would be a bug, as it goes with flagged experimental features :)

I am mainly using Chrome Canary (146) which seems to do much better with this feature, so you’ll have to wait another release (or use Chrome Canary – which comes with its own challenges – or Chrome Dev)

[Bramus @bramus]

@Dmitry31571105 No loose nesting, but it does play nice with the Tab Groups feature.

[Bramus @bramus]

@Dalton_Walsh I’ve heard several requests about this before, so I’m sure it will please a lot of folks out there.

(Personally I’m also sticking to horizontal ones … for now)