Re: [csswg-drafts] [css-values-5] weighted values for random-item() (#14079)

I suspect the `background` shorthand is where many functions go to die. Using `{}` might work (though could give issues for the syntax around nesting), but I can't say I like the way it looks. 

Instead, looking at the `url()` function, that lets you add quotes to tell the parser what encompasses the url. These are only needed if otherwise that is impossible to determine. Similarly adding that to random-item would work and would read very naturally along existing CSS patterns:

```css
elem {
  background: random-item(auto, 
    10% / 10%, /* 10% with a weighing of 10% */
    90% / 90%  /* 90% with a weighing of 90% */
  );

 
  background: random-item(auto, 
    '10% / 10%',  /* 10% / 10% with a weighing of 50% */
    '90% / 90%'  /*  90% / 90% with a weighing of 50% */
  );
}
```

I don't know enough about the CSS syntax description but essentially the parser would interpret the `/` as where the weighing begins and not as part of a `<declaration-value>`, but a `<declaration-value>` that starts with a quote also has to end with one. 

Notably, there is already an existing pattern available for _escaping_ quotes if needed, so that's nice:

```css
elem::before {
  content: random-item(auto,
    'boosters are at 20%' / 20%,
    'boosters aren\'t at 20%' / 80%
  );
}
```

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


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

Received on Thursday, 25 June 2026 14:00:32 UTC