Opened 5 years ago
Last modified 21 months ago
#35204 new defect (bug)
Refresh HiDPI support
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | |
Component: | Administration | Keywords: | needs-patch |
Focuses: | ui, administration | Cc: |
Description
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 */ }
Change History (3)
#2
@
5 years ago
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/.
Related: #35200