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: http://core.svn.wordpress.org/trunk@22629 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-classic.css

@@ -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");

wp-admin/css/colors-fresh.css

@@ -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");

wp-admin/css/install.css

@@ -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;

wp-admin/css/media.css

@@ -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");

wp-admin/css/wp-admin-rtl.css

@@ -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;

wp-admin/css/wp-admin.css

@@ -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

wp-includes/css/admin-bar.css

@@ -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 */

wp-includes/css/editor.css

@@ -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,

wp-includes/css/wp-pointer.css

@@ -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');

wp-includes/js/thickbox/thickbox.css

@@ -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;

wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css

@@ -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;