Anchor Positioning Quirks | CSS-Tips

I’m thrilled to say, that from this week onwards, the CSS-tricks Almanac has an entry for every property, perform, and at-rule associated to the brand new Anchor Positioning API! For the final month, I’ve tried to totally perceive this new module and clarify it to one of the best of my skill. Nevertheless, anchor positioning continues to be a brand new function that brings even newer dynamics on the right way to place absolute components, so it’s sure to have some bizarre quirks and possibly even just a few bugs lurking round.

To have a good time the protection, I wished to debate these head-scratchers I discovered whereas diving into these things and break them down in order that hopefully, you gained’t should bang your head towards the wall like I did at first.

The inset-modified containing block

A static ingredient containing block is a reasonably easy idea: it’s that ingredient’s guardian ingredient’s content material space. However issues get difficult when speaking about completely positioned components. By default, a fully positioned ingredient’s containing block is the viewport or the ingredient’s closest ancestor with a place aside from static, or sure values in properties like comprise or filter.

All in all, the principles round an absolute ingredient’s containing block aren’t so arduous to recollect. Whereas anchor positioning and the containing block have their quirks (for instance, the anchor ingredient should be painted earlier than the positioned ingredient), I wished to give attention to the inset-modified containing block (which I’ll abbreviate as IMCB from right here on out).

There isn’t loads of info relating to the inset-modified containing block, and what info exists comes instantly from the anchor positioning specification module. This tells me that, whereas it isn’t one thing new in CSS, it’s undoubtedly one thing that has gained relevance because of anchor positioning.

The perfect clarification I might discover comes instantly from the spec:

For a fully positioned field, the inset properties successfully scale back the containing block into which it’s sized and positioned by the required quantities. The ensuing rectangle is known as the inset-modified containing block.

So if we inset a fully positioned ingredient’s (with prime, left, backside, proper, and so forth.), its containing block shrinks by the values on every property.

.absolute {
  place: absolute;
  prime: 80px;
  proper: 120px;
  backside: 180px;
  left: 90px;
}

For this instance, the ingredient’s containing block is the total viewport, whereas its inset modified containing block is 80px away from the highest, 120px away from the best, 180px away from the underside, and 90px away from the left.

Realizing how the IMCB works isn’t a prime precedence for studying CSS, however if you wish to perceive anchor positioning to its fullest, it’s a must-know idea. For example, the position-area and position-try-order closely depend on this idea.

Within the case of the position-area property, a goal containing block will be damaged down right into a grid divided by 4 imaginary strains:

1. The beginning of the goal’s containing block.
2. The beginning of the anchor ingredient or anchor(begin).
3. The tip of the anchor ingredient or anchor(finish).
4. The tip of the goal’s containing block.

The position-area property makes use of this 3×3 imaginary grid surrounding the goal to place itself contained in the grid. So, if we now have two components…

<div class="anchor">Anchor</div>
<div class="goal">Goal</div>

…hooked up with anchor positioning:

.anchor {
  anchor-name: --my-anchor;

  top: 50px;
  width: 50px;
}

.goal {
  place: absolute;
  position-anchor: --my-anchor;

  top: 50px;
  width: 50px;
}

…we are able to place the .goal ingredient utilizing the position-area property:

.goal {
  place: absolute;
  position-anchor: --my-anchor;
  position-area: prime left;

  top: 50px;
  width: 50px;
}

The IMCB is shrunk to suit contained in the area of the grid we chosen, on this case, the top-left area.

You’ll be able to see it by setting each goal’s dimensions to 100%:

The position-try-order additionally makes use of the IMCB dimensions to resolve the right way to order the fallbacks declared within the position-try-fallbacks property. It checks which one of many fallbacks offers the IMCB with the biggest obtainable top or width, relying on whether or not you set the property with both the most-height or most-width values.

I had a tough time understanding this idea, however I believe it’s completely proven in a visible software by Una Kravets on https://chrome.dev/anchor-tool/.

Specification vs. implementation

The spec was my finest good friend whereas I researched anchor positioning. Nevertheless, concept can solely take you up to now, and enjoying with a brand new function is the enjoyable a part of understanding the way it works. Within the case of anchor positioning, some issues had been written within the spec however didn’t truly work in browsers (Chromium-based browsers on the time). After staring mindlessly at my display, I discovered the difficulty was resulting from one thing so easy I didn’t even think about it: the browser and the spec didn’t match.

Anchor positioning is completely different from loads of different options in how briskly it shipped to browsers. The first draft was printed on June 2023 and, only a yr later, it was launched on Chrome 125. To place it into perspective, the primary draft for customized properties was printed in 2012 and we waited 4 years to see it in carried out in browsers (though, Firefox shipped it years earlier than different browsers).

