I’m thrilled to say, that from this week onwards, the CSS-tricks Almanac has an entry for every property, operate, and at-rule associated to the brand new Anchor Positioning API! For the final month, I’ve tried to completely perceive this new module and clarify it to one of the best of my capacity. Nonetheless, anchor positioning remains to be a brand new characteristic that brings even newer dynamics on tips on how to place absolute components, so it’s sure to have some bizarre quirks and possibly even a couple of bugs lurking round.
To have a good time the protection, I wished to debate these head-scratchers I discovered whereas diving into these items and break them down in order that hopefully, you gained’t need to bang your head in opposition to the wall like I did at first.
The inset-modified containing block
A static component containing block is a reasonably simple idea: it’s that component’s guardian component’s content material space. However issues get difficult when speaking about completely positioned components. By default, a fully positioned component’s containing block is the viewport or the component’s closest ancestor with a place apart from static, or sure values in properties like comprise or filter.
All in all, the principles round an absolute component’s containing block aren’t so laborious to recollect. Whereas anchor positioning and the containing block have their quirks (for instance, the anchor component should be painted earlier than the positioned component), I wished to concentrate on the inset-modified containing block (which I’ll abbreviate as IMCB from right here on out).
There isn’t a number of info concerning the inset-modified containing block, and what info exists comes straight 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 due to anchor positioning.
The perfect clarification I may discover comes straight 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 desired quantities. The ensuing rectangle is known as the inset-modified containing block.
So if we inset a fully positioned component’s (with high, left, backside, proper, and so forth.), its containing block shrinks by the values on every property.
.absolute {
place: absolute;
high: 80px;
proper: 120px;
backside: 180px;
left: 90px;
}For this instance, the component’s containing block is the complete viewport, whereas its inset modified containing block is 80px away from the highest, 120px away from the correct, 180px away from the underside, and 90px away from the left.
Realizing how the IMCB works isn’t a high precedence for studying CSS, however if you wish to perceive anchor positioning to its fullest, it’s a must-know idea. As an 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 might be damaged down right into a grid divided by 4 imaginary traces:
- The beginning of the goal’s containing block.
- The beginning of the anchor component or
anchor(begin). - The tip of the anchor component or
anchor(finish). - 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’ve two components…
<div class="anchor">Anchor</div>
<div class="goal">Goal</div>…connected 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 component utilizing the position-area property:
.goal {
place: absolute;
position-anchor: --my-anchor;
position-area: high 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 possibly can see it by setting each goal’s dimensions to 100%:
The position-try-order additionally makes use of the IMCB dimensions to resolve tips on how to order the fallbacks declared within the position-try-fallbacks property. It checks which one of many fallbacks gives the IMCB with the biggest accessible 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 device by Una Kravets on https://chrome.dev/anchor-tool/.
Specification vs. implementation
The spec was my finest pal whereas I researched anchor positioning. Nonetheless, concept can solely take you up to now, and taking part in with a brand new characteristic is the enjoyable a part of understanding the way it works. Within the case of anchor positioning, some issues have been written within the spec however didn’t really work in browsers (Chromium-based browsers on the time). After staring mindlessly at my display, I discovered the problem was because of one thing so easy I didn’t even contemplate it: the browser and the spec didn’t match.
Anchor positioning is completely different from many different options in how briskly it shipped to browsers. The primary 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 applied (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 current drafts. Bear in mind, as soon as one thing is offered in browsers, it’s laborious to vary or take away it. Within the case of anchor positioning, browsers shipped sure properties and features early on that have been in the end modified earlier than the spec had absolutely settled right into a Candidate Suggestion.
It’s a bit complicated, however as of Chrome 129+, that is the stuff that Chrome shipped that required adjustments:
position-area
The inset-area property was renamed to position-area (#10209), however will probably be supported till Chrome 131.
.goal {
/* from */
inset-area: high proper;
/* to */
position-area: high 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 operate 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(high left);
/* to */
position-try-fallbacks: high 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 anchor positioning. For instance, the spec says that if a component doesn’t have a default anchor component, then the position-area property does nothing. This can be a identified subject (#10500) but it surely’s nonetheless potential to duplicate, so please, simply don’t do it.
The next code…
.container {
place: relative;
}
.component {
place: absolute;
position-area: heart;
margin: auto;
}…facilities the .component 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 component is off-screen, you sometimes need its goal to be hidden as properly. The spec says the default is anchors-visible, however browsers go together with at all times as a substitute.
Chrome presently isn’t reflecting the spec. It certainly is utilizing
at all timesbecause 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 normally need it to cover (#10425).
Anchor positioning accessibility
Whereas anchor positioning’s most simple use case is for stuff like tooltips, infoboxes, and popovers, it may be used for lots of different stuff as properly. Examine this instance by Silvestar Bistrović, for instance, the place he connects components with traces. 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 the hours of darkness about tips on how to interpret two seemingly unrelated components.
If we’re aiming to hyperlink a tooltip to a different component, 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 make the most of to create extra compelling visuals.
In a basic manner, the spec describes an strategy to create this relationship utilizing ARIA attributes such because the aria-details or aria-describedby, alongside the position attribute on the goal component.
So, whereas we may 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: high;
}…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 could simply be higher if may pull it off with out ARIA.
Conclusion
Being confused by a brand new characteristic 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 lots of extra complicated issues coming for us to find and study!
