v157 · css · anchor positioning

Ship anchor-visible and anchor-valid, deprecate the plurals

The CSSWG resolved to rename position-visibility’s values from plural to singular: anchors-visible → anchor-visible, anchors-valid → anchor-valid. The plan is to ship the singular spellings, alias the plurals to them, and deprecate but not remove the old names. This is a rename with a deliberate overlap period — the interesting part is how you write CSS that works on both sides of it.

concepts

  1. Alias probe

    Test whether this browser maps the plural spelling onto the singular one. Set each spelling, read the computed value back, and see whether a anchors-visible declaration serialises as itself or as its singular alias — the observable signature of the rename having landed.

  2. Dual-write that survives both

    The CSS cascade already solves forward-compatible renames. Write the old name, then the new one; the browser keeps whichever it understands and drops the other. Build the declaration live and see which spelling each browser actually retains.

  3. Deprecation is not removal

    Deprecated, aliased, and removed mean three different things, and only one of them breaks your page. Walk the states a value moves through, and check which state this browser is in for all four position-visibility values at once.

why rename at all

The plural names read as though they quantify over every anchor the element references. That was in fact the original anchors-valid behaviour, and it was reverted precisely because it was ambiguous and expensive — see CSS position-visibility:anchor-valid. Once the CSSWG resolved that only the default anchor matters, the plural spelling was actively misleading: there is only ever one anchor under consideration.

So the rename is not cosmetic. anchor-visible is a claim about the anchor, and the grammar now matches the semantics.

the API

/* Before the rename */
.tip { position-visibility: anchors-visible; }

/* After: singular, same meaning */
.tip { position-visibility: anchor-visible; }

/* During the overlap — the cascade handles it for you.
   A browser that knows only the old name keeps line 1 and
   drops line 2; a browser that knows the new name does the
   reverse, because the later valid declaration wins. */
.tip {
  position-visibility: anchors-visible;
  position-visibility: anchor-visible;
}

This works because CSS drops declarations it cannot parse rather than failing the whole rule. It is the same mechanism that made vendor-prefix migrations survivable, and it needs no feature detection, no script, and no build step.

references