Browser releases have picked up enough speed that it feels like the early 2010s again, back when a new jQuery plugin turned up every week. The difference is what is arriving. Modern CSS Features keep landing that make the old hacks, and a fair chunk of our JavaScript, unnecessary. If you are still shipping images for folded corners or a library for tooltips, this one is for you.
The catch with random() and random-item()
Random values are coming to CSS natively, and they do not behave like a Math.random() call. The spec separates “shared” values from “instance” values, so when you want two properties drawing from the same seed, you name that seed with a custom identifier.
/* Using Modern CSS Features for native randomness */
.card {
/* Every instance gets a unique width between 10rem and 20rem */
width: random(--w, 10rem, 20rem);
/* Pick a random theme color from a list */
color: random-item(--theme-colors, #ff4500, #32cd32, #1e90ff);
}The MDN random() documentation has the implementation detail. It is still experimental, so keep it out of client themes for now, but generative layouts in WordPress get a lot cheaper once it ships.
Folded corners without the noughties hacks
A folded corner used to mean an image, or an absolutely positioned ::before stacked with borders that nobody wanted to touch six months later. clip-path replaces the whole arrangement, and of all the Modern CSS Features this is the one I reached for first. Kitty Giraudel showed a version that clips the element with a single custom shape, so it stays responsive and easy to theme with no extra markup.
I wrote a longer piece on why you should stop hacking your UI corners with the legacy methods. clip-path is where that starts.
The big gotcha of anchor positioning
Anchor positioning is what everyone wanted for tooltips and dropdowns, and there is a catch people keep walking into: the containing block. Put the anchor and the target in different containing blocks, or paint the anchor after the target, and nothing lines up. That is the spec doing what it says, not a browser bug.
Chris Coyier wrote it up in the big gotcha of anchor positioning, which covers the DOM order and stacking context side of it. Read that before you spend an evening debugging your own case.
If a library is still doing this work for you, my guide on the Popover API pairs with anchor positioning and takes most of that UI logic off your hands.
Backdrop-filter and the numbers that stop jumping
Two more Modern CSS Features that get skipped: backdrop-filter and font-variant-numeric: tabular-nums. The first gives you the glassmorphism look without SVG masks. The second earns its keep on data-heavy WooCommerce dashboards, where it forces every digit to the same width so a price or a countdown timer stops shoving the layout sideways each time it updates.
DOOM in CSS, and other browser news
Someone rendered DOOM entirely in CSS. Every surface is a <div> with 3D transforms. Nobody should build a client site this way, and please do not, but it does say something about how much the rendering engine will take before it complains.
Chrome 146 is worth watching too. Scroll-triggered animations get easier to reach, and Chrome moves to a two-week release cycle in September, so bug fixes stop taking months to arrive.
If keeping up with all this is eating your week, I take that work on for clients. I have been building WordPress sites since the 4.x days.
Where this leaves your 2026 workflow
Things land faster than they used to, and the Interop 2026 initiative makes it safer to use them early. So before you reach for a JavaScript plugin on the next UI problem, check whether a CSS property already covers it. Usually one does, and you end up carrying less code.
