Bramus's Avatar

Bramus

@bram.us

Chrome DevRel at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us. Lives in Belgium.

9,423
Followers
382
Following
1,502
Posts
08.05.2023
Joined
Posts Following

Latest posts by Bramus @bram.us

Also, I’m working on something to automate this all for you …

bsky.app/profile/bram...

😉

07.03.2026 08:49 👍 2 🔁 0 💬 0 📌 0
Preview
View Transitions Applied: Dealing with the Snapshot Containing Block 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...

My approach there only works with elements that don’t change size between the old and new state though.

To deal with that, throw more code at it and extract the needed info from the generated keyframes. Then adjust the `transform` with that info.

See www.bram.us/2025/03/04/v... for details.

07.03.2026 08:46 👍 2 🔁 0 💬 1 📌 0
Preview
View Transitions Applied: More performant ::view-transition-group(*) animations If the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot you can optimize its keyframes so that it animates on the compositor.

Yep, `translate` is the one to manipulate.

It’s the same approach I use in www.bram.us/2025/02/07/v... to make the keyframes more performant, allowing the animations to run on the compositor.

07.03.2026 08:46 👍 0 🔁 0 💬 1 📌 0

But `:not(:granted)` _is_ `:denied`.

```
geolocation {
/* Shared */

&:granted {
/* Styles when granted */
}

&:not(&:granted) {
/* Styles when denied */
}
}
```

06.03.2026 09:23 👍 0 🔁 0 💬 0 📌 0
Preview
The Big Gotcha of Anchor Positioning As it stands, you have to think about the layout engine and whether an element is

The Big Gotcha of Anchor Positioning

As it stands, you have to think about the layout engine and whether an element is "fully laid out" before an anchor is allowed to apply to it. Boooooo.

06.03.2026 08:39 👍 10 🔁 1 💬 1 📌 1

For the “not granted” styling you can use the `:not()` selector: `&:not(:granted)`

06.03.2026 09:06 👍 0 🔁 0 💬 1 📌 0
Preview
Request for developer feedback: focusgroup  |  Blog  |  Chrome for Developers Try out focusgroup and comment on the proposal.

Open UI has been working on speccing out the focusgroup attribute: a declarative way to support roving focus & add keyboard nav to composite widgets like toolbars/menus

We'd love your feedback!

Learn more & see open questions: developer.chrome.com/blog/focusgr...

H/t to Edge folks for prototyping

05.03.2026 16:54 👍 68 🔁 20 💬 6 📌 2

🥌👈

05.03.2026 15:10 👍 4 🔁 0 💬 1 📌 0

“There’s also a sister method…”

I guessed `.rar()`. I was wrong.

05.03.2026 14:33 👍 14 🔁 0 💬 1 📌 0
Incomplete List of Mistakes in the Design of CSS - CSS Working Group Wiki

w3c.github.io/csswg-wiki/i....

> # Incomplete List of Mistakes in the Design of CSS
>
> * …
> * `border-radius` should have been `corner-radius`.
> * …

04.03.2026 15:13 👍 3 🔁 0 💬 1 📌 0

This is AMAZING!

Very nicely done, and GREAT to see so many new/recent technologies being used to achieve this – all with a PE mindset approach.

⭐️⭐️⭐️⭐️⭐️ 5/5

04.03.2026 14:38 👍 2 🔁 0 💬 1 📌 0
Preview
Putting my money where my mouth is: a redesign built on progressive enhancement | utilitybend A look at how utilitybend.com was redesigned using progressive enhancement with modern CSS features like view transitions, corner-shape, @property, scroll-state queries, and anchor positioning.

🚀 I always talk a big game… “you can do this as a progressive enhancement.” Time to put my money where my mouth is! 💸
In recent months, I’ve updated my site with a range of new features. It is rock-solid across all modern browsers and is finally live! With a story 📖:

04.03.2026 14:22 👍 17 🔁 4 💬 2 📌 0

When in doubt, just say “Iteratorable”.

04.03.2026 10:12 👍 10 🔁 0 💬 1 📌 0

Brilliant! 🤣

04.03.2026 09:30 👍 0 🔁 0 💬 0 📌 0

No clue, but it seems to be consistent across browsers …

03.03.2026 18:55 👍 0 🔁 0 💬 1 📌 0
Preview
Get features faster with Chrome's two-week release cycle  |  Blog  |  Chrome for Developers From September 2026 Chrome releases will be every two weeks.

Chrome is moving to a 2-week release schedule!

(previously 4 weeks)

developer.chrome.com/blog/chrome-...

03.03.2026 18:30 👍 35 🔁 3 💬 4 📌 2
Photo of Roy of the Ravers's album "2 Late 4 Love" (ACIWAX 90) featuring the stellar track "Emotinium".

