Closed
Description
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;
);
}