[mediaqueries-4] min-width / max-width / min-height / max-height and fractional viewport dimensions

[patrickhlauke]

Currently, min- and max- prefixes are equivalent to >= and <= (see https://drafts.csswg.org/mediaqueries-4/#mq-min-max)

This is fine under the assumption that the width/height of the viewport will always be integers, but will fall apart in the case of fractional dimensions (admittedly an edge case?) - see for instance twbs/bootstrap#21552

Wondering if it would be possible to change these so that one of them is "including", while the other is "excluding". For instance, changing the definition to make min- equivalent to >= but max- equivalent to < only?

[patrickhlauke]

alternatively, for backwards-compatibility with existing content, perhaps having a new modifier for the value part to indicate it's "excluding", thus allowing authors to choose which one they want to make "excluding" (assuming browsers would then infer the rest from context, i.e. if it's used for a min- then the value with modifier results in a > only, and in case of max- with modifier value a < only).

Spitballing, based on mathematical notation for intervals, maybe the ] and [ characters (where [ could be assumed as the default for backwards compat)? Allowing for notation such as min-width: ]320px / max-width: [320px perhaps?

[Marat-Tanalin]

The @media (width < 600px) syntax stability is confirmed by Tab Atkins in a discussion started recently at [email protected].

I’ve filed a feature request for Firefox.

[patrickhlauke]

As https://drafts.csswg.org/mediaqueries/#mq-range-context would cover the problem of fractional viewport dimensions, is it worth adding a note (or series of notes) in the spec to point out that:

• min-/max- queries for width/height can cause problems (or gaps) with fractional viewport dimensions, and that this problem is better solved with the explicit use of >/<= etc?
• in the range context section, have a matching note reiterating this

If yes, happy to have a stab at this, just let me know @frivoal @tabatkins