Re: [csswg-drafts] [css-align-3][css-position-3] Better interaction of auto insets and self-alignment properties? (#9124)

The CSS Working Group just discussed `[css-align-3][css-position-3] Better interaction of auto insets and self-alignment properties?`.

<details><summary>The full IRC log of that discussion</summary>
&lt;ntim> TabAtkins: before the spec existed there is no interaction between the 2, we would use the CSS 2.1 behavior<br>
&lt;ntim> TabAtkins: The remaining tension is what to do in the double auto case<br>
&lt;fantasai> My positions:<br>
&lt;fantasai> https://github.com/w3c/csswg-drafts/issues/9124<br>
&lt;fantasai> https://github.com/w3c/csswg-drafts/issues/9124#issuecomment-1679487628<br>
&lt;ntim> TabAtkins: my preference is to have double autos resolve the same way so they resolve to zeros when you have non-default alignments<br>
&lt;fantasai> https://github.com/w3c/csswg-drafts/issues/9124#issuecomment-1678174879<br>
&lt;ntim> TabAtkins: main reason for this, there is one alignment keyword where this is necessary, the anchor-center keyword needs the space to be able to align.<br>
&lt;ntim> TabAtkins: the larger thing behind my reasoning, static pos as defined in CSS 2.1 is just a poor version of anchor positioning<br>
&lt;ntim> TabAtkins: it wasn't great, but it did do the job<br>
&lt;ntim> TabAtkins: but we don't need this anymore, since we have anchor positniing<br>
&lt;ntim> TabAtkins: we don't need to do this anymore, unless we are constrained by compat<br>
&lt;astearns> q+ masonf<br>
&lt;astearns> ack fantasai<br>
&lt;iank_> q+<br>
&lt;ntim> fantasai: It would be useful to focus on the case where anchor positioning is happening, because we probably have agreement on that one<br>
&lt;fantasai> PROPOSED: If only one inset in an axis is auto, and self-alignment in that axis is not normal, then auto computes to zero<br>
&lt;ntim> astearns: lets try to resolve on it<br>
&lt;TabAtkins> ack masonf<br>
&lt;fantasai> TENTATIVELY RESOLVED: If only one inset in an axis is auto, and self-alignment in that axis is not normal, then auto computes to zero<br>
&lt;ntim> fantasai: my proposal is  in the double auto case if there is a default anchor, set the alignment rect to be the anchor's element's bounds<br>
&lt;ntim> iank: there are a few cases where this breaks down:<br>
&lt;ntim> iank: let's say my left is based on one anchor, and my right on another based on another<br>
&lt;ntim> TabAtkins: having the behavior being significantly different between the single and double auto cases is confusing<br>
&lt;fantasai> fantasai: We already have two different modes in abspos: static positoining or not<br>
&lt;fantasai> ... all this is doing is saying, instead of anchoring to your hypothetical box in the staticpos case, you anchor to the explicit anchor from anchor-default<br>
&lt;fantasai> ... I think it's more consistent with how CSS already works<br>
&lt;ntim> TabAtkins: i don't want it to be based on whether there's a default anchor or not, I want it to be based on the alignment value<br>
&lt;ntim> fantasai: we already have these 2 modes<br>
&lt;ntim> fantasai: alignment doesn't change what you layout relative to<br>
&lt;ntim> TabAtkins: I think it would be nice to have a consistent alignment model,<br>
&lt;ntim> we no longer need the static positioning, it would be nice to have alignment use a single consistent model<br>
&lt;ntim> fantasai: you're proposing to change existing behavior on web pages<br>
&lt;ntim> TabAtkins: no I'm not<br>
&lt;ntim> TabAtkins: my argument is not that we should change based on some arbitrary prop, for the single auto case, we turn the auto into 0<br>
&lt;fantasai> i/fantasai:/fantasai: Just becaue you dislike staticpos, because inferior to anchorpos, doesn't mean we should use the opportunity of any non-default property value to switch us out of it/<br>
&lt;ntim> TabAtkins: we should be consistent in the double auto case and resolve both to auto<br>
&lt;fantasai> s/auto/0<br>
&lt;TabAtkins> and since the staticpos behavior is subsumed by anchor pos, we don't actually lose anything by dropping it in this case, so we can ahve a better, more ocnsistent behavior by having autos always become 0 when alignment is happening<br>
&lt;ntim> TabAtkins: re: changing existing behavior, no one implements alignment properties on abspos<br>
&lt;ntim> fantasai: they do impl alignment properties for the static pos of the abspos<br>
&lt;ntim> iank: not really<br>
&lt;ntim> iank: it's implemented in grid / flexbox<br>
&lt;ntim> iank: but flexbox only implements in one axis<br>
&lt;astearns> q?<br>
&lt;ntim> iank: we're willing to take that compat risk and take that back to the group<br>
&lt;astearns> ack iank_<br>
&lt;ntim> iank: the proposed behavior is super useful<br>
&lt;ntim> iank: today if you need to center somnething in the containing block<br>
&lt;ntim> iank: there's about 2-3 ways people use, they are very clunky<br>
&lt;ntim> iank: you need to set multiple props<br>
&lt;ntim> iank: one way is setting insets to 0<br>
&lt;ntim> iank: the other way is using calc<br>
&lt;fantasai> iank: They're all super clunky<br>
&lt;ntim> iank: being able to set place-content: center and get centered alignment is very neat<br>
&lt;fantasai> scribe+<br>
&lt;fantasai> fantasai: I'm not arguing that being able to use alignment props in abspos is bad. I specced it out, obviously I think we should have it<br>
&lt;fantasai> fantasai: The hacks iank mentions are indeed all terrible and should be replaced with alignment<br>
&lt;fantasai> fantasai: that doesn't mean that alignment should change the behavior in auto-auto case<br>
&lt;fantasai> fantasai: just means you set 'inset: 0' to switch to useing the abspos containing block<br>
&lt;miriam> q+<br>
&lt;fantasai> fantasai: I don't think this his hard or confusing<br>
&lt;emeyer> scribe+<br>
&lt;iank_> q+<br>
&lt;xiaochengh> q+<br>
&lt;miriam> ack fantasai<br>
&lt;Zakim> fantasai, you wanted to say that adding 'inset: 0' is not that much to add<br>
&lt;emeyer> miriam: inset 0 isn’t a lot to add, but I as an author have never found abspos particularly useful<br>
&lt;emeyer> …I’m wondering what we gain by maintaining it<br>
&lt;dbaron> s/abspos/static positioning of abspos/<br>
&lt;emeyer> …What is the use case where I want to maintain it while adding alignment?<br>
&lt;emeyer> fantasai: Two things about adding alignment to static pos<br>
&lt;emeyer> …Static pos is like if you have an element in the document and then flip on abspos<br>
&lt;emeyer> …If you apply alignment properties in block mode (for example), then it will jump to somewhere else<br>
&lt;emeyer> …What I’m arguing for is, when you define an anchor, then static positioning becomes relative to the anchor bow<br>
&lt;emeyer> …That gets you the ability to be centered inside another box very easily<br>
&lt;emeyer> …I think for the non-anchor case, it’s about consistency with the way static positioning works<br>
&lt;emeyer> miriam: I understood you were proposing that when you switch to abspos, that would change your alignment, but in a different way<br>
&lt;emeyer> fantasai: If you want to be anchored to an element, I think it makes sense your automatic position moves to that element<br>
&lt;emeyer> …I think alignment changing your containing block to change is confusing<br>
&lt;emeyer> …Right now, alighment shifts you within the container to which you’re sizing<br>
&lt;emeyer> …anchor-default does move you; that’s its intention<br>
&lt;emeyer> …Why not have it do something as soon as it’s set?<br>
&lt;emeyer> TabAtkins: I think your argument is that current behavior is useful, and I want to argue with that<br>
&lt;emeyer> …We know that flexbox rules aren’t very useful; we watered them down on purpose<br>
&lt;emeyer> …In the one case that isn’t well implemented yet, the inline-block case, aligning goes into degenerate rectangles<br>
&lt;emeyer> …It would do something, but usually the opposite of what you expect it to do<br>
&lt;emeyer> …align: start would put you more end-ward and align: end would put you more start-word, in certain cases<br>
&lt;emeyer> …I think we were okay with that confusion when we defined the behvavior because we didn’t have anything better<br>
&lt;emeyer> …Now that we have better, we don’t have to offer authors this confusing behavior<br>
&lt;emeyer> fantasai: I think it’s great to offer a better way to do this; I’m not convinced this is the way to do it<br>
&lt;emeyer> iank_: I don’t think there’s been strong use cases presented for the double-auto case<br>
&lt;emeyer> …The behavior being proposed does solve developer pain quite well<br>
&lt;emeyer> …It does something very useful for center, stretch, a bunch of other things<br>
&lt;emeyer> …This is outside of anchor positioning<br>
&lt;vmpstr> q?<br>
&lt;emeyer> TabAtkins: I’m not sure how to resolve this, Elika<br>
&lt;iank_> ack iank_<br>
&lt;miriam> q+<br>
&lt;emeyer> …My argument is that the default behavior wasn’t useful, perhaps when it was defined, but not now<br>
&lt;emeyer> xiaochengh: For center, resolving double-auto to zero seems more useful<br>
&lt;emeyer> …THe inset modified containing block isn’t just used for alignm,ent, but also for position fallback<br>
&lt;ntim> q+<br>
&lt;emeyer> …The only containing block to test is the original containing block<br>
&lt;emeyer> …For alignment, we could use a different containing block than for fallback, but I’d like to avoid that<br>
&lt;astearns> ack xiaochengh<br>
&lt;astearns> ack miriam<br>
&lt;emeyer> miriam: Already we have a behavior where apply insets changes your reference, you’re no longer using the static position box<br>
&lt;emeyer> …To me, changing the alignment is exactly the same concept, so in my mind it aligns better with current behavior<br>
&lt;emeyer> …Alignment is an auto-inset sort of thing, so if one changes, why not the other?<br>
&lt;astearns> ack ntim<br>
&lt;vmpstr> q+<br>
&lt;astearns> ack vmpstr<br>
&lt;emeyer> vmpstr: Is there a web compatibility risk with this resolution?<br>
&lt;emeyer> TabAtkins: For some layout modes, we do implement the double-auto case<br>
&lt;emeyer> …We’re willing to take the compat risk<br>
&lt;emeyer> iank_: We’re also willing to take the risk<br>
&lt;emeyer> …We don’t think there will be much<br>
&lt;emeyer> astearns: Is there anyone who wants to show solidarity for Elika’s position?<br>
&lt;emeyer> emilio: Elika’s position is safest<br>
&lt;emeyer> iank_: If we show it’s web compatible, would that change your mind?<br>
&lt;emeyer> emilio: I don’t feel too strongly about preserving the current behavior<br>
&lt;emeyer> fantasai: Part of my point is you can get the behavior Tab and Ian want by setting inset to 0<br>
&lt;emeyer> astearns: Having a property that does nothing until you set another property isn’t good design<br>
&lt;emeyer> emilio: That’s already positioning, right?<br>
&lt;emeyer> iank_: I think our argument is that what we want is more useful and more what devs expect<br>
&lt;fantasai> astearns, that's a good argument for anchor-default having an effect without setting 'inset: anchor(..)'!<br>
&lt;emeyer> emilio: How is it more useful if the behavior Ian and Tab want can be achieved<br>
&lt;emeyer> …The current behavior cannot<br>
&lt;astearns> fantasai: I am OK with needing two properties when two things need to be connected<br>
&lt;fantasai> s/fantasai:/fantasai,/<br>
&lt;emeyer> TabAtkins: Current behavior can be achieved via anchor position<br>
&lt;fantasai> astearns, they are connected already, why not have an effect<br>
&lt;emeyer> iank_: I think also, there hasn’t been strong use cases for the existing behavior<br>
&lt;noamr_> q+<br>
&lt;emeyer> TabAtkins: Curernt staticpos behavior is in many cases unintuitive and inconsistent between layout modes<br>
&lt;emeyer> …Given it was mostly defined to give you certain powers that anchor positioning can give in better ways, we think authors are better served by having the old behavior be gone<br>
&lt;emeyer> emilio: I still th ink Elika’s position is safer but I wouldn’t object to removing it if you can get away with it<br>
&lt;astearns> ack noamr_<br>
&lt;fantasai> I'm not convinced you can do the same as staticpos for block and inline layout, at least not easily or without injecting additional things into the DOM<br>
&lt;emeyer> noamr_: If you want to achieve this non-useful behavior, you’d have to name everything<br>
&lt;emeyer> TabAtkins: You’d have to write a name, but it could be a locally s coped name (according to another proposal)<br>
&lt;emeyer> astearns: Does that meet your concern, Elika?<br>
&lt;emeyer> fantasai: Replicating for grid and flexbox is not too hard<br>
&lt;emeyer> …You have to assign a name to the contain and then tell the item to anchor itself to that<br>
&lt;emeyer> …For block and inline, you can’t just slap a name on a containing block<br>
&lt;emeyer> …You have to reference where the item would have been<br>
&lt;emeyer> …You’d have to add an empty element to the DOM to act as a placeholder<br>
&lt;TabAtkins> (not correct; you're always positioning relative to the prev/following element, and those can receive a name)<br>
&lt;emeyer> astearns: We’re out of time; not hearing consensus, but<br>
&lt;emeyer> …can we take a resolution?<br>
&lt;emeyer> fantasai: I think I’d object unless everyone else in the WG disagrees<br>
&lt;emeyer> TabAtkins: Thank you all for coming!<br>
&lt;emeyer> topic-<br>
&lt;fantasai> Tab, that doesn't work for "here's some text &lt;span class=abspos>&lt;/span> more text"<br>
</details>


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


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

Received on Wednesday, 13 September 2023 13:32:09 UTC