I’m excited to see browsers transport new CSS options at a quick tempo. Whereas it’s superior to get new stuff quicker, it leaves much less house between browsers and the CSSWG to remake options and polish present drafts. Keep in mind, as soon as one thing is on the market in browsers, it’s arduous to vary or take away it. Within the case of anchor positioning, browsers shipped sure properties and features early on that had been finally modified earlier than the spec had absolutely settled right into a Candidate Advice.

It’s a bit complicated, however as of Chrome 129+, that is the stuff that Chrome shipped that required modifications:

position-area

The inset-area property was renamed to position-area (#10209), however will probably be supported till Chrome 131.

.goal {
  /* from */
  inset-area: prime proper;

  /* to */
  position-area: prime proper;
}

position-try-fallbacks

The position-try-options was renamed to position-try-fallbacks (#10395).

.goal {
  /* from */
  position-try-options: flip-block, --smaller-target;

  /* to */
  position-try-fallbacks: flip-block, --smaller-target;
}

inset-area()

The inset-area() wrapper perform doesn’t exist anymore for the position-try-fallbacks (#10320), you’ll be able to simply write the values with out the wrapper

.goal {
  /* from */
  position-try-options: inset-area(prime left);

  /* to */
  position-try-fallbacks: prime left;
}

anchor(heart)

To start with, if we wished to heart a goal from the middle, we must write this convoluted syntax

.goal {
  --center: anchor(--x 50%);
  --half-distance: min(abs(0% - var(--center)), abs(100% - var(--center)));
	
  left: calc(var(--center) - var(--half-distance));
  proper: calc(var(--center) - var(--half-distance));
}

The CWSSG working group resolved (#8979) so as to add the anchor(heart) argument for much-needed brevity.

.goal {
  left: anchor(heart);
}

Bugs!

Some bugs snuck into browser implementations of qnchor positioning. For instance, the spec says that if a component doesn’t have a default anchor ingredient, then the position-area property does nothing. This can be a identified difficulty (#10500) nevertheless it’s nonetheless attainable to copy, so please, simply don’t do it.

The next code…

.container {
  place: relative;
}

.ingredient {
  place: absolute;
  position-area: heart;
  margin: auto;
}

…facilities the .ingredient inside its container as we are able to see on this demo from Temani Afif:

One other instance comes from the position-visibility property. In case your anchor ingredient is off-screen, you usually need its goal to be hidden as effectively. The spec says the default is anchors-visible, however browsers go along with all the time as a substitute.

Chrome presently isn’t reflecting the spec. It certainly is utilizing all the time because the preliminary worth. However the spec’s textual content is intentional — in case your anchor is off-screen or in any other case scrolled off, you often need it to cover (#10425).

Anchor positioning accessibility

Whereas anchor positioning’s most easy use case is for stuff like tooltips, infoboxes, and popovers, it may be used for lots of different stuff as effectively. Examine this instance by Silvestar Bistrović, for instance, the place he connects components with strains. He’s tethered components collectively for ornamental functions, so anchor positioning doesn’t imply there’s a semantic relationship between the weather. As a consequence, non-visual brokers, like display readers, are left at midnight about the right way to interpret two seemingly unrelated components.

If we’re aiming to hyperlink a tooltip to a different ingredient, we have to arrange a relationship within the DOM and let anchor positioning deal with the visuals. Fortunately, there are APIs (just like the Popover API) that do that for us, even establishing an anchor relationship that we are able to reap the benefits of to create extra compelling visuals.

In a normal approach, the spec describes an method to create this relationship utilizing ARIA attributes such because the aria-details or aria-describedby, alongside the position attribute on the goal ingredient.

So, whereas we might connect the next two components…

<div class="anchor">anchor</div>
<div class="toolip">toolip</div>

…utilizing anchor positioning:

.anchor {
  anchor-name: --my-anchor;
}

.toolip {
  place: absolute;
  position-anchor: --my-anchor;
  position-area: prime;
}

…however display readers solely see two components subsequent to at least one one other with none remarked relationship. That’s a bummer for accessibility, however we are able to simply repair it utilizing the corresponding ARIA attribute:

<div class="anchor" aria-describedby="tooltipInfo">anchor</div>
<div class="toolip" position="tooltip" id="tooltipInfo">toolip</div>

And now they’re each visually and semantically linked collectively! It might simply be higher if might pull it off with out ARIA.

Conclusion

Being confused by a brand new function simply to lastly perceive it is likely one of the most satisfying experiences anybody in programming can really feel. Whereas there are nonetheless some issues about anchor positioning that may be (and are) complicated, I’m happy to say the CSS-Tips Almanac now has a deluge of data to assist make clear issues.

Probably the most thrilling factor is that anchor positioning is nonetheless in an early stage. Meaning there are numerous extra complicated issues coming for us to find and study!