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.
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 */ ... }
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: