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

I know you’re busy, so for What’s !important #14 , I’ll be sprinting through what’s been a stacked couple of weeks despite few browser updates. From CSS Quake to CSS Gap Decorations, this isn’t one to miss! 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 s take 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. CodePen Embed Fallback CSS random() experiments 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() . Source: Polypane . How to make s fluid Manuel Matuzović showed us how to set the width of s to the width of their selected 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., ), which turns the into a scrollable list box showing three s by default, field-sizing: content overrides that to show all s. The new standard for CSS theming Una Kravets explained how modern CSS them