Bramus @bramus X Profile

Bramus

@bramus

Followers

14K

Following

14K

Media

5K

Statuses

51K

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

https://t.co/bOtu6cN81G

Belgium

Joined September 2007

Don't wanna be here? Send us removal request.

Bramus

@bramus

2 months

(You know the good stuff is happening on bsky, right?)

4

3

21

Una 🇺🇦

@Una

6 days

The #CSSPodcast is back! 💕🎙️ Join @bramus and I this season as we talk about a bunch of awesome new CSS features, starting with custom functions and if() https://t.co/y2oSjjNnkJ

3

5

42

Bramus

@bramus

10 days

A lot has happened since Chrome shipped Same-Document View Transitions in 2023. In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support. As for 2025: https://t.co/oDZ6tv9Nib 🤩

developer.chrome.com

An overview of what changed for View Transitions in 2025

1

6

32

Bramus

@bramus

1 month

(Still is …)

0

2

Bramus

@bramus

1 month

If you thought we were done with View Transitions, guess again! Chrome is working on “Scoped View Transitions” which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent VTs and prevents layering issues. Thread on 🦋: https://t.co/io0D4LuBqB

13

17

255

Brandon McConnell

@branmcconnell

2 months

If you've been sleeping on CSS scroll-driven animations… WAKE UP Bramus's course breaks down everything you need to know about CSS scroll-driven animations, whether you're using plain HTML, CSS, and JS or a JavaScript framework like React, Vue, Svelte, etc Thanks @bramus! 🔗👇

Bramus

@bramus

1 year

🚀 LAUNCH DAY 🚀 Introducing “Unleash the Power of Scroll-Driven Animations” – a 10-part video course that teaches you all there is to know about scroll-driven animations with CSS or JavaScript. https://t.co/fuKABcNpcI

1

2

12

Bramus

@bramus

2 months

Remember when Chrome made its first public appearance? I do!

Bramus

@bramus

17 years

Google Chrome een beurt geven

5

1

47

Bramus

@bramus

2 months

(It really is)

1

0

4

Domenic Denicola

@domenic

2 months

We just merged @nomsternom's work on deferred commit into the @htmlstandard navigation API: https://t.co/A0oHvfctBW. See https://t.co/RayCuY6ug5 for more detail. This lets you run async JS code before a navigation commits, and redirect if necessary.

github.com

This adds navigateEvent.prototype.intercept({precommitHandler}). Instead of always "committing" the navigation immediately, the navigation only commits after all its precommitHand...

2

7

22

Jake Archibald

@jaffathecake

2 months

View Transitions are enabled by default in Firefox Nightly, so they're on their way to stable. Give it a test with your current transitions, and give me a shout if anything doesn't look right.

8

24

205

Lea Verou, PhD

@LeaVerou

2 months

To add to @bramus's question: What "queries" would you use it with? E.g. - first input descendant - closest name=foo sibling - input within the same <tr> etc Don't think just <label for>/ARIA but all attributes that take ids, e.g. list, commandfor, popovertarget + component

Bramus

@bramus

2 months

🙋‍♂️❓ Using attributes like `for` require you to reference another element using that element’s `id`. E.g. `<label for="x"></label> … <input id="x">` Do you wish you had another way to refer to another element on the page, without needing an id? If so, what would you want?

3

11

Emil Kowalski

@emilkowalski_

2 months

An easy way to make your dropdowns feel better is to make them origin-aware. They should scale in from the trigger. In this case, `transform-origin: top left`. The default is `center` which feels wrong, as it appears out of nowhere.

19

84

2K

Lubrsi

@Lubrsi

2 months

I've implemented enough of the Gamepad API with SDL3 in @ladybirdbrowser to be able to connect a controller and play a racing game with it! 🎮🐞

5

16

239

Una 🇺🇦

@Una

2 months

🥳 CSS functions have arrived!!! 🥳 And they are *AWESOME* Now, you can do things like this: @function --alpha(--color, --opacity) { result: rgb(from var(--color) r g b / var(--opacity)); } div { background: --alpha(red, 80%); } (*arrived = in the latest stable Chrome)

60

169

1K

Bramus

@bramus

2 months

🙋‍♂️❓ Using attributes like `for` require you to reference another element using that element’s `id`. E.g. `<label for="x"></label> … <input id="x">` Do you wish you had another way to refer to another element on the page, without needing an id? If so, what would you want?

20

3

47