For this situation of What’s !vital, we’ve got a wholesome stability of outdated CSS that you just may’ve missed and new CSS that you just don’t need to miss. This consists of random(), random-item(), folded corners utilizing clip-path, backdrop-filter, font-variant-numeric: tabular-nums, the Popover API, anchored container queries, anchor positioning usually, DOOM in CSS, customizable , :open, scroll-triggered animations,
Let’s dig in.
Understanding random() and random-item()
Alvaro Montoro explains how the random() and random-item() CSS features work. Because it seems, they’re truly fairly complicated:
width: random(--w element-shared, 1rem, 2rem);
coloration: random-item(--c, pink, orange, yellow, darkkhaki);Creating folded corners utilizing clip-path
My first answer to folded corners concerned precise pictures. Not a nice answer, however that was the best way to do it within the noughties. Since then we’ve been in a position to do it with box-shadow, however Kitty Giraudel has provide you with a CSS clip-path answer that clips a customized form (hover the kitty to see it in motion):
Revisiting backdrop-filter and font-variant-numeric: tabular-nums
Stuart Robson talks about backdrop-filter. It’s not a brand new CSS property, but it surely’s very helpful and hardly talked about. In truth, up till now, I believed that it was for the ::backdrop pseudo-element, however we are able to truly use it to create every kind of background results for every kind of parts, like this:
font-variant-numeric: tabular-nums is one other one. This property and worth prevents structure shift when numbers change dynamically, as they do with dwell clocks, counters, timers, monetary tables, and so forth. Amit Service provider walks you thru it with this demo:
Getting began with the Popover API
Godstime Aburu does a deep dive on the Popover API, a brand new(ish) however on a regular basis internet platform function that simplifies tooltip and tooltip-like UI patterns, however isn’t with out its nuances.
Unraveling one more anchor positioning quirk
Simply one other anchor positioning quirk, this time from Chris Coyier. These quirks have been piling up for some time now. We’ve talked about them time and time once more, however the factor is, they’re not bugs. Anchor positioning works in a approach that isn’t generally understood, so Chris’ article is unquestionably price a learn, as are the articles that he references.
Constructing dynamic toggletips utilizing anchored container queries
On this walkthrough, I show how one can construct dynamic toggletips utilizing anchored container queries. Additionally, I bumped into an anchor positioning quirk, so if you happen to’re seeking to solidify your understanding of all that, I believe the walkthrough will assist with that too.
Demo (full impact requires Chrome 143+):
DOOM in CSS
DOOM in CSS. DOOM. In CSS.
DOOM totally rendered in CSS. Each floor is a
that has a background picture, with a clipping path with 3D transforms utilized. After all CSS doesn’t have a movable digicam, so we rotate and translate the scene across the consumer.— Niels Leenheer (@html5test.com) Mar 13, 2026 at 20:32
Safari updates, Chrome updates, and Fast Hits you missed
As well as, Chrome will ship each two weeks beginning September.
From the Fast Hits reel, you may’ve missed that Font Superior launched a Kickstarter marketing campaign to remodel Eleventy into Construct Superior, cancelled it as a result of their emails did not ship (regardless of assembly their aim!), and vowed to attempt once more. You possibly can subscribe to the relaunch notification.
Additionally,
is coming alongside in keeping with Luke Warlow. That is akin to, which we are able to truly check in Chrome 146 with the “Experimental Net Platform options” flag enabled.Proper, I’m off to slay some demons in DOOM. Till subsequent time!
P.S. Congratulations to Kevin Powell for making it to 1 million YouTube subs!
