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.

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.

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.

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 View Transitions seem to be at play.

So, how did they do it? I’m not sure. But if I were to recreate it, I’d use CSS Anchor Positioning with regular CSS Transitions on top.

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.

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.

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

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.

The new CSS scroll-axis-lock property allows you to disable the browser's default scroll-locking behavior (aka “railing”) to enable immediate diagonal scrolling.

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

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.

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.

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 …

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.

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 during the Q&A, Cyd Stumpel wondered if he couldn’t just use match-element there.

The short answer to that question is yes. The longer answer is … It Depends™

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 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 in Chrome 148.

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

Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). 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!

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.

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.

Talk on CSS Anchor Positioning

Talk on CSS Anchor Positioning.

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

From Chrome 145 onwards, 100vw will automatically subtract the size of the (vertical) scrollbar from it if you have forced the html element to always show a vertical scrollbar (using overflow[-y]: scroll) or if you reserve space for it (using scrollbar-gutter: stable). The same applies to vh with a horizontal scrollbar, as well as all small, large, and dynamic variants.

If you read 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 Apple-internal bug IDs, as used within Apple’s internal bug tracker (fka?) named “Radar”.

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

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

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!

As an experiment to see if Modern CSS is up to the task, I recreated the Google Antigravity website with Modern CSS.

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