Bramus
@bram.us
Chrome DevRel at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us. Lives in Belgium.
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...
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.
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.
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.