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

We had a breakout with @tabatkins and @fantasai on Friday, and we think we may have found a better implementable way forwards. I'm going to attempt to summarize below, @tabatkins @fantasai feel free to add/correct accordingly.

- It looks like what we basically need with this `@if` rule is a selector, and the only reason it's currently an at-rule is that the cascade needs to resolve before computed style. There are several drawbacks with this:
 - We will end up duplicating parts of the cascade to make this workable
 - The invalid at computed value time behavior is suboptimal
 - And of course all the problems with partial application and rules being different when joined compared to when they are separate, that have already been discussed earlier in the thread
- Can we actually make it a pseudo-class somehow, which will cascade normally??
- Currently, custom properties do resolve earlier than other parts of the cascade, but the fact that they can contain anything, including relative lengths and/or other `var()` references means conditions cannot be evaluated early enough.
- What if we introduce a *new* type of custom property that is more limited in what it can accept, and thus can be resolved early enough that it can be used in a pseudo-class?
- These custom properties (which can be taught as "constants" instead of "variables"):
 - Can only take `<number>` and `<keyword>` values (syntax may be extended in the future). They cannot contain `var()` references.
 - Will likely be syntactically different rather than just a different option in `@property`/`CSS.registerProperty()`. This way the difference is obvious, and also since they are resolved so early, they are not subject to IACVT and can "fail early" like every other property. Exact syntax TBD.
 - Their values can be referenced with `var()` just like regular custom properties.
 - Custom properties can reference them with `var()`, even though the opposite is not true.

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


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

Received on Monday, 25 January 2021 15:15:19 UTC