Rolling the Dice with CSS Random()

Nice. Currently I have to set CSS custom properties with JS to achieve the same effect.

Wonderful to see how CSS gets a usable random function before JS does.

    Math.floor(Math.random() * (max - min + 1)) + min;

    Math.floor(Math.random() * Math.floor((max - min) / step)) * step + min

Related: Animated starfield in pure CSS

https://codepen.io/ArneSava/pen/BaWxOaR

Having seen too many "this randomness function was never meant to be used for security, but people use it for security anyway" vulnerabilities in the past:

Can we PLEASEPLEASEPLEASE have this secure by default from the beginning?

Where is the spec? I can't find an entry on MDN.

Is there a way to get reproducibility? In the same browser or across browsers? Even if it's not the default mode.

Perhaps you can set the seed to a fixed value on page loads? I kind of like the idea of the same "random" star field even if the user refreshes the page. Or rather, it would somewhat bother me if it changed for a refresh since a refresh is supposed to simply re-present the same web page.

This seems like a good opportunity to bring up the old, more hacky, but also more performant and predictable CSS random effect using backgrounds of prime number sizes to achieve a "random" distribution. The "cicada principle"

https://www.sitepoint.com/the-cicada-principle-and-why-it-ma...

https://lea.verou.me/blog/2020/07/the-cicada-principle-revis...

In this case you would use multiple transparent tiles of different star patterns (images, or gradient/clip-path tricks), each one a different prime number in size. It should work with anything you can tile and overlay in CSS though.

These examples feel a bit contrived, are there any other cases where random CSS values would be useful? I don't often reach for randomness when doing business apps.

I yern for the day we can have react-type pages without any javascript. Keep chugging webkit I believe in you.

The starfield example is cool but it seems like that might be exactly where random() wouldn’t work as well as people hope: true randomness often looks pretty bad when you want to make graphics out of it, because true randomness has clumps and voids, and a lot of observers think it looks less random than pseudorandom sequences with more evenly-spaced points.

The term for this is “low-discrepancy sequences”, there have been a handful of HN posts on it over the years. I know I’m bikeshedding the API already before it even really exists, but for image presentation I think a lot of applications might actually find that more useful.

Nice but... no dice!