CSS WG Blog How to unprefix -webkit-device-pixel-ratio

This is a page from the Cascading Style Sheets Working Group Blog. Some other places to find information are the “current work” page, the www-style mailing list, the Future of CSS syndicator, and the issue list on Github.

Do you want to know how the CSS WG works? Fantasai has written about:csswg, An Inside View of the CSS Working Group at W3C.

How to unprefix -webkit-device-pixel-ratio

By fantasai June 14, 2012 (Permalink)
Categories: Best Practices

Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio. The resolution media query can take “dots per inch” and “dots per centimeter”, while -webkit-device-pixel-ratio takes “dots per px”. But these are all fundamentally the same thing because 1in = 96px = 2.54cm. (Granted, not all of this was well-understood in 2006, so we can forgive Webkit for making something up.)

So to unprefix -webkit-device-pixel-ratio all you have to do is convert it to resolution—which is already implemented by all the other browsers. The easiest way is to multiply the value by 96 and append dpi. Like this:

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       (min-resolution: 192dpi)             /* Everyone else */ {

But wait! you say. I don’t want to do math! Can’t the CSSWG standardize device-pixel-ratio so I don’t have to do math? We could… but then we’d have two features that do exactly the same thing. And typing device-pixel-ratio is awkard, isn’t it? So instead, we added the dppx unit to mean “dots per px”. This way, we can avoid dpi math not just in media queries, but anywhere else that takes a <resolution>, too. Instead of having to add a new device-pixel-resolution query, browsers can just implement the new dppx unit (which is already in CR) for the old resolution query. Then you can just write (min-resolution: 2dppx).

Some caveats: Several early implementations of resolution use the device’s physical resolution rather than its CSS resolution, and in these resolution: 192dpi is not necessarily equivalent to -webkit-device-pixel-ratio: 2. (This is likely to be more of a problem for ratios less than 2.) Since all implementations that support dppx will do so correctly, you can target them by using dppx rather than dpi.

@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 1.5dppx)              /* The Future */

« Previous article Next article »


« Older comments

Comment form

You can use this form to send a comment to the author. A selection of the comments may be published on this page. Comments may be shortened. If you don't want your comment to be published, please, say so in your message, or send it by e-mail instead.

Your e-mail address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

[Photo: group photo of the CSS working group in San Francisco] Contact: Bert Bos
Copyright © 2020 W3C®

Last updated 2012-06-14 04:03:04