Bram.us

Screenshot of <rich-input> in action ~ While working on a side-project to better navigate and search through my record collection, I found myself in need of a rich search input: one that accepts free-form text alongside structured filters like artist:“Aphex Twin” or label:“Warp Records” — You know, like the one you see on GitHub when searching/filtering issues. When I quickly realized a standalone custom element for this didn’t exist yet, I nerd sniped myself into building curating one. ~ # The…

About a month ago, WebKit gained support for interactive-widget. While it’s not clear whether this will end up in Safari or not, this is pretty exciting news: If you have ever had a virtual keyboard obscure your fixed navigation bar, then interactive-widget is for you. This post details a quick recap of what the feature does, how we got here, and a sneak peek at it running in WebKit. ~ # The backstory: Interop 2022 Back in 2022, I did a lot of research into viewports as the lead of the Viewport…

~ Today I learned that CodePen supports Mermaid diagrams — Chris Coyier has a a whole collection with examples here — and I also learned that there is no custom element to show Mermaid diagrams … so I built one. ~ Looking at Chris’s demos, I see CodePen relies on Markdown code blocks with backticks (```mermaid) to render the diagrams. Seeing that in action got me wondering: is there a standalone custom element out there to drop Mermaid diagrams declaratively onto any web page? Turns out, there…

https://www.bram.us/wordpress/wp-content/uploads/2026/09/animated-css-grid.mp4Recording of the animated grid demo. At CSS Day (back in June), someone asked me how Brave (the browser) might have built their New Tab Page which features some tiles laid out in a grid. While the grid is nothing spectacular, something special happens with it when you resize the viewport: as the available space changes, the grid nicely reorganizes itself in an animated way. The animations are also interruptible, so no…

https://www.bram.us/wordpress/wp-content/uploads/2026/09/hic-pageflip.mp4Recording of the demo. ~ Way back in 2005, I first used PageFlip as a Flash component to display pages of images on a website. Ever since, recreating a modern version has been on my backlog to investigate. With the arrival of the experimental HTML-in-Canvas API, we can finally bring it back — this time displaying real HTML. ~ ⚠️👨‍🔬 Experimental Feature! The technology used to power this <hic-pageflip> component is still…

In CSS you can feature detect support for things like selectors, properties + values, and at-rules using @supports. But how do you feature detect a change to an underlying implementation, or two existing properties suddenly working together? Enter @supports named-feature(), a function designed to expose these specific capabilities without relying on hacky workarounds. ~ The OG use-case: “Flexbox Gap” Back in the day (and by back in the day, I mean 2020 😅), I wrote about the gap property for…

To target multiple classes that share the same prefix, you’d typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a new selector: The Class Prefix Selector (.prefix-*). ~ ⚠️ This post is about an upcoming CSS feature. You can’t use it … yet. This feature is hot off the press — it was resolved on only two weeks ago — and currently only exists in spec text. The spec will most likely see some changes before this is…

Adding a Dark Mode toggle to your website is a nice touch that many users appreciate. When implementing one, the default instinct for many developers is to reach for a simple binary switch: Light on one side, Dark on the other. While a two-state control might seem like the most straightforward solution, I firmly believe it’s flawed from a user experience perspective. Instead, we should all be using tri-state controls. Let me explain why. ~ A raised eyebrow The whole thing started about two…

The new CSS scroll-axis-lock property allows you to disable the browser’s default scroll axis-locking behavior (aka “railing”), allowing users to immediately perform a diagonal scroll. ~ Scroll Axis Locking? By default, a browser often “locks” a user’s scrolling gesture to a single axis when that gesture starts with significantly more movement in one axis than in the perpendicular axis. For example, say a user drags their finger on the screen such that the element underneath the finger would be…

Screenshot of the visualizer, as deployed onto CodePen TIL: MDN exposes up-to-date page view data through https://popularities.mdn.mozilla.net/current.csv. To visualize the data, I had Google AI Studio generate me a visualizer, which I deployed to CodePen Check out “MDN Traffic Browser” →

One of the things in CSS 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 this for the past few months. After an initial introduction at the CSS Working Group back in January, and a quick feedback session with developers 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)…

Photo of my laptop in Chrome tent before we opened. My laptop is showing the opening slide of the presentation. ~ Mid May, at this year’s Google I/O, Una and I gave a talk “What’s new in Web UI” live at Shoreline in the Chrome tent. The talk was recorded and you can watch it here: Take a fast-paced tour of the latest UI features landing in browsers today, with a lens on making beautiful web experiences. From updates to interactive capabilities like scroll-triggered animations and scoped view…

Me on stage at All Day Hey! In May I spoke at the 10th (and final 😔) edition All Day Hey! in Leeds, UK. I opened the conference with a talk on View Transitions. ~ Table of Contents The Talk Slides Recording/Video Thanks! ~ # The Talk This talk dived deeply into the more experimental stuff of View Transitions. Ever wondered what happens when you push the View Transition API beyond its documented limits? This talk throws caution to the wind and explores the wild side of View Transitions, cranking…

Me, on stage, referencing the fire alarm we had at the speaker hotel in the early morning (and sticking it to Niels Leenheer 😛) 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 … ~ Table of Contents The Talk Slides Recording/Video Thanks! ~ # The Talk I initially planned on giving the talk “Supercharge Web UX with View Transitions” at Beyond Tellerrand as the crowd is a mix of…

~ Pixel Perfection was the flawed holy grail. If you, like me, were building websites back in the early 2000s, you’ll undoubtedly remember the absolute headache that was cross-browser compatibility. What didn’t help back then in this era of Internet Explorer, Netscape, and Firefox was the stubborn, widespread belief that websites needed to look exactly the same in every single browser. Pixel perfection was the (flawed) holy grail. Thankfully, the web community eventually came to its senses by…

At CSS Day, “YouTube guy” Kevin Powell showed a lot of demos that relied on the advanced attr() function. In one of the examples he used attr() to set view-transition-name values — a technique I covered in my article on advanced attr() function. But then Cyd Stumpel asked during the Q&A if he couldn’t just use match-element there. The short answer that question is yes. The longer answer is … It Depends™ ~ view-transition-name: attr(…); To recap, the technique Kevin showed is this: <style> .card…

Over the past years, I’ve published a bunch of View Transitions contents: articles, talks, demos, etc. I’ve also done a bunch of more experimental things with them, such as optimizing the keyframes or driving a View Transition by scroll. What I noticed while doing all those experiments is that I repeated a lot of the code … and they were scattered a bit all over the place as well. So I bundled that all up in a package: view-transitions-toolkit.

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 position: sticky with top: 0 and left: 0 would be enough, but the reality was that only one of both would stick. A recent change to CSS fixes this: position: sticky can now track the nearest scrolling container per axis. This change is available in Chrome 148.

CSS light-dark() is being extended to support images.