*Summary*:
The CSS *random()*
<https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/random> math
function allows authors to introduce randomness into their styles,
generating a random value in a given range (with an optional increment)
that is usable anywhere that math functions can be specified.
/* Each function on each element gets its own random value. */
* .confetti*
*{* *width*: *random*(8px, 24px);
*rotate*: *random*(0deg, 360deg);
*animation-delay*: *random*(0s, 2s, 0.1s);
* }*
By default, *random()* generates values essentially "as randomly as
possible", where each instance will generate a new random value. Authors
can specify a *random key* to precisely control how random values are
generated and shared across properties, elements, and/or globally.
/*
* Each tile will have a different size (due to element-scoped),
* but all tiles will be square (due to the shared --size key
* for width and height). All tiles will have the same random
* opacity (due to the single --global key).
*/
* .tile*
*{* *width*: *random*(--size element-scoped, 40px, 80px);
*height*: *random*(--size element-scoped, 40px, 80px);
*opacity*: *random*(--global, 0.5, 1.0);
* }*
We intend to implement this function behind the *layout.css.random.enabled*
pref.
*Bug*:
Bug 1836588 - Implement CSS random() function
<https://bugzilla.mozilla.org/show_bug.cgi?id=1836588>
*Specification*:
https://drafts.csswg.org/css-values-5/#random
*Standards Body*:
CSSWG / W3C
*Platform Coverage*:
All
*Preference*:
*layout.css.random.enabled* — Bug 2071165
<https://bugzilla.mozilla.org/show_bug.cgi?id=2071165> to implement and
enable in Nightly
*DevTools Bug*:
Bug 2071366 <https://bugzilla.mozilla.org/show_bug.cgi?id=2071366> —
Support *random()* in devtools. Minimum implementation is to ensure that
*random()* functions are properly parsed in both registered custom property
syntax matching and CSS explainers
<https://bugzilla.mozilla.org/show_bug.cgi?id=1800085>.
*Extensions Bug*:
N/A
*Use Counter*:
N/A
*Standards-Positions Discussion*:
https://github.com/mozilla/standards-positions/issues/809 — Positive
*Other Browsers*:
- *Blink*: Estimated to ship in Chrome 155 (Intent to Ship
<https://groups.google.com/a/chromium.org/g/blink-dev/c/ERWNExcOwcg/m/-HoIZfEcAgAJ>
).
- *WebKit*: Shipped in Safari 26.2
<https://developer.apple.com/documentation/safari-release-notes/safari-26_2-release-notes>,
*element-scoped* keyword shipped in Safari 26.5
<https://webkit.org/blog/17938/webkit-features-for-safari-26-5/>,
*property-scoped/property-index-scoped* keywords shipped in Safari
Technology Preview 251
<https://webkit.org/blog/18194/release-notes-for-safari-technology-preview-251/>
.
*web-platform-tests*:
https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=path%3A%2Fcss%2Fcss-values%2Frandom%20!path%3A%2Fcss%2Fcss-values%2Frandom-item
*Note: Open questions regarding random():**- *
https://github.com/w3c/csswg-drafts/issues/10982#issuecomment-5563056165
- https://github.com/w3c/csswg-drafts/issues/14478
--
You received this message because you are subscribed to the Google Groups
"[email protected]" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/4419f5a1-897e-43fe-ab24-c6cd25fcd3a7n%40mozilla.org.
