[css-values-5] Names of the random-name keywords

[tabatkins]

In #13132 we resolved to change how the random functions' caching key controls work, switching to a name-based model instead to better match author intention. That is:

• random(1, 10) is max-random: virtually every instance on the page will be a different random value
• random(--foo, 1, 10) is min-random: every function that uses --foo will get the same random value

If you supply a dashed-ident name, you can also specify keywords that "mix in" certain aspects of the usage into the name to make it a little more unique, giving you intermediate-level randomness where some instances share the random value but others don't.

Per the resolution (and per the spec in a bit when I edit it in), the current keywords are:

• random(--foo element, 1, 10) mixes in an element identifier, so usages on an element will all share the random value, but different elements will get different values
• random(--foo property, 1, 10) mixes in the property name, so usages in a single property will share the random value (still global across elements), but using it in different properties gives a different value
• random(--foo property index, 1, 10) mixes in the property name and the random function's index in the property, so multiple usages even in the same property will get different values.

(You can also mix them; random(--foo element property index, 1, 10) is basically identical to the max-randomness random(1, 10) use, except it can separate out some usages in weird corner cases that would otherwise become identical.)

---

We resolved to accept these suggested keywords, but to open a new issue to discuss their exact spelling.

If anyone has alternate ideas they'd like to champion, feel free. (Otherwise, we'll just stick with the resolution.)

[romainmenke]

I think these names are fine.

---

There isn't really any hint as to what the keywords do or why they are there.
So it isn't possibly to intuit that these are inputs for a caching key.

random in this property vs. cached in this property

But any idea I have is fairly verbose:

• random(cache-key(--foo element), 1, 10)
• random(key(--foo element), 1, 10)
• random(cached --foo element, 1, 10)
• random(--foo cached-per-element, 1, 10)

This is also why I think the proposal above is ok.
Making the feature self documenting seems to make it very verbose and a lot of CSS has syntax that authors lookup every time they use it.

[bramus]

There isn't really any hint as to what the keywords do or why they are there. So it isn't possibly to intuit that these are inputs for a caching key.

random in this property vs. cached in this property

I believe that if we renamed <random-value-sharing> in the spec to <random-caching-strategy> (or something like that), it would make things more clear all by itself. The name then hints at what it does.

If anyone has alternate ideas they'd like to champion, feel free.

I like the per--prefixed ones, but I’m also not opposed to the existing names.

[tabatkins]

I've just pushed the edits (save for fixing a diagram which i'll do tomorrow), and by coincidence I found that I agreed with Bramus here: changing the name of that nonterminal was a big help. It's now called <random-cache-key>, which I think is slightly more intuitive that --foo element makes the key involve the "--foo" name and the element itself. Hopefully.

In any case, people can learn, and I think the new structure where the two big endpoints (nothing, and a bare ident) both do what authors expect is great, and the additional keywords all consistently make the randomness more unique which is also great.

[Crissov]

The <random-cache-key> argument is required in random-item(), but optional in random(), for parsing reasons

🙄 That is a lame excuse for bad design. nth-item(random(), ...) (or similar) would not have that problem.

I’m still unconvinced that the random key caching strategy belongs inside the function in value space. If you don’t like random(--key) without limits, because it’s too much like var(--key), just use that then:

@random --foo from 1px to 100px per element;
/* or */
@property <length> --foo random(1px, 100px) per element;
/* or */
@property --foo {
  syntax: <length>;
  initial-value: random(1px, 100px);
  key-cache: element;
}
/* or similar */

.random-square {
  width: var(--foo);
  height: var(--foo);
}

Leave random() to values as random as possible.

[tabatkins]

That is a lame excuse for bad design.

That's not how we talk to each other in the W3C. Please edit your post, and do not do that again.

nth-item(random(), ...) (or similar) would not have that problem.

It's effectively identical in terms of the parsing shape (you're required to pass an index first, same as being required to pass a cache-key first), except worse in practice since you have to manually write out the length of the list.

---

I don't understand what your proposal in the latter half is.