[csswg-drafts] [css-backgrounds] [css-text-decor] {box,text}-shadow longhands (#6041)

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

== [css-backgrounds] [css-text-decor] {box,text}-shadow longhands ==
The [`box-shadow`](https://drafts.csswg.org/css-backgrounds/#box-shadow) and [`text-shadow`](https://drafts.csswg.org/css-text-decor-4/#text-shadow-property) properties currently don’t have longhand properties.

Should there be a `box-shadow-color` property, for example? It could be used to change just the color of a box shadow without respecifying the other values, or animating/transitioning just the color even if the some other values changed too.

I know these are already possible with custom properties and `@property`/`CSS.registerProperty()`, but the longhands would make things much terser.

<details>
<summary>Example</summary>

```css
@property --box-shadow-color {
   syntax: '<color>';
   inherits: false;
   initial-value: currentcolor;
}

div {
   box-shadow: 0 0 0
      var(--box-shadow-spread, 2px)
      var(--box-shadow-color);
   transition: --box-shadow-color 0.5s;
}

div:hover {
   --box-shadow-spread: 10px;
   --box-shadow-color: lime;
}
```

**[(Live demo)](https://codepen.io/valtlai/pen/XWNZyXv)**

Could be just:

```css
div {
   box-shadow: 0 0 0 2px currentcolor;
   transition: box-shadow-color 0.5s;
}

div:hover {
   box-shadow-spread: 10px;
   box-shadow-color: lime;
}
```
</details>

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


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

Received on Friday, 26 February 2021 23:14:16 UTC