Anchor positioning syntax changes

Una Kravets
Mason Freed
Mason Freed
X GitHub

CSS anchor positioning was released in Chrome 125. This first publicly-available version of the API triggered additional discussions about the syntax . As a result of that discussion, there have been some slight changes since the feature launch. If you've already tried out CSS anchor positioning, this post explains the changes you need to make to your code, or content about anchor positioning.

There are two primary property renames that you should be aware of:

  1. inset-area is renamed to position-area. This rename was preferred by the CSS Working Group because the phrasing position- helps you remember that this property is applied to the positioned element, not the anchor element. This change will start in Chrome 129, and inset-area is supported until Chrome 131 to give you time to update any demos or articles you have.
  2. position-try-options is renamed to position-try-fallbacks. This rename helps you remember that these are just fallbacks to the primary position, which is determined by the base styles. This change shipped with Chrome 128, and position-try-options no longer works as of version 128. We'd recommend you use the shorthand (changing it to position-try), which works from Chrome 125, and has not changed.

There is also one additional behavioral change:

  • The inset-area()functional syntax is being removed from position-try. Therefore use position-try-fallbacks: top instead of position-try-fallbacks: inset-area(top). This change will also begin in Chrome 129.

Learn more about using anchor positioning here: