[wp-trac] [WordPress Trac] #35204: Refresh HiDPI support

[WordPress Trac]

#35204: Refresh HiDPI support
--------------------------------+-----------------------------
 Reporter:  lancewillett        |      Owner:
     Type:  defect (bug)        |     Status:  new
 Priority:  normal              |  Milestone:  Awaiting Review
Component:  Administration      |    Version:
 Severity:  normal              |   Keywords:  needs-patch
  Focuses:  ui, administration  |
--------------------------------+-----------------------------
 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 */
         }
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35204>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform