Re: [csswg-drafts] [css-borders] Add a 'hairline' border-width value (#3720)

I tested it on Chrome Android, and demo.htm works as expected too.

<img width="1080" height="595" alt="Image" src="https://github.com/user-attachments/assets/e960df07-084c-4d59-ada1-afe5d55ea85f" />
 
So now I’m actually the one unsure what the point is...

> The proposal was to add `env(hairline)`, not `env(device-pixel-ratio)`. Most of the complexity in your code comes from that.

Back to your question. I’d say it’s better to add `env(device-pixel-ratio)` instead of `env(hairline)` (I’m still a bit confused about what “hairline” means. Is it just 1 device pixel?). The reason is: you can use DPR to convert between CSS pixels and device pixels, but you can’t use a CSS pixel value and a hairline (or device pixel?) value to reverse-engineer the DPR for other purposes. As far as I know, CSS doesn’t currently support multiplication or division between values with units.

If folks that really hate any complexity, why not propose both `env(hairline)`, `env(dpr)`?

Please don't blame me for the complexity in the `border-width()` logic I posted (or `border-snap()` which I’d recommend). It's not me, it's just that border snapping itself is complex:
https://drafts.csswg.org/css-values-4/#snap-a-length-as-a-border-width
> To snap a length as a border width given a len:
> 1. Assert: len is non-negative.
> 2. If len is an integer number of device pixels, do nothing.
> 3. If len is greater than zero, but less than 1 device pixel, round len up to 1 device pixel.
> 4. If len is greater than 1 device pixel, round it down to the nearest integer number of device pixels.

CSS doesn't support if-else logic to handle the assertions, and thankfully there are some hacks that can work around that.

In the end, I still don't get why folks are so allergic to complexity and want to strip it all away. I'm all for simplification too, but not at the cost of ignoring details and just hoping everything magically works.

-- 
GitHub Notification of comment by Merci-chao
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3720#issuecomment-3374826037 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 7 October 2025 01:21:14 UTC