Fresh Reads
JPEG XL vs AVIF for web use-cases
JPEG XL has now landed in all major browsers, so I figured I'd take a closer look at what it's good/bad at compared to other formats. Conclusions I'll go into full detail, with examples and benchmarks, but for those of you who don't have the time, here are the headlines: For…
Controlling when CSS custom property values are computed
When and how CSS custom property values are calculated might not be what you expect, and it has a big impact on your styles. The default Take this HTML: <div></div><div class="second-item"> <p>…</p></div>And this CSS: .second-item { --index: sibling-index(); & > :first-child {…
Fixing my tooltip accessibility mistake
I made an accessibility error, and I want you to learn from my mistakes. I've been making short videos recently about web platform features as they land in Firefox, and also about other web standards & development stuff. If you'd prefer to watch a 3-minute video version of this…
The Goldilocks customizable select height
I recently gave a talk on customizable (as in fully-stylable) <select>, and as I was building demos I realised there's a sizing 'pattern' that's almost always the-one-you-want, but it took me a long time to figure out how to do it in CSS. Well, I say I figured it out. I actually…
Importing vs fetching JSON
This year, JSON module imports became baseline 'newly available', meaning they're implemented across browser engines. import data from './data.json' with { type: 'json' }; // And… const { default: data } = await import('./data.json', { with: { type: 'json' }, });I'm glad…
The present and potential future of progressive image rendering
Progressive image formats allow the decoder to create a partial rendering when only part of the image resource is available. Sometimes it's part of the image, and sometimes it's a low quality/resolution version of the image. I've been digging into it recently, and I think there…
Fetch streams are great, but not for measuring upload/download progress
Part of my role at Mozilla is making sure we're focusing on the right features, and we got onto the topic of fetch upload streams. It's something Chrome has supported for a while, but it isn't yet supported in either Firefox or Safari. I asked folks on various social platforms…
Making XML human-readable without XSLT
Ok. This one is niche. But heh, you might enjoy a dive into this esoteric corner of the web – I certainly did. XSLT and browser support I want to get to the technical-fun bits quickly, so here's a quick rundown: XSLT is an XML language for transforming XML, including…
Give footnotes the boot
I hate footnotes1, and hopefully by the end of this, you will too. Let's get down to it… The UX of footnotes in printed media You, the reader, encounter a tiny number2 within some prose. This indicates to you that I, the writer, have something more to say on this topic. And, for…
Animating zooming using CSS: transform order is important… sometimes
I was using Discord the other day. I tapped to zoom into an image, and it animated in an odd way that I'd seen before. Like this: Notice how it kinda 'swoops' into the wildcat's face, rather than zooming straight in? See how the right-hand side of the cat's head goes…

