[csswg-drafts] Composite properties. ] (#7593)

korenevskiy has just created a new issue for https://github.com/w3c/csswg-drafts:

== Composite properties. ] ==
In CSS, we often use layered properties. Example:

```CSS
box-shadow: 0 0 10px black, 0 0 20px white;
text-shadow: 0 0 10px black, 0 0 20px white;
background: url(cat.png), url(dog.png), linear-gradient(to bottom, red 0%, blue 100%);
transition: opacity 0.5s, height 1s, background-color 2s;
```
I propose composite properties. Example:
```CSS
box-shadow: 0 0 10px black;
box-shadow+: 0 0 20px white;

text-shadow: 0 0 10px black;
text-shadow+: 0 0 20px white;

background: url(cat.png); 
background+: url(dog.png);
background+: linear-gradient(to bottom, red 0%, blue 100%);

transition: opacity 0.5s;
transition+: height 1s;
transition+: background-color 2s;
```
This will allow you to structure styles by meaning.

```CSS
button{
/* Transition Width */
 width: 50px;
 transition: width 0.5s;
/* Transition box-shadow */
 box-shadow: 0 0 10px black;
 transition+: box-shadow 0.5s;
/* Transition background-color */
 background-color: red; 
 transition+: background-color 1s;
}
```


box-shadoe

* please tag the issue title with the spec's shortname, like `[css-foo]`
  (this is the name from the spec URL, without a level number unless the issue is specific to that level).
  If you're proposing a new feature that doesn't obviously fit in an existing spec, skip this part — don't make something up.

* please be specific (in the title and issue) about what you want to change:
  “make it better” means different things to different people!

* please link to the spec section you're talking about, or at least the spec


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7593 using your GitHub account


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

Received on Thursday, 11 August 2022 12:11:03 UTC