A boats anchor agains a futuristic background with rectangle patterns, with text updated on it

The CSS Working Group (CSSWG) has recently introduced changes to the anchor positioning spec in CSS. I've focused on anchoring in previous articles and to maintain accuracy, I will be updating an older article (just this once). This article will highlight the specific name changes and their corresponding Chrome release dates.

Naming things is hard and that’s what this is all about, we were warned on CSS Day by Tab Atkins that this spec might still update, so here are the two changes:

Change 1: position-try-options becomes position-try-fallbacks

Starting from Chrome 128 position-try-options will be renamed to position-try-fallbacks. I’ve already updated my examples to be compliant with the latest version of the spec. Yes, the examples might be broken a bit in the current stable Chrome version while writing this (127), but I do believe that this is the way forward so no use in keeping the old name for now.

Change 2: Inset-area becomes position-area

Starting from Chrome 129 (Current Canary version) the inset-area property will be renamed to position-area.

Currently, I’ve updated my examples to support both syntaxes as Chrome 129 is a few more months away. You will now see those examples like this:

.anchored {
    inset-area: top span-all;
    position-area: top span-all;
}

This ensures that when position-area is not supported, it will fall back to inset-area. In due time, I will remove the inset-area.

Updating an article… just this once

I usually do not update articles, but in this case, I will update my previous anchoring article. With a small disclaimer linking to this information you’re reading here. Mostly because it’s still a recent article that has a decent amount of traffic and I want to inform people correctly.

You can find the updated version of the CSS anchoring article here.

 in  css