Re: [csswg-drafts] Idea: Properties with Object Values (#9502)

Brainstorming, there could be a way to use `{}`-blocks for both an alternative syntax for shorthand properties and for providing expressiveness for JS-based objects for property values.

In these regards, three options are presented. Each involves a use of the `-` symbol.

One option would involve appending a `-` to an involved property name:
```css
div {
  animation-: {
    delay: 250ms;
    direction: normal;
    duration: 1s;
    fill-mode: none;
    iteration-count: 1;
    name: kf;
    play-state: paused;
    timeline: auto;
    timing-function: ease-in-out;
  };
}
```
Another option would involve prepending a `-` to involved subproperty names:
```css
div {
  animation: {
    -delay: 250ms;
    -direction: normal;
    -duration: 1s;
    -fill-mode: none;
    -iteration-count: 1;
    -name: kf;
    -play-state: paused;
    -timeline: auto;
    -timing-function: ease-in-out;
  };
}
```
A third option would involve both uses of the `-` symbol:
```css
div {
  animation-: {
    -delay: 250ms;
    -direction: normal;
    -duration: 1s;
    -fill-mode: none;
    -iteration-count: 1;
    -name: kf;
    -play-state: paused;
    -timeline: auto;
    -timing-function: ease-in-out;
  };
}
```
If this third option, we might see cases where a `-` symbol would both prepended and appended to a subproperty name, e.g., `-blend-`:
```css
div {
  animation-: {
    -delay: 250ms;
    -direction: normal;
    -duration: 1s;
    -fill-mode: none;
    -iteration-count: 1;
    -name: kf;
    -play-state: paused;
    -timeline: auto;
    -timing-function: ease-in-out;
    -blend- { -start: normal; -end: normal; };
  };
}
```

In this approach, the absence of any `-` symbol would be for expressing JS-like objects for property values.

The gist is the three possibilities, above, is that, by using `-`, in some manner, to signal the utilization of the alternate CSS syntax for shorthand properties, CSS could additionally support the expressiveness for having JS-based objects as property values.

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


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

Received on Friday, 20 October 2023 22:57:02 UTC