Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#22238 closed enhancement (fixed)

HiDPI support for non-webkit browsers

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

Description

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 11 years ago.
22238.2.diff (6.9 KB) - added by dd32 11 years ago.
22238.3.diff (11.8 KB) - added by lessbloat 11 years ago.
22238.4.diff (12.5 KB) - added by lessbloat 11 years ago.

Download all attachments as: .zip

Change History (15)

@dd32
11 years ago

@dd32
11 years ago

#1 @dd32
11 years ago

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

#2 follow-ups: @ocean90
11 years ago

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

#3 in reply to: ↑ 2 @dd32
11 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..

#4 in reply to: ↑ 2 @helenyhou
11 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. :)

#5 @iammattthomas
11 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 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

Last edited 11 years ago by iammattthomas (previous) (diff)

@lessbloat
11 years ago

#6 @lessbloat
11 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.

#7 @ocean90
11 years ago

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

#8 @nacin
11 years ago

  • Keywords commit added

#9 @TobiasBg
11 years ago

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

@lessbloat
11 years ago

#10 @lessbloat
11 years ago

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

#11 @nacin
11 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.