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

The CSS Working Group just discussed `[css-borders] Add a 'hairline' border-width value`.

<details><summary>The full IRC log of that discussion</summary>
&lt;Rossen8> https://github.com/w3c/csswg-drafts/issues/3720#issuecomment-2864297026<br>
&lt;lea> q+<br>
&lt;fantasai> TabAtkins: Options I see here: 1) hairline keyword to border-width and inside calc(), 2) add a hairline unit, 3) add a function, e.g. border-round() or env(hairline)<br>
&lt;emilio> q+<br>
&lt;fantasai> TabAtkins: benefit of keyword is it's easiest to write<br>
&lt;fantasai> TabAtkins: but downside is grammatical ambiguity means might not be able to use it everywhere easily, need to wrap in calc() some places<br>
&lt;fantasai> TabAtkins: The other two options don't have these downsides<br>
&lt;fantasai> TabAtkins: but several people don't like the usability of the unit, looks weird, I agree<br>
&lt;fantasai> TabAtkins: shortest option but funky<br>
&lt;fantasai> TabAtkins: Function might be the best way to go<br>
&lt;TabAtkins> env(hairline)<br>
&lt;fantasai> TabAtkins: Question of what is appropriate hairline is an environmental info, so my proposal is env(hairline)<br>
&lt;kizu> +1 to env(hairline)<br>
&lt;romain> Those that do want it as a unit can make one from the env() with the (unimplemented) custom unit feature.<br>
&lt;lea> q-<br>
&lt;Rossen8> ack emilio<br>
&lt;fantasai> emilio: My concern with env(hairline) is that it behaves differently with CSS zoom<br>
&lt;fantasai> emilio: You multiply by zoom, but as long as less than hairline, would be rounded to device hariline<br>
&lt;fantasai> emilio: whereas if you have a device hairline, get pixels, and zoom the pixels<br>
&lt;fantasai> emilio: zoom could make the hairline inviisble<br>
&lt;lea> Is env() allowed anywhere the other options would be?<br>
&lt;fantasai> TabAtkins: zooming down could shrink to invisibility, but could  [missed]<br>
&lt;smfr> q+<br>
&lt;fantasai> emilio: if you had border: env(hairline) and something relies on that value to match, zooming out, the lengths would no longer match because borders are still rounded up<br>
&lt;fantasai> emilio: that's a subtle difference<br>
&lt;fantasai> emilio: considering everything, I think env(hairline) is the best option<br>
&lt;emilio> scribe+<br>
&lt;emilio> smfr: are you referring to non-scaling-stroke emilio?<br>
&lt;Rossen8> ack smfr<br>
&lt;emilio> ... I don't think we want that<br>
&lt;emilio> TabAtkins: not the explicit goal but if you have a sufficiently small length it can behave like that<br>
&lt;emilio> ... he's not asking for that as a goal<br>
&lt;lea> I wonder if it may make sense to figure out what a hairline should resolve to before we name it. E.g. if it resolves to a device pixel, that is a reasonable unit in itself. If it doesn't resolve to that, then I'm having trouble conceptualizing what it resolves to.<br>
&lt;lea> q+<br>
&lt;emilio> smfr: so if scale() is used it'd get thicker?<br>
&lt;emilio> TabAtkins: yeah that's not a question<br>
&lt;TabAtkins> it does not resolve to a specific device pixel, Lea<br>
&lt;emilio> fantasai: I think I'd prefer a border-round() function<br>
&lt;emilio> ... I'd call it pixel-round()<br>
&lt;emilio> ... I'd prefer to avoid giving the idea that it's possible to do your layout in device pixels<br>
&lt;Rossen8> ack fantasai<br>
&lt;Rossen8> ack lea<br>
&lt;fantasai> lea: 3 things<br>
&lt;fantasai> lea: not making it a unit makes sense if we only use multiple of one.<br>
&lt;fantasai> lea: env() seems to make sense... is it disallowed anywhere that could otherwise be allowed?<br>
&lt;fantasai> lea: would it make sense to figure out what a hairline resolves to?<br>
&lt;fantasai> lea: when would I use a hairline unit?<br>
&lt;fantasai> lea: I would conceptualize as a device pixel<br>
&lt;fantasai> lea: so as an author, I don't know, and it's too vague<br>
&lt;fantasai> lea: might make sense to figure that out first<br>
&lt;fantasai> +1 lea<br>
&lt;astearns> or could do an async<br>
&lt;fantasai> TabAtkins: we keep running out of time, so let's do this first next week<br>
&lt;fantasai> lea: Use cases for multiples if you need to match another element to width of element with hairline borders, might need 2x<br>
&lt;fantasai> lea: env() is allowed everywhere<br>
&lt;fantasai> s/lea/Tab/<br>
&lt;fantasai> s/lea/Tab/<br>
&lt;fantasai> TabAtkins: finally, what does it resolve to? It will resolve to some multiple of a device pixel, not necessarily 1. As screens become higher res, device pixels might be too small to be a reasonable hairline<br>
&lt;fantasai> Meeting closed.<br>
</details>


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


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

Received on Wednesday, 21 May 2025 17:05:48 UTC