CSS Roundup: Random Values, Corner Tricks, and a Batch of Platform Updates

This month’s CSS landscape brings a mix of fresh proposals and older properties worth a second look. From native random value functions to a DOOM renderer built entirely with CSS, there is plenty to explore. Here’s what’s worth your attention.

Native Randomness and Folded Corners

Alvaro Montoro breaks down how the proposed random() and random-item() CSS functions are designed to work. They are surprisingly nuanced under the hood:

width: random(--w element-shared, 1rem, 2rem);
color: random-item(--c, red, orange, yellow, darkkhaki);

For visual effects, Kitty Giraudel offers a modern approach to folded corners. While older techniques relied on images or box-shadow, Giraudel’s solution uses a clip-path to clip a custom shape directly onto an element, making the effect cleaner and more flexible.

Polishing Interfaces with Filters and Typography

Stuart Robson revisits backdrop-filter, a property that doesn’t get much attention despite its utility. It isn't limited to the ::backdrop pseudo-element; you can apply background effects to any element. Similarly, font-variant-numeric: tabular-nums is a small but powerful typographic tool. Amit Merchant demonstrates how it prevents layout shift when numbers update frequently, such as in clocks, counters, or financial tables.

Popovers, Anchors, and Containers

Godstime Aburu offers a thorough introduction to the Popover API. It’s quickly becoming a standard feature for tooltips and similar UI patterns, but it still carries its own set of nuances worth understanding.

Anchor positioning continues to be a source of confusion, but as Chris Coyier explains, the quirks developers encounter are not bugs. The feature behaves in ways that are easy to misunderstand. His article, along with the ones it links to, helps clarify the model.

For a hands-on exercise, a new walkthrough shows how to build dynamic toggletips using anchored container queries. The demo also surfaces an anchor positioning quirk, making it a useful practical reference for solidifying how these APIs interact. Its full effect requires Chrome 143 or later.

Doom, Demos, and Browser News

Niels Leenheer has rendered DOOM in pure CSS. Every surface is a <div> with a background image and a clipping path, transformed in 3D. Since CSS lacks a movable camera, the scene itself is rotated and translated around the viewer.

Browser Updates and Quick Hits

  • Safari Technology Preview 238 arrives with support for customizable <select> and the :open pseudo-class.
  • Chrome 146 introduces scroll-triggered animations. Chrome will also move to a two-week release cadence starting in September.

From the Quick Hits archive: Font Awesome announced a Kickstarter to turn Eleventy into “Build Awesome,” then cancelled the campaign after emails failed to send—despite meeting its goal. A relaunch notification is now open for signups.

Luke Warlow reports that <toolbar> is progressing. It’s similar to <focusgroup>, which you can already test in Chrome 146 by enabling the “Experimental Web Platform features” flag.