Re: [csswg-drafts] [css-conditional] Element queries (#10509)

My thinking: we already can have multiple ways to have inline conditionals: https://lea.verou.me/blog/2024/css-conditionals-now, and some of them working almost as “block”-level ones as well (the `@keyframes` one), and then at some point we will have proper inline conditionals (as already mentioned), and any block-level conditional **can** be expressed as an inline one, a block-level `@element ()` (or `@if`, in case we'd want to align it with the inline one) could be purely a syntax sugar and a shortcut.

Of course, that is if we'd treat them the same.

>  If we create a loop with this syntax, does it invalidate the entire block?

If we were to work around such conditionals with inline ones, any IACVT variables used for that condition will result in everything inside becoming also IACVT.

Then, if we will have something like `!revertable` (https://github.com/w3c/csswg-drafts/issues/10443) (and in some cases possible to work around today with `revert-layer` (https://kizu.dev/layered-toggles/)), instead of completely nuking all the affected properties we could just fall back to the previous declarations.

Interestingly, only the element itself will be affected in this way: any nested styles could already be expressed as container queries, which properly handle reverting styles when not applying.

```CSS
.foo {
  --color: pink; /* becomes IACVT */
  @element style(--color: pink) {
    --color: not-pink;
    & .bar {
        background-color: pink;
    }
  }
}
```

In the above block, authors could separate the `& .bar` into a container query, which could be cumbersome, but will work as intended. I don't think there is any other way it should behave for `@element`, as there is no better behavior than just not applying styles similar to CQ here.

Thus, my proposal is: if an element query creates a loop in a condition, all affected styles on the element itself should be treated as `!revertable`, and any nested styles should be treated as covered by the same container query.


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


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

Received on Friday, 28 June 2024 20:38:31 UTC