[css-values] Proposal for add a device pixel unit (original) (raw)

The primary use case for device pixel is the mobile Web, where it is a very common need to render the real 1px width borders on high density screens. Here, the real 1px width means the device pixel width.

So far, Safari has supported 0.5px for the purpose, but that is still far from enough, and can not implement more precise control in some cases ( device-pixel-ratio > 2). Various hacks have emerged, for example

• https://codepen.io/foolkai/pen/QEgzLm
• https://juejin.im/entry/584e427361ff4b006cd22c7c (Chinese)

I suggest add a new CSS unit for this case, the unit name could be one of this following candidates:

• dpx: device pixel
• ppx: physical pixel
• rpx: retina/real pixel

Thanks.