Open Radar

 
According to the W3C recommendation, media queries should use the “dppx” unit for resolution media queries to detect a Retina display. Currently, Safari only supports the non-standard min/max-device-pixel-ratio:

http://caniuse.com/#feat=css-media-resolution

As higher gamut displays, such as those used on the iMac and iPad Pro, become more common, developers will want to include it in their media queries to select images using the proposed “color-gamut” feature:

https://drafts.csswg.org/mediaqueries-4/#color-gamut

Media queries then become more complex because of Safari’s lack of support for dppx units. For example, to select one of four image variations (all combinations of Retina and sRGB/P3 gamut) you’ll end up with the following queries:

h1#hero {
	background-image: url(hero.jpg);
}
@media (color-gamut: p3) {
	h1#hero {
		background-image: url(hero-p3.jpg);
	}
}
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	h1#hero {
		background-image: url(hero@2x.jpg);
	}
}
@media (-webkit-min-device-pixel-ratio: 2) and (color-gamut: p3), (min-resolution: 2dppx) and (color-gamut: p3) {
	h1#hero {
		background-image: url(hero-p3@2x.jpg);
	}
}

These queries are a lot cleaner and simpler to understand if Safari can just use min-resolution:

h1#hero {
	background-image: url(hero.jpg);
}
@media (color-gamut: p3) {
	h1#hero {
		background-image: url(hero-p3.jpg);
	}
}
@media (min-resolution: 2dppx) {
	h1#hero {
		background-image: url(hero@2x.jpg);
	}
}
@media (min-resolution: 2dppx) and (color-gamut: p3) {
	h1#hero {
		background-image: url(hero-p3@2x.jpg);
	}
}