Refresh HiDPI support

[lancewillett]

As a continuation of #22238... In newer versions of Chrome, loading the admin bar CSS provides these console warnings:

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)

This was enabled first in ​[22629].

Matt Micklick (@iammattthomas) researched and suggests we update as follows.

This is what our HiDPI media query looks like:

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

We specify min-resolution in dpi because of browser support. While Firefox, Chrome, and Opera support min-resolution and the dppx unit, Internet Explorer and Safari do not. Specifically, the most current version of IE supports min-resolution declared in dpi but not dppx. The most recent version of Safari only recognizes -webkit-min-device-pixel-ratio.

In order to avoid notices in the Chrome console, we can add an additional declaration of min-resolution in dppx. We'll add it last, so that browsers that support it will use it.

As a bonus, we can remove the Opera-specific selector. Since Opera has used Blink as its layout engine for over a year there's no need to continue including it. Opera's CSS support now mirrors Chrome's.

Finally we'll move the Webkit-specific selector last in the set, as we do with other browser-specific declarations in CSS. So the new syntax would look like this:

@media print,
	(min-resolution: 120dpi),
	(min-resolution: 1.25dppx),
	(-webkit-min-device-pixel-ratio: 1.25) {
		/* Styles go here */
	}

[voldemortensen]

Related: #35200

[ocean90]

The rules for Opera are already dropped since [31505].

Webkit-specific selectors are currently the *first* in a set, that's why Autoprefixer will convert your syntax to

@media print,
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi),
	(min-resolution: 1.25dppx) {
		/* Styles go here */
	}

Would this work too? It's also suggested on ​https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#-moz-device-pixel-ratio and ​http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/.

[mattmiklic]

I think my original comment quoted above is about a year old, so some things (like the ordering of selectors) are probably out of date. Microsoft's latest browser, Edge, does support the dppx unit, but we'll need to keep the extra dpi-based rule around to support IE 11 and earlier.

[iseulde]

This ticket has not seen any activity in over *two* years, so I'm closing it as "wontfix".

The ticket may lack decisiveness, may have become irrelevant, or may not have gathered enough interest.

If you think this ticket does deserve some attention again, feel free to reopen.

For bugs, it would be great if you could provide updated steps to reproduce against the latest version of WordPress (5.0.2 at the time of writing). Remember images or a video can be superior to explain a problem. At the very least, quickly test again to make sure the bug still exists.

If it’s an enhancement or feature, some extra motivation may help.

Thank you for your contributions to WordPress! <3

[JeffPaul]

A ​decision was made to reopen tickets that were closed in the bulk edit that this ticket was affected by. This ticket is being placed back into the Awaiting Review milestone so it can be individually evaluated and verified to determine if it is still relevant/valid or reproducible.