What’s !important #14: Gap Decorations, random(), field sizing, and More

Hyperblam: Make music with HTML

Heydon Pickering created Hyperblam, a HTML-driven implementation of the Web Audio API that uses Web Components to create music without JavaScript. Okay, not very CSS-y, but still pretty cool!

CSS Quake

Powered by PolyCSS, Layoutit created CSS Quake, a port of the groundbreaking 1996 game, Quake. Very CSS-y, and a perfect companion to CSS DOOM, which also shipped recently.

A head-first dive into CSS Gap Decorations

Temani Afif showed us how to style gap decorations. As you might’ve guessed, ‘gaps’ are the spaces that gap takes up when using flexbox, grid layout, or multi-column layout. To be honest, gap decorations have been a long time coming, but as Temani demonstrated, there’s actually a lot that we can do with them.

random() experiments

CSS Polypane demonstrated their CSS random() experiments. If you’ve been wondering about this elusive CSS function, which still isn’t supported by any browser but Safari, Polypane has created a bokeh effect, some falling petals, an untidy stack of polaroids, a poem, an animated aurora, and more. It’s a pretty deep dive that seemingly shows us everything that we can do with random().

<select> fluid width

Manuel Matuzović showed us how to set the width of <select>s to the width of their selected <option> with field-sizing (field-sizing: content, to be more specific), which became Baseline when Firefox 152 shipped it a fortnight ago. Another thing to note is that if we use the size attribute (e.g., <select size="3">), which turns the <select> into a scrollable list box showing three <option>s by default, field-sizing: content overrides that to show all <option>s.

The new standard for CSS theming

Una Kravets explained how modern CSS theming works. We’ve seen a whole lot of this lately, but Una talks about @property, light-dark(), contrast-color(), and @container style(), all of which are also Baseline as of recently, so this is a great opportunity to see how all of these features work together. Speaking of which, I wrote up a thing about contrast-color() after exploring it for the first time.

Why websites don’t need to work the same way for everybody

Bramus explained why websites don’t need to work the same way for everybody. For example, different platforms have different primary input modalities, and even then, users might have a secondary one hooked up that they prefer, which is why we need to abandon the idea of making websites identical across platforms. He also talks about three incredibly interesting web platform features - interest invokers, overscroll actions, and the Document Picture-in-Picture API - that must function differently depending on the platform.

Marina Aísa at Web Engines Hackfest

While everybody was still talking about CSS Day (including me), Web Engines Hackfest was kicking off in A Coruña, Galicia. What I love about these events (besides the talks, of course) is attendees talking about the talks, the people that they met, what else they did while they was in town, and so on. Here’s Marina Aísa documenting the two-day event, starting off with a hike in a Galician forest, then two days of talks about web engines and web standards (interspersed with some wall climbing), then finally some discussion about what browsers can do to help improve web accessibility:

This week I'm in A Coruña, Galicia, attending the @webengineshackfest.org 👩💻 where we are discussing the future of web engines and standards. Given the potential impact on future web development, I thought it would be helpful to share some of my personal notes from the event. ✍️👇

• Marina Aísa (@marinaaisa.com) 14:31 · Jun 16, 2026

Personal goal for next year: to attend one of these events!

New web platform feature

• Firefox 152 field-sizing (now Baseline)

Yes, it’s been a dull couple of weeks for stable browsers, but there are some really exciting things coming up. Keep your eyes on our Quick Hits, because that’s where I share these web platform updates first (plus those from developmental browsers). In fact, Chrome 150 will be shipping later today. See ya’ll in two weeks!