Bramus
@bram.us
Chrome DevRel at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us. Lives in Belgium.
VS Code pro-tip: check the `@id:chat.disableAIFeatures` setting.
(It’s more getting in the way than helping me, so better to just get rid of it all together)
(It’s more getting in the way than helping me, so better to just get rid of it all together)
November 6, 2025 at 3:54 PM
VS Code pro-tip: check the `@id:chat.disableAIFeatures` setting.
(It’s more getting in the way than helping me, so better to just get rid of it all together)
(It’s more getting in the way than helping me, so better to just get rid of it all together)
October 24, 2025 at 9:07 PM
Here are before and after screenshots of a page on my blog that has a CodePen embed.
Because I don’t have a CSP violations reporting endpoint set up (like most websites), there’s no CSP-noise on the console 😊
Because I don’t have a CSP violations reporting endpoint set up (like most websites), there’s no CSP-noise on the console 😊
October 24, 2025 at 12:21 PM
Here are before and after screenshots of a page on my blog that has a CodePen embed.
Because I don’t have a CSP violations reporting endpoint set up (like most websites), there’s no CSP-noise on the console 😊
Because I don’t have a CSP violations reporting endpoint set up (like most websites), there’s no CSP-noise on the console 😊
The code for the demo is attached to this post. Yes, it’s that easy!
You can try it out yourself in Chrome Canary with the experimental Web Platform Features Flag enabled: codepen.io/bramus/pen/q...
The feature is expected to ship to Chrome Stable in Chrome 144.
You can try it out yourself in Chrome Canary with the experimental Web Platform Features Flag enabled: codepen.io/bramus/pen/q...
The feature is expected to ship to Chrome Stable in Chrome 144.
October 22, 2025 at 4:48 PM
The code for the demo is attached to this post. Yes, it’s that easy!
You can try it out yourself in Chrome Canary with the experimental Web Platform Features Flag enabled: codepen.io/bramus/pen/q...
The feature is expected to ship to Chrome Stable in Chrome 144.
You can try it out yourself in Chrome Canary with the experimental Web Platform Features Flag enabled: codepen.io/bramus/pen/q...
The feature is expected to ship to Chrome Stable in Chrome 144.
There’s a new type of CSS scroll-state query coming: “scrolled”.
This one remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.
This one remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.
October 22, 2025 at 4:48 PM
There’s a new type of CSS scroll-state query coming: “scrolled”.
This one remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.
This one remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.
With View Transitions now being Baseline Newly available, and the View Transition API consisting of various features, it can be confusing to know what is supported in which browser versions.
To help with that, I created this VT Feature Explorer (powered by View Transitions)
web.dev/blog/same-do...
To help with that, I created this VT Feature Explorer (powered by View Transitions)
web.dev/blog/same-do...
October 16, 2025 at 6:38 PM
With View Transitions now being Baseline Newly available, and the View Transition API consisting of various features, it can be confusing to know what is supported in which browser versions.
To help with that, I created this VT Feature Explorer (powered by View Transitions)
web.dev/blog/same-do...
To help with that, I created this VT Feature Explorer (powered by View Transitions)
web.dev/blog/same-do...
I am currently in Milan (Italy) for CodeMotion, where I’ll be giving a talk tomorrow afternoon.
As you might have guessed/expected, I’ll be spreading the word on View Transitions 😊
As you might have guessed/expected, I’ll be spreading the word on View Transitions 😊
October 13, 2025 at 2:06 PM
I am currently in Milan (Italy) for CodeMotion, where I’ll be giving a talk tomorrow afternoon.
As you might have guessed/expected, I’ll be spreading the word on View Transitions 😊
As you might have guessed/expected, I’ll be spreading the word on View Transitions 😊
At #fronteers #DarkMode, @utilitybend.com proposed the HTML Element.
It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.
Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...
It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.
Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...
October 3, 2025 at 4:24 PM
At #fronteers #DarkMode, @utilitybend.com proposed the HTML Element.
It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.
Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...
It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.
Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...
I'm in Dordrecht (NL) to MC at @fronteers.bsky.social's "Dark Mode" conference later today and tonight.
Even though it's a new location, this feels like coming home, as I've been attending this conference since 2010 (and also spoke at the 2022 edition).
fronteersconf.org
Even though it's a new location, this feels like coming home, as I've been attending this conference since 2010 (and also spoke at the 2022 edition).
fronteersconf.org
October 3, 2025 at 10:28 AM
I'm in Dordrecht (NL) to MC at @fronteers.bsky.social's "Dark Mode" conference later today and tonight.
Even though it's a new location, this feels like coming home, as I've been attending this conference since 2010 (and also spoke at the 2022 edition).
fronteersconf.org
Even though it's a new location, this feels like coming home, as I've been attending this conference since 2010 (and also spoke at the 2022 edition).
fronteersconf.org
Resizing in a throttled way does get jumpy when a scroller is involved along with responsive components.
Here's the Messages app for example. As you resize the app, the text bubbles resize, and thus the scroll offset needs to change, and thus the whole thing jumps at an interval.
Here's the Messages app for example. As you resize the app, the text bubbles resize, and thus the scroll offset needs to change, and thus the whole thing jumps at an interval.
October 3, 2025 at 9:01 AM
Resizing in a throttled way does get jumpy when a scroller is involved along with responsive components.
Here's the Messages app for example. As you resize the app, the text bubbles resize, and thus the scroll offset needs to change, and thus the whole thing jumps at an interval.
Here's the Messages app for example. As you resize the app, the text bubbles resize, and thus the scroll offset needs to change, and thus the whole thing jumps at an interval.
Bsky that I recorded there was iOS only, so it snaps to a predefined aspect-ratio.
Apps that are built for iPadOS are more responsive, as their resizing is either throttled or debounced.
Attached is a recording of Chrome which uses the latter. Safari does the same.
Apps that are built for iPadOS are more responsive, as their resizing is either throttled or debounced.
Attached is a recording of Chrome which uses the latter. Safari does the same.
October 3, 2025 at 8:18 AM
Bsky that I recorded there was iOS only, so it snaps to a predefined aspect-ratio.
Apps that are built for iPadOS are more responsive, as their resizing is either throttled or debounced.
Attached is a recording of Chrome which uses the latter. Safari does the same.
Apps that are built for iPadOS are more responsive, as their resizing is either throttled or debounced.
Attached is a recording of Chrome which uses the latter. Safari does the same.
One thing I really like about the windowed mode is how Apple tackled the resizing of apps.
To prevent constant layout trashing, you are stretching the texture during a resize.
You can tell because video in the apps keep playing.
To prevent constant layout trashing, you are stretching the texture during a resize.
You can tell because video in the apps keep playing.
October 3, 2025 at 8:09 AM
One thing I really like about the windowed mode is how Apple tackled the resizing of apps.
To prevent constant layout trashing, you are stretching the texture during a resize.
You can tell because video in the apps keep playing.
To prevent constant layout trashing, you are stretching the texture during a resize.
You can tell because video in the apps keep playing.
iOS apps on iPadOS 26 are now actually nice because you can run them windowed.
But that keyboard, oh boy … #functionalhighground
But that keyboard, oh boy … #functionalhighground
October 3, 2025 at 8:04 AM
iOS apps on iPadOS 26 are now actually nice because you can run them windowed.
But that keyboard, oh boy … #functionalhighground
But that keyboard, oh boy … #functionalhighground
You can try out the feature in Chrome Canary by launching Canary with the `--enable-features=DevToolsStartingStyleDebugging` CLI flag, or by flipping on “DevTools @starting-style debugging” through `chrome://flags`.
September 29, 2025 at 2:17 PM
You can try out the feature in Chrome Canary by launching Canary with the `--enable-features=DevToolsStartingStyleDebugging` CLI flag, or by flipping on “DevTools @starting-style debugging” through `chrome://flags`.
3. To allow you to **inspect and edit** these `@starting-style`s, you can click the pill to force the element into its `@starting-style`-state.
The element will be painted with its `@starting-style` rules applied, and DevTools will therefore also shows those style rules.
The element will be painted with its `@starting-style` rules applied, and DevTools will therefore also shows those style rules.
September 29, 2025 at 2:17 PM
3. To allow you to **inspect and edit** these `@starting-style`s, you can click the pill to force the element into its `@starting-style`-state.
The element will be painted with its `@starting-style` rules applied, and DevTools will therefore also shows those style rules.
The element will be painted with its `@starting-style` rules applied, and DevTools will therefore also shows those style rules.
2. To easily **discover** elements that are affected by a `@starting-style` rule, a new pill is shown next in the elements tree.
We chose using this adorner over tucking it away in the `:hov` panel, because that one is collapsed by default.
We chose using this adorner over tucking it away in the `:hov` panel, because that one is collapsed by default.
September 29, 2025 at 2:17 PM
2. To easily **discover** elements that are affected by a `@starting-style` rule, a new pill is shown next in the elements tree.
We chose using this adorner over tucking it away in the `:hov` panel, because that one is collapsed by default.
We chose using this adorner over tucking it away in the `:hov` panel, because that one is collapsed by default.
1. I expect **correctness** from DevTools, and have it show only what you are actively seeing on the screen.
When inspecting a square in codepen.io/bramus/pen/M..., we don’t show the `@starting-style { background-color: yellow }` rule by default because that doesn't match the state on the page.
When inspecting a square in codepen.io/bramus/pen/M..., we don’t show the `@starting-style { background-color: yellow }` rule by default because that doesn't match the state on the page.
September 29, 2025 at 2:17 PM
1. I expect **correctness** from DevTools, and have it show only what you are actively seeing on the screen.
When inspecting a square in codepen.io/bramus/pen/M..., we don’t show the `@starting-style { background-color: yellow }` rule by default because that doesn't match the state on the page.
When inspecting a square in codepen.io/bramus/pen/M..., we don’t show the `@starting-style { background-color: yellow }` rule by default because that doesn't match the state on the page.
Although it’s not a core task of my role as Chrome DevRel, I took the time to build something that I needed into DevTools: debugging support for CSS `@starting-style` rules.
The feature is ready for testing in Chrome Canary.
The feature is ready for testing in Chrome Canary.
September 29, 2025 at 2:17 PM
Although it’s not a core task of my role as Chrome DevRel, I took the time to build something that I needed into DevTools: debugging support for CSS `@starting-style` rules.
The feature is ready for testing in Chrome Canary.
The feature is ready for testing in Chrome Canary.
🎂 Happy 23rd birthday, Firefox
(Firefox 1.0 was released on November 9, 2004 but the first version of the thing that lead up to it – Phoenix 0.1 – was released on September 23, 2002)
(Firefox 1.0 was released on November 9, 2004 but the first version of the thing that lead up to it – Phoenix 0.1 – was released on September 23, 2002)
September 23, 2025 at 1:56 PM
🎂 Happy 23rd birthday, Firefox
(Firefox 1.0 was released on November 9, 2004 but the first version of the thing that lead up to it – Phoenix 0.1 – was released on September 23, 2002)
(Firefox 1.0 was released on November 9, 2004 but the first version of the thing that lead up to it – Phoenix 0.1 – was released on September 23, 2002)
I’m not talking about the feature itself, but the addition to Web Inspector, as listed at developer.apple.com/documentatio...
September 22, 2025 at 3:21 PM
I’m not talking about the feature itself, but the addition to Web Inspector, as listed at developer.apple.com/documentatio...
While clippping can also be achieved by using Scoped View Transitions (see developer.chrome.com/blog/scoped-...), Nested View Transition Groups can do more than just that.
Take this demo in which the paragraphs animate along with the card (but the avatar/name do not): codepen.io/web-dot-dev/...
Take this demo in which the paragraphs animate along with the card (but the avatar/name do not): codepen.io/web-dot-dev/...
September 22, 2025 at 3:03 PM
While clippping can also be achieved by using Scoped View Transitions (see developer.chrome.com/blog/scoped-...), Nested View Transition Groups can do more than just that.
Take this demo in which the paragraphs animate along with the card (but the avatar/name do not): codepen.io/web-dot-dev/...
Take this demo in which the paragraphs animate along with the card (but the avatar/name do not): codepen.io/web-dot-dev/...
Here’s a demo in which the cards should remain clipped by the scroller: codepen.io/web-dot-dev/...
This is achieved by setting `view-transition-group: contain` on the scroller. The card that gets added/removed is excluded from this, because that one doesn’t need to be clipped.
This is achieved by setting `view-transition-group: contain` on the scroller. The card that gets added/removed is excluded from this, because that one doesn’t need to be clipped.
September 22, 2025 at 3:03 PM
Here’s a demo in which the cards should remain clipped by the scroller: codepen.io/web-dot-dev/...
This is achieved by setting `view-transition-group: contain` on the scroller. The card that gets added/removed is excluded from this, because that one doesn’t need to be clipped.
This is achieved by setting `view-transition-group: contain` on the scroller. The card that gets added/removed is excluded from this, because that one doesn’t need to be clipped.
The latter could be a design choice, but I think it's a step back because it prevents you from having a backdrop that actually spans edge-to-edge.
See attached screenshots: the blurred backdrop does not go behind the top and bottom bars. This is something native apps are allowed to do.
See attached screenshots: the blurred backdrop does not go behind the top and bottom bars. This is something native apps are allowed to do.
September 17, 2025 at 10:36 AM
The latter could be a design choice, but I think it's a step back because it prevents you from having a backdrop that actually spans edge-to-edge.
See attached screenshots: the blurred backdrop does not go behind the top and bottom bars. This is something native apps are allowed to do.
See attached screenshots: the blurred backdrop does not go behind the top and bottom bars. This is something native apps are allowed to do.