demo · v131

inset-area vs position-area, side by side

A direct A/B comparison: the same anchor, the same popover, the same direction values — one rendered with the deprecated inset-area and one with the new position-area. Change the direction and watch which side keeps working.

deprecated

inset-area

A
popover
.popover {
  position: absolute;
  position-anchor: --a;
  inset-area: top;  /* removed */
}
replacement

position-area

A
popover
.popover {
  position: absolute;
  position-anchor: --a;
  position-area: top;
}

why the rename

The CSS working group decided that "inset-area" misread as a property of inset (the placement of insets) rather than what it actually does: name a region of space relative to the anchor for positioning. The new position-area reads naturally with its sibling position-anchor. Both names took the same syntax, so the migration is a single text replace.

codemod

// jscodeshift / sed one-liner
sed -i 's/inset-area:/position-area:/g' src/**/*.css

see also