Re:Rolling the Dice with CSS Random()
by hannob on Sunday August 24, 2025 @06:04AM
(#45002921)
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?
Re:Rolling the Dice with CSS Random()
by 1718627440 on Sunday August 24, 2025 @01:24PM
(#45005965)
I don't disagree on that point.
Introducing cryptography in the STANDARD for stylesheets adds complexity where it doesn't belong. Ultimately a browser vendor isn't responsible when a company sells insecure cryptography.
Adding crypto to CSS will bring us nearer to bitcoin mining in the CSS engine.
Re:Rolling the Dice with CSS Random()
by JKCalhoun on Sunday August 24, 2025 @08:50AM
(#45003881)
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.
Re:Rolling the Dice with CSS Random()
by Analemma_ on Sunday August 24, 2025 @10:02AM
(#45004323)
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.
Re:Rolling the Dice with CSS Random()
by capitainenemo on Sunday August 24, 2025 @11:20AM
(#45004895)
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"
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.
Re:Rolling the Dice with CSS Random()
by capitainenemo on Sunday August 24, 2025 @02:22PM
(#45006433)
(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.
Re:Rolling the Dice with CSS Random()
by ericyd on Sunday August 24, 2025 @10:18PM
(#45009596)
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.
Wonderful to see how CSS gets a usable random function before JS does.
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()
I imagine there's some deep ideological war over whether to add more programming functionality to css...
https://codepen.io/ArneSava/pen/BaWxOaR
Can we PLEASEPLEASEPLEASE have this secure by default from the beginning?
I would bet someone is already working on it as we speak.
Introducing cryptography in the STANDARD for stylesheets adds complexity where it doesn't belong. Ultimately a browser vendor isn't responsible when a company sells insecure cryptography.
Adding crypto to CSS will bring us nearer to bitcoin mining in the CSS engine.
Is there a way to get reproducibility? In the same browser or across browsers? Even if it's not the default mode.
WPT test results: https://wpt.fyi/results/css/css-values?label=master&label=ex...
Only Safari supports it for now, it seems.
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.
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.