Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#22238 closed enhancement (fixed)

HiDPI support for non-webkit browsers

Reported by: dd32 Owned by: nacin
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.5
Component: Administration Keywords: has-patch commit
Focuses: Cc:


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.

Attachments (4)

22238.diff (6.9 KB) - added by dd32 3 years ago.
22238.2.diff (6.9 KB) - added by dd32 3 years ago.
22238.3.diff (11.8 KB) - added by lessbloat 3 years ago.
22238.4.diff (12.5 KB) - added by lessbloat 3 years ago.

Download all attachments as: .zip

Change History (15)

@dd323 years ago

@dd323 years ago

comment:1 @dd323 years ago

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

comment:2 follow-ups: @ocean903 years ago

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

comment:3 in reply to: ↑ 2 @dd323 years ago

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..

comment:4 in reply to: ↑ 2 @helenyhou3 years ago

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. :)

comment:5 @iammattthomas3 years ago

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 1.25x Android devices like the Nexus 7. While Firefox and Opera will respond to a 1.5 pixel ratio 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.

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

Version 0, edited 3 years ago by iammattthomas (next)

@lessbloat3 years ago

comment:6 @lessbloat3 years ago

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.

comment:7 @ocean903 years ago

  • Milestone changed from Awaiting Review to 3.5
  • Version set to trunk

comment:8 @nacin3 years ago

  • Keywords commit added

comment:9 @TobiasBg3 years ago

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

@lessbloat3 years ago

comment:10 @lessbloat3 years ago

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

comment:11 @nacin3 years ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.