[css-env] [css-values] Consider exposing device-pixel-ratio as an environment variable?

[emilio]

I think there are legit use cases for this, like building a border with box-shadow that doesn't take space and doesn't antialias, reserving space for another thin border...

This is already exposed in a way, both via media queries, and due to the border-snapping rules we have (e.g. border: 0.01px will compute to a different thing depending on the device pixel ratio).

But if you want to do something like that, media queries are not enough, because you can only build for the most common DPIs:

--device-border-width: 1px;
@media (resolution >= 2x) {
  --device-border-width: 0.5px;
}
/* Insert cases as needed */

I think either:

• env(resolution) that evaluates to a number.
• A new unit (dpx or so?).

Would address this kind of use case. I'm not convinced the unit is quite worth it because the use case is somewhat niche, tho, and it kinda makes it too easy to swap px by dpx accidentally (99% of the time you do want CSS pixels...).

[Crissov]

Please also see #5986 and #3720.

[emilio]

Let's dupe to #3720, and discuss there. Thanks!