Re: [csswg-drafts] [css-cascade] Additive CSS (#1594)

> It's not clear to me (particularly given [#1594 (comment)](https://github.com/w3c/csswg-drafts/issues/1594#issuecomment-952428022)) whether this issue should cover all additive cascading concepts in CSS, or only those intended for animation.

I believe those for animation are already covered by the [prior resolution](https://github.com/w3c/csswg-drafts/issues/1594#issuecomment-319631001) to ship Web Animations with additive animation and by the [`animation-composition`](https://drafts.csswg.org/css-animations-2/#animation-composition) property @birtles mentioned in his initial post.

And given the long discussion in this issue about a general solution, I think it makes sense to keep using this issue to find a general solution.

@tabatkins Could you explain why you think @Kilian's comment belongs to a different issue? 

Regarding "all cascading concepts", we should first clarify what those different concepts are. As far as I can see, we have two general main concepts (which @birtles already mentioned in his initial post).

# Manipulating a numeric inherited value

This means a numeric value is calculated relative to the value given by the cascade. In Brian's example this was a `blur(5px)` on a given `blur(2px)` resulting in a `blur(7px)`. Another example would be adding `10px` for the top padding to a given `padding: 20px` resulting in `padding: 30px 20px 20px 20px`.

I guess those use cases may already be covered by #2864, `calc()` and/or custom properties.

# Adding a value to a list of values

This means any kind of value is appended to (or removed from) the list of a property's value, independent of whether it is inherited or not.

This is what Brian wrote as `blur(2px)` + `blur(5px)` resulting in `blur(2px) blur(5px)` and generally what people mean as adding values to a property. This is obviously also what people had in mind when suggesting additive cascade as solution for #7066.
There it doesn't matter if the value is space-separated like in `transform` or `filter` or comma-separated like in `background` or `box-shadow` as mentioned by @Kilian.
Other examples for them would be `transform: scale(1.2)` + `transform: translateX(100px)` = `transform: scale(1.2) translateX(100px)`, `box-shadow: 2px 0 2px red` + `box-shadow: -2px 0 2px blue` = `box-shadow: 2px 0 2px red, -2px 0 2px blue` or `container-type: style` + `container-type: size` = `container-type: style size`.

As mentioned above, there might also be cases in which people want to _remove_ a value from the list of values. E.g. as we now have style containment by default (which can't be removed at the moment), people may explicitly remove it for cases they only want size containment to improve performance.

Sebastian

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


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

Received on Sunday, 14 August 2022 23:58:21 UTC