Re: [csswg-drafts] [css-values] random() function (#2826)

So a similar but different way of representing the different technologies and their purpose is that HTML is for structure, CSS is for presentation, and JS is for logic. I believe that from this view, randomness is a valid way to describe presentation. 

To me, there are two random function types - Range, and Set. Given the nature of randomness and precision, it would also be natural to have rounding and min/max functions, but not necessary.  

### Range
I provide two values and some point in between the two is chosen at random. This would require two values: `<Number1>, <Number2>`

  - Simple Example: `rand(1, 10);`
     - Randomly generated decimal: `0.1443...`
     - Internal Result: `(1 + ((10-1) * 0.1443))`
     - Simpliefied Result: `2.2987...`
  - Complex Example: rand(5mm, -7.5vw, 5px)
    - Randomly generated decimal: `0.7321...`
    - Internal Result: `(5mm + ((-7.5vw - 5mm) * 0.7321))`
    - Simplified Result: None, however the interal result is easilly handled by `calc()`


### Set
I provide a series of values and one of the values is chosen at random. This may have any number of values passed as long as one is passed: `<Number1>, [<Number2>, <Number3>...]`

  - Simple Example: `rand-set(1, 2, 4, 8);`
    - Randomly generated decimal: `0.788...`
    - Internal Result: `set[((4-1) * 0.788)]`
    - Simplified Result: `set[2]`
    - Result: `4`
  - Complex Example: `rand-set(-2px, 4, 120vh, #ffa, translateX(20px))`
    - Randomly generated decimal: `0.929...`
    - Internal Result: `set[((5-1) * 0.929...)]`
    - Simplified Result: `set[4]`
    - Result: `translate(20px)`

*Notes: As rounding functions are unavailable, values are rounded up at values `>=0.5`. I would recommend that if the above syntax is considered, allowing for the final parameter to be a rounding function*

I would also note that I don't believe there is a need however to distinguish between integers and non-integers. Decimals, for example, are allowed in font sizes, color values, and otherwise. Needing further precision would be a rounding function, not a randomness function. 

Additionally, I would suggest that the random value is calculated on a per-element basis at the moment the style is applied. This allows for more concise and powerful syntax (ex: `span {left: rand(100px, 1000px)}` would be calculated separately for each span element). If the user wishes to share a single rand number across multiple definitions, that would be done with CSS variables. Another side-effect would be the re-calculating of random elements when a class is added, another item which would be a desirable default. Again CSS variables would allow the user around this calculation.

As to the general appropriateness - 

To me, if I am describing a document's color and the website's design requires a random color paired with a calculated accent color, it would be improper of me to use JavaScript as the design is not part of the application logic. If I want to generate a randomized starfield where the content is located in stars across the page, that is style, not application logic. 

The purpose of the specification is to allow a better description of the presentation semantics that were not addressed in CSS1. Using JavaScript to describe the presentation of a site is, in my opinion, the least desirable option.

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

Received on Thursday, 23 January 2020 18:42:27 UTC