A stacked couple of weeks despite few browser updates. From CSS Quake to CSS Gap Decorations, here’s what’s been happening.
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.
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. Gap decorations have been a long time coming, but as Temani demonstrated, there’s actually a lot that we can do with them.
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 shows off everything we can do with random().
How to Make <select>s Fluid
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 recently.
Another thing to note is that if you 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. She covers @property, light-dark(), contrast-color(), and @container style() — all of which are Baseline as of recently — making this a great opportunity to see how all of these features work together.
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. Different platforms have different primary input modalities, and users might have a secondary one hooked up that they prefer — which is why the idea of making websites identical across platforms needs to be abandoned.
He also covers three 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, Web Engines Hackfest was kicking off in A Coruña, Galicia. Marina Aísa documented the two-day event, starting with a hike in a Galician forest, then two days of talks about web engines and web standards (interspersed with some wall climbing), and wrapping up with discussion about what browsers can do to improve web accessibility.
New Web Platform Features
- Firefox 152
field-sizing(now Baseline)
It’s been a quiet couple of weeks for stable browsers, but there are some exciting things on the horizon — including Chrome 150, which shipped around the time of this writing. Keep watching for those updates as they land.
