1056Days

1056 days since this post was last revised. Specific details are likely out of date.

If you want to target CSS at different device densities, you’ll need a full vendor stack. This should also future proof your rules when non-prefixed versions are finally approved. Below, are the different versions needed to target different vendors:

I’ve written a related post of how to serve images to high resolution devices so if you haven’t already, you might want to grab a cup of tea and take a look there too.

A suitable stack of vendor prefixes

Sadly, to make a future-proof vendor-prefixed stack of rules to target Webkit (Chrome/Safari), Mozilla (Firefox), & Opera is a bit of a hassle. As far as I can tell, there is no specific way to target Microsoft (IE10) so I presume one of the W3C ready versions will suit when IE10 is released (somebody let me know if they know otherwise!). Here’s each one and where it will apply, a full stack is at the end:

min-resolution property

(source)

This targets devices that understand the old CSS min-resolution property. 96dpi is considered ‘normal’ so to get the correct resolution value, multiply it by the pixel density you want and append dpi. To exemplify: If I wanted to target pixel density of 1.5 I would use a value of 144dpi (96 * 1.5).

@media (min-resolution: 96dpi) {

} 

Webkit

This targets webkit (Chrome/Safari, iOS/Android). Simple, just adjust the ratio value to match the pixel ratio you want to target.

@media (-webkit-min-device-pixel-ratio: 1) {

}

Mozilla

This targets Mozilla browsers (principally Firefox). Note here the peculiar syntax, min is defined first and then a double hyphen. Why? No idea! Again, just adjust the value to match the ratio you need.

@media (min--moz-device-pixel-ratio: 1) {

}

Opera

(source)
This targets the Opera browser. Different syntax again! Adjust the ratio to suit e.g. a value of 2/1 is the equivalent of using -webkit-min-device-pixel-ratio: 2 for Webkit.

@media (-o-min-device-pixel-ratio: 1/1) {

}

Non-prefix version

There is nothing to suggest the W3C will implement this version. However, on the off chance it does, it’s worth including. It’s the non-prefix version of one we have already looked at. Adjust the value to suit:

@media (min-device-pixel-ratio: 1) {

}

W3C dppx version

This version looks likely to be the version that the W3C uses in furure. It’s the same in principle as the first ‘min-resolution’ example that’s been in W3C use for a while but they have added the ‘dots per pixel’ unit to make it easier (no need to do any mathematics). As dppx is simply Dots Per PiXel, just adjust to suit.

@media (min-resolution: 1dppx) {

}

Our full stack

This is a full stack that will target styles at a device with a pixel density of 2. It will cater for Firefox, Chrome, Safari, Opera, iOS, Android and any future W3C compliant user agent that follows the dppx based min-resolution standard.

@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
**All your high resolution styles go here**

}

About The Author

Ben Frain is front-end web developer and author based in Cheshire, UK.
His books, 'Responsive web design with HTML5 & CSS3' and 'Sass and Compass for Designers' are available now.
You can follow him on Twitter @benfrain.