Re: [csswg-drafts] [css-backgrounds] Make box-shadow a Shorthand Property (#4431)

The suggested syntaxes are missing a few things:

1. `box-shadow` takes a _list_ of shadows, so all the longhands also need to take lists, similar to the different `background-*` longhands.
2. There's no longhand for the `inset` keyword.
3. There is no spread radius property defined for `text-shadow` while it was [added to it in Text Decoration 4](https://drafts.csswg.org/css-text-decor-4/#text-shadow-property).
4. The `none` keyword is not part of any longhand. (Or are there any precedent cases for that?)

So regarding those points, I suggest the following:

For [`box-shadow`](https://drafts.csswg.org/css-backgrounds-3/#box-shadow):

```abnf
box-shadow-offset: [ none | <length>{2} ]#
box-shadow-color: <color>#
box-shadow-blur: <length>#
box-shadow-spread: <length>#
box-shadow-position: [ outset | inset ]#
box-shadow: <spread-shadow>#
<spread-shadow>: <'box-shadow-color'>? && \
                 [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && \
                 <'box-shadow-position'>?
```

For [`text-shadow`](https://drafts.csswg.org/css-text-decor-3/#text-shadow-property):
```abnf
text-shadow-offset: [ none | <length>{2} ]#
text-shadow-color: <color>#
text-shadow-blur: <length>#
text-shadow-spread: <length>#
text-shadow: <shadow>#
<shadow>: <'text-shadow-color'>? && [ <'text-shadow-offset'> [ <'text-shadow-blur'> <'text-shadow-spread'>? ]? ]
```

Explanation:

All longhand properties are defined to take comma-separated lists of values like the different `background-*` longhands.

The `box-shadow-position` property is responsible for defining whether the shadow should be an outer or an inner shadow.

I've added the `none` keyword to the `*-offset` properties because that is the only part that is required in the shorthand. That means that the display of the shadow is controlled by the value of the `*-offset` property, similar to the display of a background being controlled by the `background-image` property.

I've also renamed the data value of `box-shadow` to `<spread-shadow>` so it doesn't conflict with the one of `text-shadow`. (Though I believe `text-shadow` should also allow the `inset` keyword, see #6074)

Sebastian

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


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

Received on Wednesday, 3 March 2021 22:19:25 UTC