Bram.us

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

https://www.bram.us

Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none

When you scroll a 2D scroller on a website, the browser does a lot of work behind the scenes to keep you on track. One of the things it typically does is scroll axis-locking (aka “railing”), ignoring some minor scroll deltas in the non-main scrolling axis. While helpful most of the times, this sometimes can get in the way such as in map or image zoom interfaces. With the new CSS <code>scroll-axis-lock</code> property you can disable the browser's default scroll axis-locking behavior, allowing users to immediately perform a diagonal scroll.

2026/8/9

MDN Traffic Browser

TIL: MDN exposes up-to-date page view data through <code>https://popularities.mdn.mozilla.net/current.csv</code>. Using Google AI Studio, I generated a visualizer to explore the data.

2026/8/3

Styling the Navigation: Declarative Route and Navigation Matching in CSS

One of the things that we at Chrome have been thinking about for a while now is a way to do declarative route and navigation matching in CSS. Together with Noam Rosenthal and David Baron I’ve been working on it for the past few months.After an initial introduction at the CSS Working Group back in January, and a quick feedback session at CSS Day in June, we think we have something that is ready for further discussion.At next week’s CSS Working Group F2F (face-to-face) meeting in Berlin, we’ll be presenting our current line of thinking. This post is a quick intro to the concepts we’ll be covering.

2026/7/30

What’s new in Web UI (Google I/O 2026)

Mid May, at this year’s Google I/O, <a href="https://una.im/">Una</a> and I gave a talk “What’s new in Web UI” live at Shoreline in the Chrome tent.

2026/7/1

Cranking View Transtions up to 11 (2026.05.07 @ All Day Hey!)

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.

2026/6/25

Cranking View Transtions up to 11 (2026.04.28 @ Beyond Tellerrand)

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 …

2026/6/25

Do Websites Need to Function Exactly the Same on Every Platform?

While we’ve accepted that websites don't need to look the same everywhere, we seem to be stuck on a new hurdle: the idea that websites need to function the same everywhere.

2026/6/21

View Transitions: Use the new attr() or match-element for the view-transition-name?

At CSS Day, “YouTube guy” <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>.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.The short answer to that question is yes. The longer answer is … <a href="http://brm.us/it-depends">It Depends™</a>

2026/6/19

Introducing view-transitions-toolkit, a collection of utility functions to more easily work with View Transitions.

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>. 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>.

2026/4/2

CSS position: sticky now sticks to the nearest scroller on a per axis basis!

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. A recent change to CSS fixes this: <code>position: sticky</code> now plays nice with single-axis scrollers, 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.

2026/3/30