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

Shouldn't `if` inherit like `light-dark` with custom properties?

see : https://codepen.io/romainmenke/pen/wvLGwyb

```html
<div id=a>
  hello
  <div id=b>
    world
  </div>
</div>
```

```css
:root {
  --fg: light-dark(black, white);
  --bg: light-dark(white, black);
}

#a {
  color-scheme: dark;
  color: var(--fg);
  background-color: var(--bg);
}

#b {
  color-scheme: light;
  color: var(--fg);
  background-color: var(--bg);
}
```

In this example `--fg` and `--bg` are not "evaluated" to specific colors based on the color scheme of `:root`. Instead the `light-dark()` functions are inherited and evaluated on specific elements against their respective color scheme.

So in your first examples `matches()` would never work because those pseudo elements would never have the `.favorite` class. Right?

I think you would need to write:

```css
.item {
  --symbol: if(matches(.favorite::before) ? "🧡" : "🩶");
  &::before {
    content: var(--symbol);
  }
}
```

I think authors will often be surprised by such behavior because you need to consider the outer selector, how values cascade and inherit and how both will affect the inner selector.

Is the added complexity worth it, considering that we can already style elements by matched selector?

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


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

Received on Friday, 19 July 2024 06:31:32 UTC