Re: [csswg-drafts] [css-values-5] seeded random values (#12072)

Sharing my thoughts on this topic:

## I think usecases for a seed are …

* debugging scenarios. Let us consider that two [stacks of photos](https://webkit.org/blog/17285/rolling-the-dice-with-css-random/) are placed next to each other and unexpectedly the stacks overlap and create awkward artifacts. A web user reports this for a website. The web developer looks at convoluted CSS code. The boundary values are computed by CSS variables supplied by the server, because they took the actual image sizes (determined in the backend) into account. If these values are passed through functions like `clamp()`, it is difficult to determine the actual boundary values supplied to `random(min, max, step)`. Debugging the scenario with a user-provided seed would be the best case.
* development scenarios. A developer could be lazy and just claim “make the width of the navigation bar random”. The developer just reloads the page several times and once the width appears visually appealing, the developer takes over the value. I admit the usecase is contrived, because changing the width with the drag-and-drop slider in the web developer toolbar is simpler. Furthermore the user wants the actual width in the end and not just a seed.

## The seed could be read …

* from the web developer toolbar. It would be nice to be able to communicate something like “can you open up the web developer toolbar and open up the style editor” because it reveals the used seed if any call to `random()` happened in the stylesheet.
* from the local system time. If the seed would be based on the local system time up to a precision of seconds, a screenshot of the screen (which commonly on GUIs and TUIs includes the local time) would reveal the seed.

## The seed could be defined …

* globally
  * `@random-seed "123";` inside the stylesheet
  * `:root { random-seed: 123 }` inside the stylesheet
  * `<meta name="random-seed" content="123" />`, as @lencioni proposed, in HTML which makes linked stylesheets to load deterministically
  * `CSS-randomization-seed: 123` as HTTP header
* locally per DOM element
  * `* { random-seed: 123 }`, as @lencioni proposed, in CSS

Recognize that CSS stylesheets are loading before a frontend developer (without access to the web server) can define the seed. Is it feasible to load the page, add a seed declaration through (e.g.) web developer toolbar and reinterpret the stylesheet? I am not that familiar with web browser architecture, but it seems difficult.

## My personal opinion

In the paragraphs above, I tried to write down options. My personal opinion is that any randomized layout must be trivially reproducible by the developer.

* Accepting the `random(min, max, step)` API, I would prefer the global, optional `@random-seed "123";` declaration in stylesheets which makes `random(…)` values deterministic [by order within the stylesheet and by their call arguments]. This way only one seed needs to be reported to the debugging developer.
* Revising the `random(min, max, step)` API, my personal intuition is that there is an entropy threshold for reasonable usecases.
  * `threshold=1000`. With appropriate tools, iterating 1000 values seems “borderline reasonable”. Followingly, the `random(min, max, step)` API is too broad. Therefore I would prefer an optional stylesheet-based `@static-sample 123` declaration and `sample(min, max, step)` calls where a requirement like `⌈(max - min + 1) / steps⌉ ≤ 1000` is defined for integers.
  * `threshold=60`. `@current-second 10` and `current-second()` seem appropriate then. I admit this proposal does not consider units and only samples integer values.

-- 
GitHub Notification of comment by meisterluk
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12072#issuecomment-3217985889 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 24 August 2025 09:59:47 UTC