Re: [csswg-drafts] [css-values-5] Maybe min, max and step should not be part of the random-caching-key (#11742)

So @tabatkins and I worked through this issue and our proposal is the following:

1. As Simon proposes in issue, we would drop the min and max values from being part of the caching key.
2. We clarify that the computed value of `random()` function, if cannot be fully resolved, includes the base random value (0-1) from which we index into the range. In order to make this serializable, we allow the base random value as a <number[0,1]> to be specified in place of the caching arguments in the `random()` notation.
3. We make `random()` with no arguments "maximally random" by implicitly including the property name (which is sensitive to whether or not it's a shorthand), an instance index for that declaration (so that two `random()` functions within a given declaration will get different values), and the element identity into the caching key.
4. We define that a named caching key replaces the property/index, so that `random(--foo)` functions applied to a single element can be tied together.
5. We invert the previous `per-element` keyword into `bikeshed-match` (name TBD, Tab proposes `match-element`, I think that's confusing) which disables the per-element identifier so that `random(bikeshed-match)` values can be made to match across elements. (This keeps the property/index key.)
6. We allow combining the custom ident and the new keyword, which allows authors to have globally-synced `random()` functions.

Example of the new caching rules outline above:
    
- **Maximum random:** both properties get a different value, and it's different per element too, so you get lots of random rectangles.
    ```css
    .random-rect {
      width: random(100px, 200px);
      height: random(100px, 200px);
    }
   ```
- **Shared by name within an element:** both properties get the same value, but it's still different per element, so you get lots of random squares.
    ```css
    .random-square {
        width: random(--foo, 100px, 200px);
        height: random(--foo, 100px, 200px);
    }
    ```
- **Shared between elements within a property:** both properties get different values, but they're shared by every element, so you get lots of identical rectangles of a single random size.
    ```css
    .shared-random-rect {
        width: random(match-element, 100px, 200px);
        height: random(match-element, 100px, 200px);
    }
    ```
- **Shared by name globally:** both properties get the same value, and every element shares the random value, so you get lots of identical squares of a single random size.
    ```css
    .shared-random-squares {
        width: random(--foo match-element, 100px, 200px);
        height: random(--foo match-element, 100px, 200px);
    }
    ```

We think this resolves all the comments and suggestions in this issue and in #11747. Agenda+ to discuss; edits in-flight to the spec for review.


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


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

Received on Friday, 7 March 2025 23:26:16 UTC