DEV Community

Sergey Ieffe
Sergey Ieffe

Posted on • Updated on

Ever thought of random numbers in CSS?

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().

Top comments (3)

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
 
sergeyie profile image
Sergey Ieffe

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.