Sign up

Bram.us

Not verified No WebSub updates No webmention support Valid

A rather geeky/technical weblog, est. 2001, by Bramus

Generator
https://wordpress.org/?v=7.1.3
Public lists
btconf 2026 speakers
Fetched

Bram.us Valid
Text • Bramus!

Introducing view-transitions-mock: A non-visual Polyfill for Same-Document View Transitions

View Transitions are a powerful Modern Web feature allow for smooth seamless animated transitions two between different states of a web page. They can make for a much more pleasant user experience, but as with any new web platform feature, browser support is not yet fully universal so you need to add some fallback logic to your code.

view-transitions-mock bridges that gap by polyfilling the full JavaScript API surface of Same-Document View Transitions, without the animation bits.

Bram.us Valid
Video • Bramus!

Experiment: Animating CSS position-area with View Transitions

CSS Anchor Positioning is a powerful tool, but one of the things that you cannot do natively (yet) is animating the position-area property. This blog post introduces a technique to animate position-area changes using View Transitions.

Bram.us Valid
Text • Bramus!

Anchors Aweigh! (2026.02.28 @ State of the Browser)

Talk on CSS Anchor Positioning

Bram.us Valid
Text • Bramus!

Anchors Aweigh! (2026.02.26 @ PHP Antwerp)

Talk on CSS Anchor Positioning.

Bram.us Valid
Text • Bramus!

Chrome 145 adds Experimental Support for Vertical Tabs

Vertical Tabs are available behind a flag in Chrome 145 (current beta)

Bram.us Valid
Text • Bramus!

Using 100vw is now scrollbar-aware (in Chrome 145+, under the right conditions)

From Chrome 145 onwards, 100vw will automatically subtract the size of the scrollbar from it if you have forced the html element to always show a scrollbar (using overflow{-y}: scroll) or have it reserve space for a scrollbar (using scrollbar-gutter: stable).

Bram.us Valid
Video • Bramus!

How to Find the public WebKit Bug using the Internal Apple rdar:// Bug ID

If you gloss over the Safari release notes – like the Safari 26.2 release notes – you see a lot of trailing “(12345678)”-mentions in the list of fixed bugs. These numbers are the internal bug IDs, as used within Apple’s internal bug tracker fka “Radar” (now Feedback Assistant).

These numbers are not linked to anything because Radar is an Apple-internal tool, so to external people these numbers are practically useless … or are they?

Bram.us Valid
Video • Bramus!

CSS Scroll-Triggered Animations are coming to Chrome!

We have Scroll-Driven Animations. Now say hi to Scroll-Triggered Animations.

Bram.us Valid
Text • Bramus!

CSS Wrapped 2025

Once again, it has been an AMAZING year for CSS and UI. To celebrate this, we – the Chrome CSS/UI DevRel Team – created another edition of CSS Wrapped!

Bram.us Valid
Text • Bramus!

The Google Antigravity website, rebuilt with Modern CSS

I recreated the Google Antigravity website with Modern CSS.

Bram.us Valid
Video • Bramus!

Anchor Positioning and the Inset-Modified Containing Block (IMCB)

If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short).

Bram.us Valid
Text • Bramus!

Use overscroll-behavior: contain to prevent a page from scrolling while a <​dialog> is open

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal) <dialog> is open.

Bram.us Valid
Text • Bramus!

Señors @ Scale: Modern CSS at Scale with Bramus

A while ago I joined Dan Neciu – whom I met at Frontmania in 2023 – on his “Señors @ Scale” podcast. We talked about all things CSS.

Bram.us Valid
Text • Bramus!

Anchor Positioning is transform-aware in Chrome 144+

Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed ancho

Bram.us Valid
Video • Bramus!

Faking Two-Phase View Transitions with the Navigation API’s precommitHandler

By using two sequential View Transitions when intercepting links with the Navigation API – one in the precommitHandler and one in the regular handler – you can fake a Two-Phase View Transition today!

Bram.us Valid
Text • Bramus!

Animating CSS width or height no longer force a Main Thread animation (in Chrome, under the right conditions)

Chrome no longer forces width/height animations to run on the Main Thread, in case those values don’t actually change throughout an animation.

Bram.us Valid
Video • Bramus!

Combining Scroll-Driven Animations with @starting-style

How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …

Bram.us Valid
Video • Bramus!

Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.

There’s a new type of CSS scroll-state query coming: scrolled

Bram.us Valid
Video • Bramus!

CSS @starting-style debugging is available in Chrome DevTools!

I built something that I needed into DevTools: debugging support for CSS @starting-style rules.

Bram.us Valid
Text • Bramus!

View Transitions Feature Explorer

Which version of what browser supports which feature of View Transitions?

Bram.us Valid
Text • Bramus!

The CSS Podcast is back! And I’m a co-host now.

The CSS Podcast is back! Together with Una I’m co-hosting season 5 of the show, and we have some good episodes coming your way …

Bram.us Valid
Text • Bramus!

What’s New in View Transitions (2025 Update)

Check out the post I wrote for developer.chrome.com to learn what changed for View Transitions in 2025.

Bram.us Valid
Text • Bramus!

A custom --light-dark() function in CSS that works with any type of value (not just colors!) in just 3 LOC

CSS Custom Functions (@function) + CSS if() + CSS color-scheme() = one sweet combo!

Bram.us Valid
Video • Bramus!

Ready for Developer Testing: Scoped View Transitions

If you thought we were done with View Transitions, guess again! A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM. We are actively looking for feedback on this one.

Bram.us Valid
Video • Bramus!

Prevent clipping issues (and more) in View Transitions by using Nested View Transition Groups

A new View Transitions-related feature we shipped in Chrome 140 is the ability to nest ::view-transition-group() pseudos. This is useful for retaining visual effects such as clipping, move elements as part of a group, etc.

Bram.us Valid
Text • Bramus!

Cranking View Transtions up to 11 (Safely, Maybe) (2025.06.12 – Middlesbrough Front End)

At Middlesbrough Front End 2025 I gave a talk about some of the more exotic applications of View Transitions

Bram.us Valid
Text • Bramus!

Scroll-Driven Animations with CSS (2025.05.30 @ JSHeroes)

At JSHeroes 2025 I gave a talk in Scroll-Driven Animations.

Bram.us Valid
Text • Bramus!

Supercharge Web UX with View Transitions (2025.05.28 @ WebExpo)

Slides + Recording of the talk “Supercharge Web UX with View Transitions” I gave at WebExpo.

Bram.us Valid
Text • Bramus!

Web animations today and tomorrow (Google I/O 2025)

For this year’s Google I/O, I recorded the session “Web animations today and tomorrow”. Check it out to learn how to guide, inform, and delight users by adding subtle and supportive animations to your web UIs.

Bram.us Valid
Video • Bramus!

View Transitions Applied: Smoothly animating a border-radius with a View Transition, revisited

Instead of duplicating an animation on the ::view-transition-group pseudo, you can also rely on CSS transitions on the original element … if you’ve set it up correctly.