Re: [csswg-drafts] [mediaqueries][css-conditional] else (#112)

@tabatkins 

> Yeah, https://github.com/when is purely a way to combine an https://github.com/supports and https://github.com/media query together in a single conditional; without this, you have to nest and repeat yourself in a way that's both hard to write and hard to read.

I guess I'm trying to think of a use case where one would combine `@media` and `@supports`, and then would need to exclude those criteria in an `@else`. I get these are both types of queries but I guess I've never seen an intersection or a coupling of the two ideas, where the media properties were linked to the supports test in some way. 🤔 

The spec example says:

> For example, here’s a (somewhat silly) conditional chain

But are there non-silly, logical connections between `@media` and `@supports`? Commonly enough that there's been a need to combine these into single-line queries? Any real-world examples? I'm not saying there aren't--I'm legitimately curious because I haven't encountered this.

@LeaVerou 

> is also an extensibility point for future conditionals as well.

Yeah, I get this, and it makes sense to some degree. I do wish we could already define / test stylesheet vars, like:
```c
@var {
   --theme: 'dark';
}

/** extend var() to look at globals first, not just cascade :root props, so that could use var() in queries **/
@when (var(--theme) = 'dark') {
  .box {
    background: black;
    color: white;
  }
} @else {
  .box {
    background: white;
    color: black;
  }
}
```
Or, the inline form, I guess:
```css
  .box {
    background: if(var(--theme) = 'dark', black, white);
    color: if(var(--theme) = 'dark', white, black);
  }
```

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


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

Received on Wednesday, 23 March 2022 19:43:07 UTC