What’s !essential #14: Hole Decorations, random(), subject sizing, and Extra

I do know you’re busy, so for What’s !essential #14, I’ll be sprinting by way of what’s been a stacked couple of weeks regardless of few browser updates. From CSS Quake to CSS Hole Decorations, this isn’t one to overlook!

Hyperblam: Make music with HTML

Heydon Pickering created Hyperblam, a HTML-driven implementation of the Net Audio API that makes use of Net Elements to create music with out JavaScript.

Okay, not very CSS-y, however nonetheless fairly cool!

CSS Quake

Powered by PolyCSS, Layoutit created CSS Quake, a port of the groundbreaking 1996 recreation, Quake.

Very CSS-y, and an ideal companion to CSS DOOM, which additionally shipped not too long ago.

A head-first dive into CSS Hole Decorations

Temani Afif confirmed us the best way to fashion hole decorations. As you would possibly’ve guessed, ‘gaps’ are the areas that holes take up when utilizing flexbox, grid structure, or multi-column structure. To be sincere, hole decorations have been a very long time coming, however as Temani demonstrated, there’s truly rather a lot that we are able to do with them.

CSS random() experiments

Polypane demonstrated their CSS random() experiments. In case you’ve been questioning about this elusive CSS perform, which nonetheless isn’t supported by any browser however Safari, Polypane has created a bokeh impact, some falling petals, an untidy stack of polaroids, a poem, an animated aurora, and extra. It’s a reasonably deep dive that seemingly exhibits us all the things that we are able to do with random().

make s fluid

Manuel Matuzović confirmed us the best way to set the width of

s to the width of their chosen with field-sizing (field-sizing: content material, to be extra particular), which grew to become Baseline when Firefox 152 shipped it a fortnight in the past.

One other factor to notice is that if we use the dimension attribute (e.g., ), which turns the right into a scrollable listing field exhibiting three s by default, field-sizing: content material overrides that to point out all s.

The brand new normal for CSS theming

Una Kravets defined how fashionable CSS theming works. We’ve seen a complete lot of this currently, however Una talks about @property, light-dark(), contrast-color(), and @container fashion(), all of that are additionally Baseline as of not too long ago, so it is a nice alternative to see how all of those options work collectively.

Talking of which, I wrote up a factor about contrast-color() after exploring it for the primary time.

Why web sites don’t have to work the identical means for everyone

Bramus defined why web sites don’t have to work the identical means for everyone. For instance, totally different platforms have totally different main enter modalities, and even then, customers might need a secondary one attached that they like, which is why we have to abandon the thought of creating web sites an identical throughout platforms.

He additionally talks about three extremely fascinating internet platform options — curiosity invokers, overscroll actions, and the Doc Image-in-Image API — that should perform in another way relying on the platform.

Marina Aísa at Net Engines Hackfest

Whereas everyone was nonetheless speaking about CSS Day (together with me), Net Engines Hackfest was kicking off in A Coruña, Galicia. What I like about these occasions (moreover the talks, after all) is attendees speaking concerning the talks, the those that they met, what else they did whereas they was on the town, and so forth.

Right here’s Marina Aísa documenting the two-day occasion, beginning off with a hike in a Galician forest, then two days of talks about internet engines and internet requirements (interspersed with some wall climbing), then lastly some dialogue about what browsers can do to assist enhance internet accessibility:

This week I am in A Coruña, Galicia, attending the @webengineshackfest.org 👩‍💻 the place we’re discussing the way forward for internet engines and requirements.

Given the potential influence on future internet growth, I assumed it might be useful to share a few of my private notes from the occasion. ✍️👇

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

Private aim for subsequent 12 months: to attend one among these occasions!

New internet platform characteristics

Sure, it’s been a boring couple of weeks for steady browsers, however there are some actually thrilling issues arising. Preserve your eyes on our Fast Hits, as a result of that’s the place I share these internet platform updates first (plus these from developmental browsers). In truth, Chrome 150 will probably be transport later in the present day.

See ya’ll in two weeks!