Re: [csswg-drafts] [css-cascade] Idea: Multiple Values for a Property (#9490)

In short: I don't yet have a concrete use case example, on hand, for the expressiveness. However, someone else might!

There are three abstract topics from the initial post:

1. concatenating properties' values. 
2. iterable properties.
3. combining these ideas, concatenating iterable properties' values.

While any possible eventual syntax might vary, here are some examples of the three topics:

## Concatenating Properties' Values

```css
.cls1 { ^prop: value1 }
.cls2 { ^prop: value2 }
```
```html
<div id="el" class="cls1 cls2" />
```
```js
let element = document.getElementById('el');
let x = element.style.getPropertyValue('prop'); // == "value1 value2"
```

## Iterable Properties
```css
.cls3{ *prop: yield(x) yield(y) }
```
```html
<div id="el" class="cls3" />
```
```js
let element = document.getElementById('el');
let value = element.style.getPropertyValue('prop'); // "x y"
for (const x of element.style.getPropertyValues('prop'))
{
  // x, y
}
```

## Concatenating Iterable Properties' Values
```css
.cls4 { ^*prop: yield(x) yield(y) }
.cls5 { ^*prop: yield(z) yield(w) }
```
```html
<div id="el" class="cls4 cls5" />
```
```js
let element = document.getElementById('el');
let value = element.style.getPropertyValue('prop'); // "x y z w"
for (const x of element.style.getPropertyValues('prop'))
{
  // x, y, z, w
}
```

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


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

Received on Thursday, 20 February 2025 09:51:46 UTC