CSS Gap Decorations, random() Experiments, and select field-sizing: What's New in CSS

What’s !important #14: Gap Decorations, random(), field sizing, and More Daniel Schwarz of CSS-Tricks published What’s !important #14 on June 30, 2026. The edition covers CSS Quake, a full port of the 1996 game Quake powered by PolyCSS, and CSS random() experiments by Polypane showing 7 unique demos. Why This Matters CSS developers often lack native solutions for styling gaps or generating dynamic values, forcing workarounds in JavaScript or preprocessors. With gap decorations now demonstrable via existing CSS properties and random() supported only in Safari but poised for wider adoption, these features reduce the gap between design intent and implementation complexity. Field-sizing: content for , now Baseline after Firefox 152 shipped two weeks prior, eliminates the common anti-pattern of hardcoding select widths.

Key Insights

• CSS Gap Decorations: Temani Afif demonstrated how to style the spaces created by gap in flexbox, grid, and multi-column layouts using existing CSS techniques, a long-requested capability (CSS-Tricks, June 2026).
• CSS random() experiments: Polypane created a bokeh effect, falling petals, an untidy stack of polaroids, a poem, and an animated aurora to showcase the random() function, currently only supported in Safari (Polypane, June 2026).
• field-sizing for : Manuel Matuzović showed that field-sizing: content sets a ‘s width to its selected , and overrides the size attribute to show all options (CSS-Tricks, June 2026).
• Modern CSS theming standards: Una Kravets explained how @property, light-dark(), contrast-color(), and @container style() work together, all now Baseline (CSS-Tricks, June 2026).
• Web Engines Hackfest 2026: Marina Aísa documented the two-day event in A Coruña, Galicia, focusing on web engines and standards discussions, including accessibility improvements for browsers (CSS-Tricks, June 2026).

Practical Applications

• Use case: A form with dynamic widths — apply field-sizing: content to adapt the select width to the currently selected option, improving mobile UX. Pitfall: Overriding the size attribute may break scrollable list box designs; test where multiple options must remain visible. Use case: Polypane-style animated aurora using CSS random() — generate random hue and opacity for layered gradients, creating organic visuals without JavaScript. Pitfall: random() is not supported outside Safari; fall back to JS or CSS custom properties with @property for Safari-only demos. Use case: Theming a multi-platform site — use light-dark() and contrast-color() with @property to auto-adjust colors per user preference, as demonstrated by Una Kravets. Pitfall: Relying solely on contrast-color() without fallback for older browsers may result in unreadable text on legacy systems. References: https://css-tricks.com/whats-important-14/