Photo of Roy of the Ravers's album "2 Late 4 Love" (ACIWAX 90) featuring the stellar track "Emotinium".

A bit too much of that goa/psy-like sound for my liking TBH.

Winging back to the 303: look at this beautiful new record I picked up in London just last weekend … 😊

album.link/i/1677881270

03.03.2026 13:33 👍 1 🔁 0 💬 1 📌 0

Classic 🙌

03.03.2026 11:29 👍 1 🔁 0 💬 1 📌 0
Public Energy - Three O' Three ( 1993 )
Public Energy - Three O' Three ( 1993 ) YouTube video by Novumsquare

** pumps fist in the air **

03.03.2026 11:00 👍 0 🔁 0 💬 1 📌 0

Related: When installing a fullscreen PWA (with `viewport-fit=cover`) on Android it … does not go fullscreen (🤦‍♂️)

👉 You might want to give issues.chromium.org/issues/40742... an upvote if you, like me, would like to see that changed.

03.03.2026 10:43 👍 0 🔁 0 💬 1 📌 0
Fronteers Belgium meetup on 12/03/26 at the offices of Craftzing in Ghent
Guest talks from: 
- Iben Van de Veire on Virtual DOM vs ChangeDetection, keeping your view up to date
- Karel De Smet on Your password has been breached!

Fronteers Belgium meetup on 12/03/26 at the offices of Craftzing in Ghent Guest talks from: - Iben Van de Veire on Virtual DOM vs ChangeDetection, keeping your view up to date - Karel De Smet on Your password has been breached!

Join us for the Fronteers Belgium relaunch🚀!
It’s going to be an evening packed with knowledge, connection, and a few surprises. 👀🍿

Grab your spot and join your fellow developers for a night of learning
👉 www.meetup.com/fronteers-be...

#fronteersBelgium #BeTech #frontendmeetup

03.03.2026 09:31 👍 2 🔁 1 💬 1 📌 0
I wish there was a (simpler) way to highlight text in inputs When I was building the search engine for my blog, one feature I wanted to implement was syntax highlighting within the search input field. I wanted special operators (i.e. ...] [

When I was building the search engine for my blog, one feature I wanted to implement was syntax highlighting within the search input field. I wanted special operators (i.e.
[...]

03.03.2026 08:42 👍 4 🔁 1 💬 0 📌 0

`position: fixed` can fix most of these.

Also see Temani's article he's already shared.

02.03.2026 23:13 👍 3 🔁 0 💬 1 📌 0
Video thumbnail

On my way back home from #SotB2026 I hacked my way into animating between `position-area` values with View Transitions.

Demo + details can be found on my blog: www.bram.us/2026/03/02/a...

It’s not 100% perfect though, as Firefox doesn’t do anything and Chrome has a 1-frame glitch.

02.03.2026 22:28 👍 41 🔁 2 💬 1 📌 0

Deal!

02.03.2026 19:47 👍 2 🔁 0 💬 0 📌 0

Dude, and you couldn't drop a small hint this weekend? Congrats! 🥳👏

02.03.2026 19:25 👍 3 🔁 0 💬 1 📌 0
Advanced Range Input Component

I should do some small screen enhancements next. But I was able to update my multi-thumb range sliders with code samples showing how I vision HTML, styling and custom JS for native workings.

Should probably write an update on it soon. brechtdr.github.io/enhanced-ran...

02.03.2026 18:27 👍 5 🔁 4 💬 3 📌 0
Screenshot of Safari 26.4 beta.

Screenshot of Safari 26.4 beta.

interop-2022-viewport.netlify.app/individual/s...

The viewport should extend to the top and bottom edges of the screen here, allowing the lime lines to be placed against those edges.

02.03.2026 16:54 👍 0 🔁 0 💬 1 📌 0
Video thumbnail

It seems we can now customize the select element, right? right?!

Demo: codepen.io/t_afif/pen/P... via @codepen.io

02.03.2026 13:44 👍 369 🔁 82 💬 11 📌 13
Preview
March meetup, Wed, Mar 25, 2026, 7:00 PM | Meetup **March Meetup — devs.gent** **Location:** iO \| Digital Agency\, Raymonde De Larochelaan 15\, Gent **Hosted by:** The devs.gent team **Food & drinks provided** Come hang o

Don't miss the Devs.gent CSS & UI #meetup later this month! 🚀 We’re diving deep into View Transitions with @bram.us , and I’ll be taking the stage to experiment with some new ideas. It’s an opportunity to learn great things and to witness me tripping over some words 😀 www.meetup.com/devs-gent/ev...

02.03.2026 12:48 👍 4 🔁 2 💬 0 📌 0