[mediaqueries] Consider making device-pixel-ratio a standard alias.

[wisniewskit]

In Firefox bug 771329 we're discussing whether it's worthwhile to add an unprefixed version of -webkit-device-pixel-ratio, since its use seems to be ingrained with web developers (instead of using resolution media-queries with dppx units).

Given that traction, it seems reasonable to discourage the use of prefixes by adding it (and its min/max counterparts) as aliases in the official spec, similarly to how it is described in the whatwg compatibility spec: https://compat.spec.whatwg.org/#css-media-queries-webkit-device-pixel-ratio

[frivoal]

The "standard" name is resolution. If there is a strong enough compat dependency on -webkit-device-pixel-ratio that non webkit/blink implemeters find it necessary to implement it, we should add that name to the spec as well.

If there is a strong enough compat dependency on device-pixel-ratio (without prefix) as well, we should add that name as well. But I do not think we should add it for the sake of completeness or for encouraging a non prefixed name if there is no compat dependency. A profusion of names of the same feature doesn't really help anyone (unless, again, these names are needed for compat).

[smfr]

I'd like to understand how window.devicePixelRatio, the device-pixel-ratio media query, and the resolution media query behave under page zoom in different UAs. There's certainly a lack of interop and we should decide if window.devicePixelRatio and the device-pixel-ratio MQ need to have matching behavior, and whether the resolution MQ and device-pixel-ratio MQ should also match.

[frivoal]

I know you asked about UAs, but as a start, here's the spec point of view:

By spec, both window.devicePixelRatio and the resolution media query are supposed to update to reflect changes in page zoom (and not in pinch zoom). I would sure hope that the -vendor-device-pixel-ratio MQ does the same.

[smfr]

WebKit's position is that window.devicePixelRatio and the device-pixel-ratio MQ are purely about the capabilities of the hardware, and should not change under user zoom. It's bizarre to have different behaviors for page zoom and pinch zoom (users don't understand the difference), and zooming should be under user control; pages should not change their layout or appearance when zoomed. If WebKit were to implement the resolution media query, we would also only do so in a way that does not change with zooming (any kind).

[frivoal]

Results for various UAs (tested on desktop):

Chrome: updates all 3 on page zoom.

Safari: Updates none of the 3 on page zoom.

Firefox: Updates resolution and window.devicePixelRatio on page zoom (-webkit-device-pixel-ratio is not supported (yet))

Edge: updates all 3 on page zoom.

[frivoal]

It's bizarre to have different behaviors for page zoom and pinch zoom

The spec rationale is that page zoom is something that changes the geometry of the viewport. Its width and height (in CSS pixels) change. Since the hardware is the same, but the CSS pixel geometry is not, the device-pixel-ratio / resolution should change accordingly, otherwise it becomes non nonsensical.

As listed above, all other implementations seem to agree on that.

pages should not change their layout or appearance when zoomed

When pinch zooming, I agree 100%. When page-zooming, pages will inevitably change their layout, since page zoom (by definition) changes the size in CSS pixels of the viewport. Page-zoom pretty much boils down to changing the device-pixel to CSS-pixel ratio, and redoing layout based on that. I would find it pretty strange if that was not reflected in the relevant MQ and OM.

[frivoal]

@smfr Is apple likely to want to give resolution and device-pixel-ratio different semantics with regards to page zoom? Everybody else that has both makes them equal (and makes then react to page zoom). Even though I disagree with you about whether page-zoom should affect the query, I agree it is a valid discussion to have. However, unless you're expecting to make resolution and device-pixel-ration differ in that respect (which sounds tricky, given Blink and Edge's implementations) and use that as a justification for having both , that discussion seems orthogonal to this issue.

[smfr]

I am cautiously OK with page zoom (aka Command-plus) changing the resolution and device-pixel-ratio media queries, as long as pinch zoom does not, but I still worry about authors not really understanding the difference.

[frivoal]

I am cautiously OK with page zoom (aka Command-plus) changing the resolution and device-pixel-ratio media queries, as long as pinch zoom does not

Great. And btw, I am firmly with you on pinch zoom not affecting these. Anything else would be a major headache.

I still worry about authors not really understanding the difference.

I think this is one of those topics where the consequences are reasonably intuitive if you just interact with it and don't think about it, but is easily confusing when you just think a little about it. For any topic that involves the CSS pixel, that seems to be the case. It does what people want, but the why seems to be highly unintuitive to many people. I have kind of resigned myself to the idea that people who start diving into how CSS work will forever be confused about that, until they see the whole picture (which takes quite some determination, given the number of interlocking pieces in this puzzle, some of which have yet to be specified properly).

[frivoal]

In addition to the discussion in this bug, this was talked about at https://lists.w3.org/Archives/Public/www-style/2016Sep/0000.html

We probably need to revisit to wrap up.

My position:

1. I don't think it helps to add (unprefixed) device-pixel-ratio as an alias, but I wouldn't object to it if others want it.

2. I do not have data, but I believe there is a compat dependency on -webkit-device-pixel-ratio, so adding that as an alias sounds OK to me. It's already in the Compat spec, but I think we should internalize such things into our own spec. I would not object if people insisted on keeping the two separate.

3. if we do add device-pixel-ratio (prefixed or not) as an alias, it should behave exactly the same as resolution. Anything else would be highly confusing, and I would probably object.

4. Currently the specs (MQ + CSSOM-View) agree with everybody-but-safari that page zoom does affect device-pixel-ratio / resolution If someone (apple) wants to change that, I suggest a separate issue.

Agenda+ing to try to deal with 1+2+3