Re: [csswg-drafts] [css-gaps-1] Asymmetric start and end offsets (#12603)

The CSS Working Group just discussed `[css-gaps-1] Asymmetric start and end offsets`.

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> kbabbitt: another piece of author feedback that we got. The property would control how far into or away from an intersection the gap decoration extends<br>
&lt;fantasai> kbabbitt: They might want to meet exactly, or overshoot, or undershoot, the intersection<br>
&lt;fantasai> kbabbitt: For flexbox, there was an author who wanted different offsets on different sides of it<br>
&lt;fantasai> kbabbitt: Suggestion was to have the outset value control start vs end independently<br>
&lt;fantasai> kbabbitt: e.g. taking two values, or make it a shorthand<br>
&lt;SebastianZ> q+<br>
&lt;astearns> ack SebastianZ<br>
&lt;fantasai> kbabbitt: another somewhat related issue is shorthanding the offset and the break, so keep that in mind<br>
&lt;fantasai> SebastianZ: Not up to date on how this is currently defined, but it take into account the expansion outside the grid, or also within the container, btween the items?<br>
&lt;JoshT> q+<br>
&lt;fantasai> kbabbitt: Can specify outset either ith pixel value or percentage value, where percentage is relative to crossing gap<br>
&lt;fantasai> kbabbitt: you can extend outside the container if you want<br>
&lt;fantasai> kbabbitt: can keep it flush<br>
&lt;fantasai> SebastianZ: separate question wrt outside of container and internal<br>
&lt;fantasai> SebastianZ: but I like being able to control both outsets<br>
&lt;astearns> ack JoshT<br>
&lt;fantasai> JoshT: The example with the landscapes is interesting, especially if we assume it's a grid of the entire page layout<br>
&lt;fantasai> JoshT: I don't think this proposal gives us a way to give a fixed width for the decorator<br>
&lt;fantasai> astearns: but did have a thought, might want 5em<br>
&lt;fantasai> alisonmaher: I don't think you can, because 100% is relative to gap<br>
&lt;astearns> ack fantasai<br>
&lt;emilio> fantasai: this example with a short line looks like a border in the preceding paragraph, but with a shortened border<br>
&lt;astearns> thought that you’d be able to get a particular length with calc, but alisonmaher is correct that it would be centered<br>
&lt;emilio> ... there's been various proposals in borders-4<br>
&lt;emilio> ... this particular pattern is common<br>
&lt;emilio> ... I think that's a separate feature from gaps<br>
&lt;emilio> ... we should also do it, there's a spec and we should probably revisit it<br>
&lt;emilio> ... so this seems tangential<br>
&lt;emilio> ... just having the outset property is enough<br>
&lt;emilio> ... each side independently I'd expect us to go in that direction at some point<br>
&lt;emilio> ... so that it seems fine to do whenever there's sufficient demand<br>
&lt;emilio> ... but the point about making sure we design so that the syntax can be accommodated makes sense<br>
&lt;emilio> ... we should expand rule-offset to have more than one offset<br>
&lt;emilio> kbabbitt: do you think this is one prop with 1/2 values or different props?<br>
&lt;emilio> fantasai: if they don't need to cascade independently I don't think we should split it into longhands<br>
&lt;fantasai> fantasai: If an author would want to set one value in one style rule and another value in another style rule and have them combine, then you need longhands. otherwise not.<br>
&lt;fantasai> SebastianZ: Could be use cases wrt animating the outset-start individually from that<br>
&lt;fantasai> fantasai: yeah, you can do that<br>
&lt;fantasai> SebastianZ: i can imagine wanting to extend the lines outside the container, but not within<br>
&lt;fantasai> astearns: We can start with a single rule-offset with two lenghts, and split out to longahnds later<br>
&lt;fantasai> fantasai: important question -- here the proposal is start vs end<br>
&lt;fantasai> fantasai: what Sebastian is suggesting is interior vs exterior<br>
&lt;fantasai> kbabbitt: another issue on that<br>
&lt;fantasai> fantasai: the syntax might interact then<br>
&lt;fantasai> astearns: ok, let's go to that issue then<br>
</details>


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


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

Received on Wednesday, 20 August 2025 13:53:17 UTC