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.

[desrosj]

This needs to be reviewed in the context of 2023. IE11 is no longer something we support, and I'm sure the best practices have changed.

Also, I wonder if it would be possible to utilize a CSS preprocesser here to avoid having to repeat this media query all over (if it's still required).

Marking with the CSS focus.