A full vendor stack for targeting High Resolution ‘retina’ devices

| 6 replies | Short URL: http://benfra.in/1yn
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

6 Responses to “A full vendor stack for targeting High Resolution ‘retina’ devices”

  1. Kaelig

    Great round up.

    While trying to implement HiDPI images on http://m.bbc.co.uk/news, we found that our testing devices typically had a pixel ratio of 1, 1.35, 1.5 or 2.

    We decided to serve “retina” graphics to devices that report a pixel ratio higher than 1.3 (or 4/3 for opera), regardless of the resolution (expressed in dpi). 2X Graphics are scaled properly on 1.35 and 1.5 pixel ratio screens, and since those devices are fairly new, the performance overhead is negligible.

    Hope that helps!

  2. Ben Frain

    Excellent insight, straight from one of the biggest sites on the Internet! Thanks for that Kaelig.

    By the way, anyone reading this who is interested in CSS pre-processors and OOCSS might want to check out his book: http://www.css-maintenables.fr/ – my French understanding is hopeless but I have every reason to believe it will be a great read!

  3. Takis

    In the final piece of code, why do you say “192dpi”? Shouldn’ it be “96dpi”, as proposed in the beginiing of the article, or “144dpi” which is the dpi for retina screens?

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.

750Days
750 days since this post was last revised. Specific details are likely out of date.
483 words
MENU