Re: [csswg-drafts] [css-contain-4] Define a range syntax for style container queries (#8376)

> Right; registration doesn't add anything to the equation in this case.

...

> > We just try to parse a numeric thing on both sides, and check if they're compatible.

...

> consider making : always serialization-matching, and = only "recognized-type"-matching?

---

This has marinated for ~two years: can we make progress here now?

**Proposal:**

 - We adopt MQ's syntax, including the sandwich form (e.g. a < b < c).
 - Every part can be a literal, or a reference to a custom property.
 - `=` matches by value (a number `1.0` is equal to a number `1`), whereas `:` matches by serialization (a value `1.0` is _not_ equal to a value `1`).

For e.g. style(A > B):

 - If A/B is a custom property reference, substitute with the value of the custom property.
 - Parse each side according to `<number> | <percentage> | <length> | <angle> | <time> | <frequency> | <resolution>`.
 - If both sides have the same type, compute each side, do the comparison, and return the result.
 - Otherwise, return false.

Note that this allows `style(--foo < --bar)`, but also `style(10px < 10em)` which we _could_ disallow if we think it doesn't fit here.

Note also that you can't compare a `<length>` to a unitless zero in in this approach, e.g. `style(--length > 0)` does not work: it needs to be `style(--length > 0px)`. We could special-case this if we wanted, by considering zero implicitly compatible with other numeric types for comparison purposes.

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


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

Received on Tuesday, 25 March 2025 12:52:40 UTC