This edition of What's !important covers a mix of overlooked CSS features and cutting-edge additions to the platform. We'll explore random() and random-item() functions, clip-path techniques for folded corners, backdrop-filter effects, font-variant-numeric: tabular-nums for stable number rendering, the Popover API, anchor positioning patterns including anchored container queries, customizable <select> elements, the :open pseudo-class, scroll-triggered animations, the upcoming <toolbar> element, and yes—DOOM rendered entirely in CSS.
Let's dive in.
Understanding random() and random-item()
Alvaro Montoro breaks down the mechanics of CSS random() and random-item() functions. These functions are more sophisticated than they first appear:
width: random(--w element-shared, 1rem, 2rem);
color: random-item(--c, red, orange, yellow, darkkhaki);Creating folded corners using clip-path
Early implementations of folded corners relied on image assets—functional but inelegant. Later, developers achieved the effect using box-shadow. Now Kitty Giraudel presents a clip-path approach that creates custom clipped shapes (hover the demo to see it work):
Revisiting backdrop-filter and font-variant-numeric: tabular-nums
Stuart Robson explores backdrop-filter, an underutilized property that deserves more attention. Despite being available for some time, it's often misunderstood—many assume it only applies to the ::backdrop pseudo-element. In reality, it enables sophisticated background effects on any element:
Another underappreciated feature is font-variant-numeric: tabular-nums, which prevents layout shift when numbers update dynamically—essential for clocks, counters, timers, and financial displays. Amit Merchant demonstrates its impact:
Getting started with the Popover API
Godstime Aburu provides a comprehensive guide to the Popover API, a relatively recent platform feature that streamlines tooltip and similar UI patterns—though it comes with its own set of considerations.
Unraveling yet another anchor positioning quirk
Chris Coyier documents another anchor positioning quirk. These edge cases continue to surface. We've covered them multiple times, but they're not defects—anchor positioning simply behaves in ways that aren't immediately intuitive. Chris' analysis is worth reading, along with the resources he cites.
Building dynamic toggletips using anchored container queries
I've written a tutorial on building dynamic toggletips with anchored container queries. The process revealed another anchor positioning quirk, so if you're working to master these features, the walkthrough should clarify some of the trickier aspects.
Demo (requires Chrome 143+ for full functionality):
DOOM in CSS
DOOM rendered entirely in CSS. Yes, DOOM. In CSS.
DOOM fully rendered in CSS. Every surface is a <div> that has a background image, with a clipping path with 3D transforms applied. Of course CSS does not have a movable camera, so we rotate and translate the scene around the user.
— Niels Leenheer (@html5test.com) Mar 13, 2026 at 20:32
[image or embed]
Safari updates, Chrome updates, and Quick Hits you missed
- Safari Technology Preview 238
- Customizable
<select> :open(surprisingly, as it seemed to already have baseline support)
- Customizable
- Chrome 146
Chrome also announced a shift to two-week release cycles starting in September.
From the Quick Hits archive: Font Awesome launched a Kickstarter to transform Eleventy into Build Awesome, then cancelled it due to email delivery failures—despite reaching their funding goal. They plan to relaunch, and you can sign up for notifications.
Additionally, <toolbar> is progressing according to Luke Warlow. It's similar to <focusgroup>, which you can test in Chrome 146 by enabling the "Experimental Web Platform features" flag.
Time to go battle some demons in CSS DOOM. See you next time!
P.S. Congratulations to Kevin Powell on reaching 1 million YouTube subscribers!
What's !important #7: random(), Folded Corners, Anchored Container Queries, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.