sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.



git-svn-id: https://develop.svn.wordpress.org/trunk@22629 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Nacin 2012-11-17 06:50:08 +00:00
parent 2fb495eba6
commit fe14a22e31
11 changed files with 128 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
wp-admin/css/colors-classic.css
View File

@ -2023,7 +2023,10 @@ div.widgets-sortables,
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.curtime #timestamp {
background-image: url("../images/date-button-2x.gif?ver=20120916");

5
wp-admin/css/colors-fresh.css
View File

@ -1893,7 +1893,10 @@ div.widgets-sortables,
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.curtime #timestamp {
background-image: url("../images/date-button-2x.gif?ver=20120916");

5
wp-admin/css/install.css
View File

@ -74,7 +74,10 @@ abbr {
overflow: hidden;
display: block;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
#logo a {
background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
background-size: 274px 63px;

5
wp-admin/css/media.css
View File

@ -326,7 +326,10 @@ table.not-image tr.image-only {
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.image-align-none-label {
background-image: url("../images/align-none-2x.png?ver=20120916");

5
wp-admin/css/wp-admin-rtl.css
View File

@ -2382,7 +2382,10 @@ div.sidebar-name h3 {
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.post-com-count {
background-image: url('../images/bubble_bg-rtl-2x.gif');
background-size: 18px 100px;

182
wp-admin/css/wp-admin.css
View File

@ -2362,43 +2362,6 @@ html.wp-toolbar {
padding: 2px 0 8px 32px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.welcome-panel .welcome-add-page {
background: url('../images/welcome-icons-2x.png') no-repeat 0 -1px;
background-size: 16px;
}
.welcome-panel .welcome-edit-page {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -92px;
background-size: 16px;
}
.welcome-panel .welcome-learn-more {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -138px;
background-size: 16px;
}
.welcome-panel .welcome-comments {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -184px;
background-size: 16px;
}
.welcome-panel .welcome-view-site {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -276px;
background-size: 16px;
}
.welcome-panel .welcome-widgets-menus {
background: url('../images/welcome-icons-2x.png') no-repeat 1px -230px;
background-size: 16px;
}
.welcome-panel .welcome-write-blog {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -46px;
background-size: 16px;
}
}
.welcome-panel .welcome-panel-column ul {
margin: 0.8em 1em 1em 0;
}
@ -2440,17 +2403,6 @@ html.wp-toolbar {
}
}
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.welcome-panel .welcome-panel-close:before {
background-image: url('../images/xit-2x.gif');
background-size: 20px auto;
}
}
/*------------------------------------------------------------------------------
10.0 - List Posts (/Pages/etc)
------------------------------------------------------------------------------*/
@ -4201,14 +4153,6 @@ td.imgedit-settings input {
margin: 5px 5px 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.spinner,
.imgedit-wait,
.customize-loading #customize-container {
background-image: url(../images/wpspin_light-2x.gif);
}
}
.no-float {
float: none;
}
@ -4403,22 +4347,6 @@ span.imgedit-scale-warn {
padding: 2px 10px;
}
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.imgedit-crop,
.imgedit-rleft,
.imgedit-rright,
.imgedit-flipv,
.imgedit-fliph,
.imgedit-undo,
.imgedit-redo {
background-image: url('../images/imgedit-icons-2x.png');
background-size: 260px 64px;
}
}
/*------------------------------------------------------------------------------
15.0 - Comments Screen
------------------------------------------------------------------------------*/
@ -5137,12 +5065,6 @@ h2 .nav-tab {
box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.pressthis a span {
background-image: url(../images/press-this-2x.png?v=20121105);
}
}
/*------------------------------------------------------------------------------
20.0 - Settings
------------------------------------------------------------------------------*/
@ -5689,17 +5611,6 @@ body.full-overlay-active {
transition-duration: 0.2s;
}
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.wp-full-overlay .collapse-sidebar-arrow {
background-image: url('../images/arrows-2x.png');
background-size: 15px 123px;
}
}
/*------------------------------------------------------------------------------
24.0 - Customize Loader
@ -6645,18 +6556,6 @@ a.rsswidget {
display: block;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.login h1 a {
background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
background-size: 274px 63px;
}
.wp-badge {
background-image: url('../images/wp-badge-2x.png?ver=20120516');
background-size: 173px 194px;
}
}
#login {
width: 320px;
padding: 114px 0 0;
@ -8429,7 +8328,10 @@ a.widget-control-edit {
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.press-this .tagchecklist span a {
background-image: url('../images/xit-2x.gif');
@ -8478,6 +8380,82 @@ a.widget-control-edit {
background: url('../images/stars-2x.png?ver=20121108') repeat-x top left;
background-size: 21px 37px;
}
.welcome-panel .welcome-panel-close:before {
background-image: url('../images/xit-2x.gif');
background-size: 20px auto;
}
.welcome-panel .welcome-add-page {
background: url('../images/welcome-icons-2x.png') no-repeat 0 -1px;
background-size: 16px;
}
.welcome-panel .welcome-edit-page {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -92px;
background-size: 16px;
}
.welcome-panel .welcome-learn-more {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -138px;
background-size: 16px;
}
.welcome-panel .welcome-comments {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -184px;
background-size: 16px;
}
.welcome-panel .welcome-view-site {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -276px;
background-size: 16px;
}
.welcome-panel .welcome-widgets-menus {
background: url('../images/welcome-icons-2x.png') no-repeat 1px -230px;
background-size: 16px;
}
.welcome-panel .welcome-write-blog {
background: url('../images/welcome-icons-2x.png') no-repeat 0px -46px;
background-size: 16px;
}
.login h1 a {
background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
background-size: 274px 63px;
}
.wp-badge {
background-image: url('../images/wp-badge-2x.png?ver=20120516');
background-size: 173px 194px;
}
.wp-full-overlay .collapse-sidebar-arrow {
background-image: url('../images/arrows-2x.png');
background-size: 15px 123px;
}
.pressthis a span {
background-image: url(../images/press-this-2x.png?v=20121105);
}
.imgedit-crop,
.imgedit-rleft,
.imgedit-rright,
.imgedit-flipv,
.imgedit-fliph,
.imgedit-undo,
.imgedit-redo {
background-image: url('../images/imgedit-icons-2x.png');
background-size: 260px 64px;
}
.spinner,
.imgedit-wait,
.customize-loading #customize-container {
background-image: url(../images/wpspin_light-2x.gif);
}
}
/* =Localized CSS

17
wp-includes/css/admin-bar.css
View File

@ -406,13 +406,6 @@
display: inline-block;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
#wpadminbar .quicklinks li div.blavatar {
background: url('../images/wpmini-blue-2x.png') no-repeat;
background-size: 16px 16px;
}
}
/**
* Search
*/
@ -600,7 +593,10 @@
/**
* Retina display 2x icons
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
#wpadminbar .menupop .menupop > .ab-item,
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item,
#wpadminbar #adminbarsearch .adminbar-input,
@ -611,6 +607,11 @@
background-image: url(../images/admin-bar-sprite-2x.png?d=20120830);
background-size: 20px 220px;
}
#wpadminbar .quicklinks li div.blavatar {
background: url('../images/wpmini-blue-2x.png') no-repeat;
background-size: 16px 16px;
}
}
/* Skip link */

5
wp-includes/css/editor.css
View File

@ -2027,7 +2027,10 @@ RTL
/* HiDPI */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.wp_themeSkin span.mce_undo,
.wp_themeSkin span.mce_redo,
.wp_themeSkin span.mce_bullist,

5
wp-includes/css/wp-pointer.css
View File

@ -189,7 +189,10 @@
/**
* HiDPI Displays
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.wp-pointer-buttons a.close:before {
background-image: url('../images/xit-2x.gif');

5
wp-includes/js/thickbox/thickbox.css
View File

@ -167,7 +167,10 @@ margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = d
width: 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.tb-close-icon {
background: url('tb-close-2x.png') no-repeat;
background-size: 15px;

8
wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css
View File

@ -412,7 +412,13 @@ body#media-upload.rtl ul#sidemenu {
text-align: left;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
/**
* Retina display 2x icons
*/
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.image-align-none-label {
background: url(../../../../../../wp-admin/images/align-none-2x.png) no-repeat center left;
background-size: auto 15px;