[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

[jfkthame]

Currently the specs (MQ + CSSOM-View) agree with everybody-but-safari that pinch zoom does affect device-pixel-ratio / resolution

I think you meant to say "page zoom" rather than "pinch zoom" here, didn't you?

[frivoal]

I think you meant to say "page zoom" rather than "pinch zoom" here, didn't you?

I did, sorry. (I'll fix my original comment for the benefit of those coming here later).

[ChumpChief]

I don't think it helps to add (unprefixed) device-pixel-ratio as an alias

I believe there is a compat dependency on -webkit-device-pixel-ratio

+1 to both of these statements. We implemented -webkit-device-pixel-ratio in Edge due to its high usage on the mobile web. While some of those developers also included a device-pixel-ratio (and a -moz-device-pixel-ratio, and a -ms-device-pixel-ratio, and a -o-device-pixel-ratio...), the -webkit-device-pixel-ratio MQ is the only one actually utilized and tested on those sites; the rest are just included as a courtesy.

So adding device-pixel-ratio will not improve compat (since no one supports it there is nothing to be compatible with) and has risk to damage compat if that less-tested path has diverged from the -webkit-device-pixel-ratio path.

So far I've heard 2 arguments for adding it:

1. David Baron mentioned it's unpleasant to add a -webkit- feature without adding an equivalent unprefixed version. In particular citing discoverability of the new, recommended approach as his concern.
2. Various people feel the resolution MQ is deficient in some way (naming, discoverability, etc.).

As a reminder, the proposal on the call was to add device-pixel-ratio as an alias of resolution, NOT as an alias of -webkit-device-pixel-ratio. Under that proposal, for 1 I'd argue that this wouldn't improve the migration -- authors may initially discover the media feature more easily, but the easy conversion of dropping the prefix doesn't work.  Under the current proposal, authors still must seek out how to migrate away from -webkit-device-pixel-ratio, it's not self-evident.

For 2, if we're open to alternative names in general, then I'd say both device-pixel-ratio and resolution are pretty bad. Neither is clear about what they represent, leaving the door open for ambiguities like whether they're affected by page zoom, pinch zoom, etc. So if it's open season on MQ naming then I think we should try to come up with a third, better alternative and deprecate all others.

[frivoal]

So if it's open season on MQ naming then I think we should try to come up with a third, better alternative and deprecate all others.

I doubt that it is. Regardless of their likeability, both -webkit-device-pixel-ratio and resolution are sufficiently used in the wild (and have been for quite some time) that neither can effectively be removed from the web, so replacing them with a third option is unlikely to be possible. And if we cannot replace them, any new name we'd be adding would be in addition to these two, and I think two names are plenty enough.

[fantasai]

Fwiw, my position 100% matches Florian's comment #417 (comment)

(Also, I don't understand why you think resolution is a bad name, that is literally what this is about and what this measure is called everywhere else in the computing world. The only difference here is that we have a unit called "px" in addition to in/mm/etc.)

[Crissov]

Resolution is a bit ambiguous in practice. Some possible “values”:

• 640x480, 640 by 480 pixels, 640px × 480px
• 1 megapixel, 1 Mpx
• VGA, 4K
• @2x, Retina, high DPI
• 96 px/in, 300 dpi
• 250 µm
• 1′
• 4:3

[ChumpChief]

@Crissov said it well, plus notice none of his examples are the recommendable 2dppx :)

To be clear I'm not suggesting we should go reopen that conversation right now -- it's not particularly productive to go duplicate functionality again. But if we're really considering adding another unprefixed duplication of functionality to the platform then we can do better than device-pixel-ratio.

[frivoal]

The CSSWG has resolved not to add device-pixel-ratio (unprefixed). Based on this I am closing this issue as rejcted.

As for the other sub-topics discussed here:

• We have not reached consensus as to whether we should include -webkit-device-pixel-ratio in the Media Query spec or leave it in the compat spec where it currently is. A few people (at least @tabatkins Tab and I) think we should include it, but there are others (at least @atanassov) who feel quite strongly that we should not. As it doesn't seem we will agree, I'm willing to drop the issue and settle for the status quo. @tabatkins (or anyone else who thinks this is important), if you'd like to keep pushing, I suggest you open a separate issue about that.

• Apple is considering changing webkit's behavior to align with the spec and other implementations, and make page zoom affect resolution. If they decide against in, they should file a bug against the spec.

• If Apple changes their implementation of resolution as discussed in the previous point, they are unsure whether to keep -webkit-device-pixel-ratio a strict alias of resolution, or have it preserve the historical behavior, but lean towards the later one. If they decide that these should not be strict aliases, they should file a bug against the spec, which defines them to be.

[frivoal]

@wisniewskit As your suggestion has been rejected by the CSSWG, we would like you to confirm that you are willing to accept the conclusion. If not, you can raise a formal objection.

[wisniewskit]

Thanks for following up. I'm don't have a strong opinion on the decision, so I'm alright with it, but I'm not 100% sure if @dbaron has any objections (based on his comments in the Firefox bug I initially mentioned).