DEV Community

loading...

Ever thought of random numbers in CSS?

sergeyioffe profile image Sergey Ioffe ・1 min read

New rand() function in CSS3 like math.rand() in JavaScript would be so good. There's rand with Sass, but it generates only static values. And there is an option of random numbers for CSS using JavaScript snippets. It isn't so cool and requires code. Definitely rand() in CSS3 is highly demanded, e.g. as calc().

Discussion (3)

pic
Editor guide
Collapse
afif profile image
Temani Afif

github.com/w3c/csswg-drafts/issues... .. it will come one day
Maybe you don't know it but we already have a lot of Math in CSS in addition to calc()
w3.org/TR/css-values-4/#round-func
and this one w3.org/TR/css-values-4/#toggle-not...

Collapse
moopet profile image
Ben Sinclair

Can you think of an example of when it would be useful?

Collapse
sergeyioffe profile image
Sergey Ioffe Author

It's e.g. when create a class for a design element that is likely to have varied sizes like a dashboard with sticky notes that aren't all the same size.
.random { width: rand(Npx,Mpx,t) } N=min, M=max, t=level (step) of randomization, etc.
Each time the page loads, the user has slightly another look.