Rolling the dice with CSS random()

https://webkit.org/blog/17285/rolling-the-dice-with-css-random/

by zdw • 11 months ago

145 31 11 months ago

webkit.org

gherkinnn2• 11 months ago

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.

noman-land• 11 months ago

Maybe "usable" is your qualifier but what's wrong with Math.random()?

tsujp• 11 months ago

JS also has Crypto.getRandomValues()

akdev1l• 11 months ago

To generate random number in a specific range you need to do something I always forget and need to google.

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

(Google AI summary says this is the thing)

The CSS function would be random(min, max)

Also the CSS function seems to take a number of steps, it is not immediately obvious to me how to do that with Math.random()

ballenf• 11 months ago

So now we can add a random data prop to a hidden dom element, then query that from JS. You know, to make your JS random function simpler. ;)

gherkinnn2• 11 months ago

That was my second idea. I've done worse.

jvdvegt• 11 months ago

Nice but... no dice!

Tepix2• 11 months ago

Related: Animated starfield in pure CSS

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

lelandfe• 11 months ago

Really laggy on an M1 MBP; probably `box-shadow`'s fault.

Tepix2• 11 months ago

Have you tried different browsers?

kachapopopow• 11 months ago

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

hannob• 11 months ago

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?

17186274402• 11 months ago

Security in the Stylesheet? Come on, you need to set boundaries for expectable use.

phyzome• 11 months ago

"Look, I implemented diceware in pure CSS!" is unfortunately not that hard to imagine.

I would bet someone is already working on it as we speak.

bigDinosaur• 11 months ago

If you implement security protocols in a production app using CSS then you deserve to be hacked and then sued for negligence.

RestartKernel• 11 months ago

Counterargument: it would make for a very funny post-mortem.

demurgos• 11 months ago

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.

twiss• 11 months ago

Spec: https://www.w3.org/TR/css-values-5/#randomness

WPT test results: https://wpt.fyi/results/css/css-values?label=master&label=ex...

Only Safari supports it for now, it seems.

ameliaquining3• 11 months ago

And only in a prerelease build; no browser has yet shipped this to users by default.

JKCalhoun• 11 months ago

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.

chipsrafferty• 11 months ago

Says who? Why would I refresh to see the same page? Usually I refresh because I want to see some different content.

Analemma_• 11 months ago

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.

capitainenemo2• 11 months ago

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.

pstuart• 11 months ago

I'm not sure if I'll ever get a chance to use that but it was very informative nonetheless.

capitainenemo2• 11 months ago

(oh, I should note that the 2nd link uses nth selector to apply any rules pseudo-randomly, not just tiles) ... and, hm, I guess you could "seed" the pseudorandom nth selectors if your pages had unique attribute selectors, by adjusting the primes and offsets. Like with drupal you could do different ones based on digits of the nid in the body tag.

ericyd• 11 months ago

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.

EduardoBautista• 11 months ago

I can only imagine the groundbreaking and innovative MySpace themes that would have been possible with this new random technology.

Rolling the dice with CSS random()

Related Stories