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]

@ericvanholtz Settings → Apps → Safari → Advanced → Feature Flags

(You need to SCROLL DOWN in the "Advanced" screen because "Feature Flags" is _cleverly_ positioned below the fold)

[Bramus @bramus]

Device Posture API on the iPhone Duo: check! 🎉

Live demo: https://t.co/4pDbdKvA4v

(It’s behind a feature flag … and that is a bit hidden in the 27.1 Simulator because the “Feature Flags” option is placed below the fold)

[Bramus @bramus]

@kurtextrem @penzington Do I see a box-shadow there? If so then I think that is more of the culprit here …

[Bramus @bramus]

@kshep92 @claviska Custom Selectors can do that.

It's not in any browser, though.

[Bramus @bramus]

@jantimon @argyleink https://t.co/Bn2oyJUs6I ;)

[Bramus @bramus]

@dannievinther I’m not 100% familiar with that one, and I’m not sure either if it’s working or not (a `CSS.supports(…)` returns false). Could you file a bug on https://t.co/yiWifDX9ti? Thanks!

[Bramus @bramus]

We already did an initial pitch of this at @CSSDayConf back in June, and a quick read of the room confirmed we were on to something.

More feedback can’t hurt of course, so please reach out (or leave a comment at the CSSWG issue) if you have _any_ feedback 😊

[Bramus @bramus]

One of the things that we at Chrome have been thinking about is a way to do declarative route and navigation matching **in CSS**.

Together with @nomsternom and @davidbaron I’ve been working on it, and next week we’ll be presenting our work at the CSSWG F2F meeting.

[Bramus @bramus]

In https://t.co/ENzBG6PJp5 I jotted down a quick intro to the core concepts:

1. Define Routes with @route
2. Query the navigation with @navigation
3. Select the navigation trigger with :nav-source
4. Advanced link selection with :link-to()

(+ url-pattern() woven throughout)

[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))