Re: [csswg-drafts] [css-variables?] Higher level custom properties that control multiple declarations (#5624)

> We'd relax all restrictions related to the proposed const-variables, since we wouldn't need to introduce them: `:const()` would refer to the existing custom properties. When matching selectors for a given element, the computed values of the parent/ancestor/preceding-sibling is already known*, so it should be fine-ish to depend on those computed values during selector matching of a subsequent element.

In that case, this sounds like a much better solution over everything else that has been proposed so far. 

Does that mean that we could even have full-blown conditionals, e.g. `100vw > 500px`? That would be a nice to have, though not required for the primary WC use cases.

> Might be too annoying for authors if they have to wrap their component in a "control element" just to set high-level variables though. Perhaps combine with an inline `if()`/`switch()` that can be used on the element itself? (Just thinking out loud).

I was hoping they'd be very useful in Shadow DOM, branching off conditionals on the main element. Yes, it would be annoying to force authors to introduce extra elements.

However, I believe there's more or less consensus on a bunch of different inline conditional functions in #5009. I've even been playing around with an (unofficial) draft for an `if()` with IACVT behavior [here](https://drafts.csswg.org/css-conditional-values-1/#if), feedback very welcome.

If computed style of parents is known when matching descendants, I wonder if we can make it more powerful, and use the same general value comparisons instead of something specific to custom properties.

Although do note that with this strategy, the previous compound selectors are not always ancestors, they may be previous siblings, and in the future, as new combinators get introduced, potentially anywhere in the tree. See [my comment](https://github.com/w3c/csswg-drafts/issues/5979#issuecomment-803506068) on #5979 that proposed as similarly subject-excluding pseudo-class.

> `*` In Chrome that is. Hopefully also in other browsers.

🤞🏼 

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


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

Received on Friday, 26 March 2021 00:48:16 UTC