[mediaqueries-5] Allow comparators / ranges in style queries

[bramus]

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:

/* --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:

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

Or even this:

#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:

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

[yisibl]

I remember mentioning this syntax in other issues before, but I can't find it.