For example, in the following stylesheet:
.random-square {
width: random(100px, 500px);
height: random(100px, 500px);
}
The [=random-caching keys=] for both functions are identical:
(100px, 500px, null, null, null).
This means that both will resolve to the exact same value,
guaranteeing a square element
with a size somewhere between ''100px'' and ''500px''.
Additionally,
every ''.random-square'' element
will have the same size.
On other hand, in this stylesheet:
.random-rect {
width: random(100px, 500px);
height: random(--x, 100px, 500px);
}
The [=random-caching keys=] are distinct between the two functions:
the function in 'width' has
(100px, 500px, null, null, null),
while the function in 'height' has
(100px, 500px, null, --x, null).
This means the two functions will resolve to distinct random values,
making it very unlikely for the element to be square.
However, every element matching ''.random-rect''
will still have the
same random size.
Changing any aspect of the function also alters this key.
The following two declarations are similarly distinct,
resulting in the width and height having no connection to each other:
.random-rect-2 {
width: random(100px, 500px);
height: random(100px, 500px, by 50px);
}
But so long as the [=used values=] end up identical,
two functions that look distinct might end up identical.
For example, in the following code:
.random-square-2 {
font-size: 16px;
width: random(160px, 320px);
height: random(10em, 20em);
}
The two functions superficially look different,
but after the lengths are fully resolved
they end up with identical [=random-caching keys=];
each is
(160px, 320px, null, null, null),
so actually the widths and heights will end up always identical.
By default, each instance of a ''random()'' function in a stylesheet
essentially resolves to a static value,
which is then shared by every element that property applies to.
This behavior can be changed with the ''per-element'' keyword.
For example, in:
.foo { width: random(100px, 500px); }
Multiple elements matching ''.foo'' will end up with the same random width.
But in:
.foo { width: random(per-element, 100px, 500px); }
Every element matching ''.foo'' will get its own
unique width.
Note that this causes the value to be unique per element,
not per
value necessarily.
For example, in:
.random-squares {
width: random(per-element, 100px, 500px);
height: random(per-element, 100px, 500px);
}
Every element matching ''.random-squares'' will get a distinct random value,
but that value will be
the same for 'width' and 'height' on a given element,
making the element square.
This is because in both properties
the [=random-caching key=] is
(100px, 500px, null, null, [unique value for the element]),
so both functions will resolve to the same length on a single element.
This makes random values in [=custom properties=] act more predictably.
The preceding code could also be written as:
.foo {
--size: random(per-element, 100px, 500px);
width: var(--size);
height: var(--size);
}