Open tabatkins opened 2 years ago
Just to clarify the proposal... How does writing-mode play into this (if at all)?
E.g. in your example at the end, would anything need to work out differently if the flex item had an orthogonal writing mode? Or would it still end up choosing the same final physical axis?
(and relatedly: in practice, does this only change behavior for abspos flex children?)
As a concrete example:
<style>
.containing-block { position: relative; }
.abspos { position: absolute; align-self: start; justify-self: end; }
</style>
<div class="containing-block">
<div style="flex; align-items: center;">
<div class="abspos"></div>
</div>
<div style="flex; flex-direction: column; align-items: center;">
<div class="abspos"></>
</div>
</div>
Should the two "abspos" go in the same direction?
What happens with align-self: initial
?
What happens with inset:0
?
Note that containing-block
could have a different writing-mode+direction of the static-container.
The align-self
and justify-self
properties initialize to auto
, which for absolutely-positioned elements does not reference the container`. https://www.w3.org/TR/css-align-3/#valdef-justify-self-auto
We might have a compat problem here that we need to address for flexbox particularly, but the ideal behavior here is that align-items
has no effect on abspos descendants.
Looking more closely here, it appears that the current behavior of browsers is just to apply the "inheritance" of -self for the purpose of calculating the static position (of abspos flexbox children). I can't get any browser to pay attention to -self properties for the normal alignment of the abspos, so I presume that's not implemented at all yet and we can rely on the current spec explicitly not looking up at *-items when determining its behavior. (See https://jsfiddle.net/dyp9uwea/.)
So this probably just needs (yet another) quirk inserted into the abspos flex children staticpos determination.
The align-self and justify-self properties initialize to auto, which for absolutely-positioned elements does not reference the container`. https://www.w3.org/TR/css-align-3/#valdef-justify-self-auto
This isn't clear from the spec to me - can you quote the place where this is mentioned?
We might have a compat problem here that we need to address for flexbox particularly, but the ideal behavior here is that align-items has no effect on abspos descendants.
Hmmm - we have a larger issue here then. Currently align-items for both grid and flex (interoperably across all engines) affect the static position. I believed that we were going to keep the align-items
, and justify-items
behaviour for grid.
Looking more closely here, it appears that the current behavior of browsers is just to apply the "inheritance" of -self for the purpose of calculating the static position (of abspos flexbox children). I can't get any browser to pay attention to -self properties for the normal alignment of the abspos, so I presume that's not implemented at all yet and we can rely on the current spec explicitly not looking up at *-items when determining its behavior. (See https://jsfiddle.net/dyp9uwea/.)
Right that's what I was looking at implementing - as well as the staticpos rectangle alignment. I suspect we aren't compat constrained in the align-self
/ justify-self
properties (but are compat constrainted with the align-items
/ justify-items
).
(and relatedly: in practice, does this only change behavior for abspos flex children?)
Abspos flex children in a column flexbox.
This isn't clear from the spec to me - can you quote the place where this is mentioned?
The first sentence of the "auto" definition: "Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box."
I see thanks.
Hmmm - we have a larger issue here then. Currently align-items for both grid and flex (interoperably across all engines) affect the static position. I believed that we were going to keep the align-items, and justify-items behaviour for grid.
E.g. https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10629
Ah, right, our wording actually directly says that by referencing "actual position". We intended that static position would use the normal rules, which means inheriting from the parent's *-items properties. We should make that clearer, tho.
In full, this seems to be where we're at:
*-self
applies to abspos:
*-self: auto
on abspos:
staticpos rectangle:
Edits needed:
The CSS Working Group just discussed [css-align] *-items properties might need to resolve directions early
, and agreed to the following:
RESOLVED: Take the changes listed in https://github.com/w3c/csswg-drafts/issues/7612#issuecomment-1230963091
@bfgeek We believe we've fixed all of this in the specs, let us know if anything seems to still be off?
Currently, the *-items properties are extremely simple - aside from the
legacy
keyword doing some magic, their keywords are left completely uninterpreted. The *-self properties then, as theirauto
behavior, grab the *-items value from their parent element, and interpret them appropriately - resolving logical values against the element's writing mode, etc.Per @bfgeek, this might not match author expectations, and might end up not being web compatible. Chrome received a bug about this, where an author wrote
align-items
on a column flexbox (which corresponds to the horizontal axis), and expected it to horizontally align a positioned child. Per spec, this won't work - the positioned child will take the parent'salign-items
value as itsalign-self
value, but itsalign-self
property operates in its containing block's block axis, which in this case is vertical.Ian's suggestion is that we do direction resolution on the -items properties, producing a pair of physical positions, and then the -self properties take their
auto
values from the pair, grabbing from the pair according to their own axisSo in the example above, the column flexbox (with
align-items: flex-end
and a defaultjustify-items: normal
) would produce a horizontal alignment of "right", and a vertical alignment of "normal". Then the positioned child, with both of its -self properties beingauto
, would take analign-self
of "normal" (because its align- axis is vertical) and ajustify-self
of "end" (the logical direction corresponding to horizontal right).