Let’s Use the Emergent CSS random() Perform in all of the Browsers

The creator of the TV present The Good Place wrote a tie-in e-book about ethical philosophy which features a chapter known as “The Luck of the Draw,” discussing how the delusion of meritocracy leads folks to “underestimate the position that luck has performed of their lives.” Given how God appears to play cube with the universe, there’s something compelling in the best way artwork imitates life when web sites embrace managed chaos of their designs. The jury is out on whether or not excessive variations of this nondeterminism comparable to generative UI are a useful utilization of unpredictable UX. Certainly, after I see the YouTube feedback reacting to Google’s upcoming utilization of GenUI in search, perhaps it’s taking the thought too far down a nasty path. However there may be nonetheless one thing concerning the thought of a webpage that exists in a state of refined flux every time you land on it, the identical approach you may’t step into the identical river twice.

Actual-world use circumstances for randomness

I’m a guide who usually works on short-term, greenfield initiatives, which offer me with a window into the zeitgeist and the developments corporations assume are the longer term. It’s no coincidence that the thought of randomness permeated considered one of my latest initiatives. That’s epitomized by a burst of confetti to present the person a way of pleasure once they run a random draw they configured. And like many a UI function within the company world, the straightforward thought of confetti was topic to a number of revisions to make each randomized particle align with the consumer’s model.

In actual fact, the necessities turned customized sufficient that we ended up ditching the JavaScript plugin we have been utilizing and rolled our personal confetti implementation! This illustrates the stress between the conflicting wants for chaos and management in UX, even in a enjoyable function like random confetti.

Wouldn’t or not it’s good if we might wield managed presentational randomness within the presentation layer with out leaving CSS?

The CSS random() operate emerges

If unpredictable person experiences are having a second, it follows that CSS will do its half to make randomized layouts straightforward to implement. The creators of CSS have at all times been on a mission to reap widespread UI patterns into declarative CSS requirements. Consistent with that spirit, we see that in late 2025, Safari turned the primary browser to assist the CSS random() spec, as a part of an replace that emphasised “letting you clear up widespread use circumstances with HTML and CSS alone, paving the cowpaths, and decreasing the necessity for JavaScript or third-party frameworks.”

Since then, cool demos and discussions of random() hold popping up. As an illustration, Schalk Neethling confirmed us how CSS random() can provide us fine-grained management over the notorious confetti impact, and Alvaro Montoro made a powerful argument that CSS seems to be probably the most appropriate language for such duties. He factors out this strategy is according to the Rule of Least Energy, which inspires “fixing an issue utilizing the least highly effective language able to expressing and fixing it.”

Now the dangerous information: half a yr after Safari launched CSS random(), there isn’t readability on when it is going to land within the different browsers. At time of writing, there are indicators of life that each Chrome and Firefox have been engaged on it, however no ensures about when we will use it outdoors of the Apple world, even behind a browser flag.

So, it appears at present I can solely attempt the web demos of CSS random() on my work MacBook and never on my PC the place I do my private initiatives. I’m tempted to put in writing my very own implementation, however the syntax is surprisingly intricate, largely due to elaborate random caching and keying semantics, mixed with the choices for base values and intervals. Even when I might handle to get all these particulars appropriate, CSS random() is a part of an editor’s draft spec that’s within the “early exploration section” and “main breaking modifications are anticipated.”

On prime of that, from my dive into CSS polyfills in my article on ::nth-letter, we all know the entire thought of a CSS polyfill generally is a minefield.

With all these obstacles in thoughts, an individual must be a particular breed of loopy to try to polyfill CSS random().

Let’s polyfill CSS random()

One of many commenters on a neat YouTube demo of the function marvelled that it’s a “function that works ONLY IN SAFARI?!? Did the Earth get flipped the other way up?” Certainly, I’m extra accustomed to getting my first alternative to expertise emergent options in Chrome, which means my mates on iPhones usually can’t run my experiments.

And but, within the case of random(), it’s darkly poetic {that a} function based mostly on likelihood seems in an surprising place the place many people can’t use it. In actual fact, even Safari customers might profit from my css-random-polyfill bundle, as a result of Safari updates are tied to the OS, that means not everybody can improve to the newest model of the browser. Apart from, we all know how a lot Apple loves it whenever you hack their stuff to enhance compatibility.

Jokes apart, Apple appears severe concerning the “hackability” and transparency of the whole lot concerning the open supply WebKit engine that powers Safari, and a lot of the demos I’ve used to check my polyfill are forks of demos from the WebKit weblog, wherein the Apple Safari crew confirmed off the probabilities for CSS random() again when it was in Safari preview.

Demo: Random starfield

Right here’s my cross-browser model of the primary demo from the Safari crew’s article. It’s a randomly scattered subject of stars fading out and in at random intervals. The bigger, four-pointed stars all tilt on the similar randomly chosen angle. All stars have refined, randomly hued shadows round them.

Emigrate the Safari-only unique to a model that works in Chrome and Firefox, we have to change the HTML to reference my polyfill script and add the randomized marker class to all components that we need to polyfill.