[css-anchor-position] Make anchor-center work without position-anchor

[yisibl]

1. Open

data:text/html;charset=UTF-8, <style>
.anchor { anchor-name: --foo; width: 100px; height: 50px; display: block; margin: 30px auto;} 
.anchored{position: absolute; left: anchor(--foo 50%); top: anchor(--foo bottom); 
justify-self: anchor-center; background: green; padding: .5em 2em;}</style>
<button class="anchor">anchor</button>
<div class="anchored">anchored</div>

2. The green element is not horizontally centered with respect to the button.

We must add position-anchor: --foo for anchor-center to take effect. This is often confusing to the user because <anchor-element> is already defined on the left.

Can we change the status quo?

[tabatkins]

Not generally, no. An author can refer to multiple different anchor elements on the same positioned element, so inference from "they've only mentioned one anchor name so far" is fragile.

Learning to reach for position-anchor early is a good reflex anyway, as when you are only using a single anchor it makes your other properties since you can omit the anchor name:

.anchored {
 position: absolute;
 position-anchor: --foo;
 left: anchor(50%);
 top: anchor(bottom);
 justify-self: anchor-center;
}

Tho note that these styles create overflow - the inset-modified containing block's left edge is right at the anchor's center, so by anchor-centering you are by definition overflowing the IMCB. You probably just wanted to write this instead, which also means you'll be setting position-anchor anyway:

.anchored {
 position: absolute;
 position-anchor: --foo;
 inset-area: bottom;
}

[kizu]

What if the anchor-center could have an optional functional form? Like justify-self: anchor-center(--foo)? Having an implicit default as position-anchor is good, but if we could allow using an explicit anchor name, it could lead to more flexible styles.

[tabatkins]

Theoretically possible (as is adding an optional anchor-name to 'position-area' to do the same) but it doesn't seem necessary currently. anchor-center and position-area are the only features that actively use the default anchor, and it would be really weird to use them both but with different anchors; the implicit behaviors that depends on the default anchor (scroll adjustment stuff) also would be weird if they didn't work correctly with anchor-center and position-area.

So this is something we could do in the future, if there's need, but for now there's no real reason for it imo.