[csswg-drafts] [css-container] Element queries (#10509)

romainmenke has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-container] Element queries ==
Container queries allow us to query a container for specific conditions, including values of custom properties through `style()` queries.

But they do not allow us to query the element itself.

In https://github.com/w3c/csswg-drafts/issues/10064 there is a proposal for inline conditions that do allow setting values conditionally when an element has a specific value. Implementers indicated that this would be possible

Can we have the same as an `at rule`?

I am assuming that this needs to be highly restricted (only `style()` queries with custom properties?)

```css
.foo {
  background-color: blue;
  color: white;
  border-radius: 2px;

  @element style(--color: pink) {
    background-color: pink;
    color: black;
    border-radius: 4px;
  }
}
```

------

Benefits I see to this syntax:
- allows setting multiple declarations with a single condition
- values can be easily invalid at parse time

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10509 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 09:24:11 UTC