HiDPI support for non-webkit browsers

[dd32]

As a follow on to #21019, we should reconsider support for non-webkit browsers for HiDPI displays.
Currently, we only use -webkit-min-device-pixel-ratio in the media queries as per comments 80 through 87 in the previous ticket.

The discussion centering around using only the webkit selector started 3 months ago, a time when only webkit properly supported HiDPI graphics.
Now we have Firefox as well as Opera which support it.

Firefox 18 (End of year) will support it through moz--min-device-pixel-ratio: 1.5 CSS selector, and Opera (Desktop: 12.10 in beta, Mobile latest stable supports it) supports it via -o-min-device-pixel-ratio: 3/2 CSS selector.

As we use vendor prefixes elsewhere (for example, rounded corners) we should also support the wide range of browsers vendor prefixes, as well as the standard fall back to the non-vendor prefix.

Attached is a patch based on the above, and the (small) discussion on the previous ticket. I have only tested it on a Mac w/ non-HiDPI Screen & Opera / Chrome, and on Opera Mobile on a HiDPI screen. Both work as expected.

[dd32]

I accidentally messed up the webkit line in the first patch, silly copy-paste error. Fixed in .2

[ocean90]

Instead of a never-ending line I would vote for a syntax as ​CSS Tricks proposes.

[dd32]

Replying to ocean90:

Instead of a never-ending line I would vote for a syntax as ​CSS Tricks proposes.

I like that, plus, it has full future compatibility in mind, and thanks to CSS being so nice and ignoring things the parser doesn't understand, shouldn't cause any issues other than a very bad browser..

[helenyhou]

Replying to ocean90:

Instead of a never-ending line I would vote for a syntax as ​CSS Tricks proposes.

Yes please. If/when we add it, let's remember to add it to the CSS coding standards. :)

[iammattthomas]

I recently did some work on this for WordPress.com, and my findings may be relevant here. Specifically:

• The moz--min-device-pixel-ratio selector isn't required, as far as I could tell. The only version of Firefox that responds to it is version 19 (currently in nightly builds), and that browser also supports the min-resolution selector.

• Specifying a pixel ratio of 1.25 instead of 1.5 serves 2x images to Android devices like the Nexus 7, which are between 1 and 1.5x. While Firefox and Opera will respond to a 1.5x media query on the Nexus 7, the default browser (Chrome) will not, so 1.25 is required.

• Both versions of Opera on Android support the min-resolution selector, but Opera Mini does not support the dppx unit, so the dpi unit is required.

• Adding the "print" selector loads 2x graphics when the user opens the print dialog, so users without retina screens still get high resolution graphics when printing.

Based on this, the syntax we're now using on WordPress.com is:

@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {
    div {
        background-image: url(i/logo-2x.png);
    }
}

You can find my test page at ​http://dev.mattnt.com/retina.html and the breakdown of results at ​http://dev.mattnt.com/retina-results.html

[lessbloat]

Updated everything in trunk with MT's format above in 22238.3.diff​. I also consolidated a couple of them into a single @media block.

[TobiasBg]

Patch might need a refresh after [22586], which added some more HiDPI CSS.

[lessbloat]

22238.4.diff​ is a refresh after [22586].

[nacin]

In 22629:

Introduce a new, cross-browser HiDPI CSS @media rule to be used everywhere.

@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {

Serve HiDPI graphics for printing, regardless of screen resolution.

Specify Opera's vendor-prefixed device pixel ratio property, for Opera desktop.

Specify a minimum Webkit device pixel ratio of 1.25 instead of 1.5, to serve
2x images to Android devices that are between 1 and 1.5x (like the Nexus 7).
Firefox and Opera will respond to 1.5x on these devices, but Chrome will not.

Specify min-resolution, which covers Firefox 19. Opera on Android also supports
min-resolution, but Opera Mini does not support dppx, so the dpi unit is used.

props iammattthomas for the exhaustive research.
props lessbloat for patching.

fixes #22238.