v157 · css · anchor positioning

Dual-write that survives both

A rename with an overlap period needs no feature detection. CSS already drops declarations it cannot parse, so writing both spellings — old first, new second — gives every browser the best value it understands. Build the rule below and watch which declaration this browser actually keeps.

Probing this browser…

Build the declaration

/* choose an option above */
Nothing applied yet.

why order matters

/* CORRECT — old first, new second.
   Old browser: keeps line 1, drops line 2 (cannot parse it).
   New browser: parses both, and the LAST one wins. */
.tip {
  position-visibility: anchors-visible;
  position-visibility: anchor-visible;
}

/* WRONG — new first. A new browser parses both and the last
   declaration wins, so it ends up on the DEPRECATED spelling.
   You migrated and got the old value anyway. */
.tip {
  position-visibility: anchor-visible;
  position-visibility: anchors-visible;
}

This is the same ordering discipline that vendor prefixes needed, and the same trap: the fallback goes first, because the cascade takes the last declaration it understood. Reversing them is silent — nothing errors, you simply keep the old behaviour.

the case for not bothering

Because the plurals are being deprecated, not removed, a stylesheet that only ever writes anchors-visible keeps working indefinitely for now. Dual-writing buys forward compatibility for the day the plurals are finally removed, at the cost of one extra line per rule. Writing only the singular spelling is the one option that can break today, since browsers that predate the rename will drop it and fall back to no position-visibility at all.

see also