A rather geeky/technical weblog, est. 2001, by Bramus
In May I spoke at the 10th (and final 😔) edition <a href="https://heypresents.com/conferences/2026">All Day Hey!</a> in Leeds, UK. I opened the conference with a talk on View Transitions.
Back in April I went to Beyond Tellerrand in Düsseldorf. I initially planned on going as an attendee, but when organizer Marc asked me to speak I couldn’t say no …
<p>While we’ve accepted that websites don't need to <em>look</em> the same everywhere, we seem to be stuck on a new hurdle: the idea that websites need to <em>function</em> the same everywhere.</p>
<p>At CSS Day, <em>“YouTube guy”</em> <a href="https://www.kevinpowell.co/">Kevin Powell</a> showed a lot of demos that relied on <a href="https://www.bram.us/2025/01/20/css-attr-gets-an-upgrade/">the advanced <code>attr()</code> function</a>. In one of the examples he used <code>attr()</code> to set <code>view-transition-name</code> values — a technique I covered in <a href="https://www.bram.us/2025/01/20/css-attr-gets-an-upgrade/">my article on advanced <code>attr()</code> function</a>.</p><p>But then during the Q&A, <a href="https://cydstumpel.nl/">Cyd Stumpel</a> wondered if he couldn’t just use <code>match-element</code> there.</p><p>The short answer to that question is yes. The longer answer is … <a href="http://brm.us/it-depends">It Depends™</a></p>
<p>In my work with View Transitions over the last several years, I’ve published everything from deep-dive articles, demos, and announcement videos at Google I/O. I’ve also done some more experimental things with it, such as <a href="https://www.bram.us/2025/02/07/view-transitions-applied-more-performant-view-transition-group-animations/">optimizing the keyframes</a> or <a href="https://www.bram.us/2024/04/29/if-view-transitions-and-scroll-driven-animations-had-a-baby-css-cafe/">driving a View Transition by scroll</a>.</p> <p>To turn the lessons from these scattered experiments into something more reusable for both you and me, I’ve bundled the most frequent code patterns into a dedicated package: <a href="https://chrome.dev/view-transitions-toolkit/"><code>view-transitions-toolkit</code></a>.</p>
<p>If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple <code>position: sticky</code> with <code>top: 0</code> and <code>left: 0</code> would be enough, but the reality was that only one of both would stick.</p> <p>A recent change to CSS fixes this: <code>position: sticky</code> now plays nice with <em>single-axis scrollers</em>, allowing you to have sticky elements that track different scroll containers on different axes. This change is available for testing in Chrome 148 with the experimental web platform features flag flipped.</p>
Talk on View Transitions, given at the devs.gent March meetup
<p>CSS <strong><code>light-dark()</code> is being extended to support images.</strong></p>
<p>Back in January 2022, I <a href="https://brm.us/at-rule-2022">wrote</a> about an exciting new CSS Working Group decision: a function to detect at-rule support using <code>@supports at-rule(@keyword)</code>. Fast forward to today, and the CSS Conditional Rules Module Level 5 specification has solidified how this feature works and Chromium (Chrome, Edge, etc.) is about to ship it in Chromium 148!</p>
<p>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.</p><p><a href="https://github.com/GoogleChromeLabs/view-transitions-mock"><code>view-transitions-mock</code></a> bridges that gap. It is a spec-compliant JavaScript implementation of Same-Document View Transitions that polyfills the entire JavaScript API surface of the spec, but that doesn’t do the animation bits.</p>