Re: [csswg-drafts] [css-values-5] Proposal for a new `matches()` CSS Function (#10594)

Please forgive that this question is somewhat tangential to this proposal, and feel free to hide this comment if it's considered off topic (i.e. should be its own separate issue). It's about both `if` and `matches`, in relation to helpers like `light-dark()`. Please feel free to just read the TL;DR at the end.

### (Context) In search of `light-dark()`-level simplicity for hovered elements
I was about to create an issue in this repo asking whether something like `light-dark()` is possible, but for `:hover`ed elements. I *love* the simplicity of `light-dark()`, and I've always wanted to be able to define hover colors in inline styles. Something like this:

```html
<div style="color:hover-else(blue, black)">this text turns blue when hovered</div>
```
While researching before creating the issue, I came across the `if`/`matches` proposals. If I understand correctly, it would look something like this:
```html
<div style="color:if(matches(:hover) blue ? black)">this text turns blue when hovered</div>
```

### (Question) Can this proposal be adapted to reduce nesting for simple cases, or should it be a separate proposal?
For a common case like hover-based color changes, the degree of nesting and syntax required to achieve this using `if`/`matches` seems a bit too far. I guess I see a few possibilities here:

1. A separate proposal for a helper function like `hover-else`.
2. Cover the common "if <selector>, valueX, else valueY" case without requiring two levels of nesting, at least. Something like `color:cond(:hover ? blue : black)`.
3. Allow `matches` to return values in place of `true` and `false` if they're given as two extra arguments - e.g. `color:matches(:hover, blue, black)`.
4. Forsake the "simple things should be simple" principle and just make devs write `color:if(matches(:hover) blue ? black)`.

My preference is 3, and I'm wondering what others think about this? I.e.:

```html
<div style="color:matches(:hover, blue, black)">this text turns blue when hovered</div>
```
**TL;DR**: Can we allow `matches` to return values in place of `true` and `false` if they're given as two extra arguments - e.g. `color:matches(:hover, blue, black)` would return `blue` in place of `true` and `black` in place of `false`?

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


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

Received on Saturday, 7 September 2024 05:52:01 UTC