[csswg-drafts] [mediaqueries-5] Allow comparators / ranges in style queries (#11759)

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

== [mediaqueries-5] Allow comparators / ranges in style queries ==
The syntax of a `<style-feature>` is currently defined as “ a valid declaration, a supported CSS property, or a `<custom-property-name>`.”

The first part allows one to only do equality comparisons, like so:

```css
/* --num-children is exactly 10 */
@container style(--num-children: 10) {
  #target {
    background: red;
  }
}
```

What is currently not allowed is to do mathematical comparisons, which I think would be nice to add, allowing authors to do things like this:

```css
/* --num-children is 10 or greater */
@container style(--num-children >= 10) {
  #target {
    background: red;
  }
}
```

Or even this:

```css
#target {
  background: if(
    style(--num-children >= 10): red;
    style(--num-children >= 8): orange;
    style(--num-children >= 6): yellow;
    else: green;
  );
}
```

_(Assuming `if()` treats multiple conditions as if they were an `else if` – if not then the lines need to be reshuffled a bit)_

Or this:

```css
#target {
  background: if(
    style(--num-children >= 10): red;
    style(8 <= --num-children < 10): orange;
    style(6 <= --num-children < 8): yellow;
    else: green;
  );
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11759 using your GitHub account


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

Received on Friday, 21 February 2025 10:46:18 UTC