Intent to Ship: CSS random() function

[Munira Tursunova]

Contact emails

moo...@google.com

Explainer

https://webkit.org/blog/17285/rolling-the-dice-with-css-random
https://css-tricks.com/almanac/functions/r/random

Specification

https://www.w3.org/TR/css-values-5/#random

Summary

The random() function brings generative randomness to CSS, allowing web authors to generate a random numeric value within a specified range. For example, web authors can use random() to scatter elements randomly within their container: 

.dot {
  /* Position each dot randomly */
  position: absolute;
  top: random(0%, 100%);
  left: random(0%, 100%);
}

This feature also includes caching controls. By default, each random() function resolves to a new, distinct value. Web authors can override this default by passing a <random-key> value as the function's first argument to control how random values are shared across properties and elements.

Blink component

Blink>CSS

Web Feature ID

Missing feature

Motivation

The CSS random() function provides a native way to generate random values directly in CSS without relying on JavaScript, reducing code complexity while making it easier for developers to create varied and dynamic designs.

Initial public proposal

No information provided

Search tags

random

TAG review

No information provided

TAG review status

Pending

Goals for experimentation

None

Risks

Interoperability and Compatibility

Low, shipped in Safari and positive signals from Firefox

Gecko: Positive (https://github.com/mozilla/standards-positions/issues/809)

WebKit: Shipped/Shipping (https://webkit.org/blog/17285/rolling-the-dice-with-css-random)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

Currently not supported in DevTools value debugger. Might be hard to support since we need to know the specified random value position for caching. See: issues.chromium.org/issues/40068516.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=random

Flag name on about://flags

No information provided

Finch feature name

CSSRandomFunction

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/413385732

Estimated milestones

Shipping on desktop	155
Shipping on Android	155

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5324559251275776?gate=6579011069280256

[Rick Byers]

LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_BJPLpBboYSF9%2BJrrRv8Obi%3DtUDXRw3BJvpuJd9TzVqKg%40mail.gmail.com.

[Yoav Weiss (@Shopify)]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY_qHd4swn0H_csNasixsX4GAKmE-GMtEdjQFvpTDF12Ow%40mail.gmail.com.

[Daniel Bratell]

LGTM3

/Daniel

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOmohSK7j-Dhd0G5EQuiDO3nWSsWcXYSW5CeRpjvAwiVjBrHKg%40mail.gmail.com.

[Vladimir Levin]

LGTM3

LGTM1

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAO7W_BJPLpBboYSF9%2BJrrRv8Obi%3DtUDXRw3BJvpuJd9TzVqKg%40mail.gmail.com.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.