One in every of These “Onboarding” UIs, With Anchor Positioning

Welcome to “Anchor Positioning 101” the place we might be exploring this fascinating new CSS function. Our textbook for this class would be the intensive “Anchor Positioning Information” that Juan Diego Rodriguez printed right here on CSS-Tips.

I’m excited for this one. A few of you could keep in mind when CSS-Tips launched the “Flexbox Format Information” or the “Grid Format Information” — I actually do and nonetheless have them each bookmarked! I spend loads of time flipping between tabs to verify I’ve the best syntax in my “experimental” CodePens.

I’ve been experimenting with CSS anchor positioning just like the “good outdated days” since Juan printed his information, so I figured it’d be enjoyable to share among the pleasure, study a bit, experiment, and naturally: construct stuff!

CSS Anchor Positioning introduction

Anchor positioning lets us connect — or “anchor” — one factor to a number of different components. Greater than that, it permits us to outline how a “goal” factor (that’s what we name the factor we’re attaching to an anchor factor) is positioned subsequent to the anchor-positioned factor, together with fallback positioning within the type of a brand new @position-try at-rule.

Probably the most hand-wavy approach to clarify the advantages of anchor positioning is to consider it as a strong enhancement to place: absolute; because it helps absolutely-positioned components do what you count on. Don’t fear, we’ll see how this works as we go.

Anchor positioning is at present a W3C draft spec, so you understand it’s recent. It’s marked as “restricted availability” in Baseline which on the time of writing means it’s restricted to Chromium-based browsers (variations 125+). That mentioned, the thoughtful people over at Oddbird have a polyfill obtainable that’ll assist out different browsers till they ship help.

Oddbird contributes polyfills for many new CSS options and also you (sure, you!) can help their work on Github or Open Collective!

Tab Atkins-Bittner, contributing creator to the W3C draft spec on anchor positioning, spoke on the subject at CSS Day 2024. The complete convention discuss is offered on YouTube:

Right here at CSS-Tips, Juan demonstrated tips on how to combine and match anchor positioning with view-driven animations for an superior floating notes impact:

Entrance-end buddy Kevin Powell just lately launched a video demonstrating how “CSS Popover + Anchor Positioning is Magical”.

And at last, within the custom of “making enjoyable video games to study CSS,” Thomas Park launched Anchoreum (a “Flexbox Froggy“-type sport) to find out about CSS anchor positioning. Extremely suggest checking this out to get the cling of the position-area property!

The homework

OK, now that we’re caught up on what CSS anchor positioning is and the joy surrounding it, let’s discuss what it does. Tethering a component to a different factor? That has a lot of potential. Fairly a couple of cases I can keep in mind the place I’ve needed to battle with absolute positioning and z-index so as to get one thing positioned good.

Let’s take a fast have a look at the essential syntax. First, we want two components, an anchor-positioned factor and the goal factor that might be tethered to it.

<!– Anchor factor –>
<div id=”anchor”>
Anchor
</div>

<!– Goal factor –>
<div id=”goal”>
Goal
</div>

We set a component as an anchor-positioned factor by offering it with an anchor-name. This can be a distinctive identify of our selecting, nonetheless it wants the double-dash prefix, like CSS customized properties.

#anchor {
anchor-name: –anchor;
}

As for our goal factor, we’ll must set place: absolute; on it in addition to inform the factor what anchor to tether to. We try this with a brand new CSS property, position-anchor utilizing a price that matches the anchor-name of our anchor-positioned factor.

#anchor {
anchor-name: –anchor;
}

#goal {
place: absolute;
position-anchor: –anchor;
}

Might not appear like it but, however now our two components are hooked up. We will set the precise positioning on the goal factor by offering a position-area. To place our goal factor, position-area creates an invisible 3×3 grid over the anchor-positioned factor. Utilizing positioning key phrases, we will designate the place the goal factor seems close to the anchor-positioned factor.

#goal {
place: absolute;
position-anchor: –anchor;
position-area: high middle;
}

Now we see that our goal factor is anchored to the top-center of our anchor-positioned factor!

Anchoring pseudo-elements

Whereas enjoying with anchor positioning, I seen you’ll be able to anchor pseudo-elements, simply the identical as every other factor.

#anchor {
anchor-name: –anchor;

&::earlier than {
content material: “Goal”;
place: absolute;
position-anchor: –anchor;
left: anchor(middle);
backside: anchor(middle);
}
}

May be helpful for including design prospers to components or including performance as some kind of indicator.

Transferring anchors

One other fast experiment was to see if we will transfer anchors. And it seems that is potential!

Discover using anchor() capabilities as an alternative of position-area to place the goal factor.

#goal {
place: absolute;
position-anchor: –anchor-one;
high: anchor(backside);
left: anchor(left);
}

CSS anchor capabilities are an alternate approach to place goal components primarily based on the computed values of the anchor-positioned factor itself. Right here we’re setting the goal factor’s high property worth to match the anchor-positioned factor’s backside worth. Equally, we will set the goal’s left property worth to match the anchor-positioned factor’s left worth.

Hovering over the container factor swaps the position-anchor from –anchor-one to –anchor-two.

.container:hover {
#goal {
position-anchor: –anchor-two;
}
}

We’re additionally capable of set a transition as we place the goal utilizing high and left, which makes it swap easily between anchors.

Further experimental

Together with being the primary to launch CSS anchor-positioning, the Chrome dev workforce just lately launched new pseudo-selectors associated to the <particulars> and <abstract> components. The ::details-content pseudo-selector permits you to fashion the “hidden” a part of the <particulars> factor.

With this data, I assumed: “can I anchor it?” and certain sufficient, you’ll be able to!

Once more, that is definitely not prepared for prime-time, however it’s at all times enjoyable to experiment!

Sensible examinations

Let’s take this a bit additional and sort out extra sensible challenges utilizing CSS anchor positioning. Please take into account that all these examples are Chrome-only on the time of writing!

Tooltips

One of the simple use circumstances for CSS anchor positioning is presumably a tooltip. Makes loads of sense: hover over an icon and a label floats close by to clarify what the icon does. I didn’t fairly wish to make one more tutorial on tips on how to make a tooltip and fortunately for me, Zell Liew just lately wrote an article on tooltip greatest practices, so we will focus purely on anchor positioning and discuss with Zell’s work for the semantics.

Now, let’s take a look at one in every of these tooltips:

<!– … –>;
<li class=”toolbar-item”>;
<button kind=”button”
id=”inbox-tool”
aria-labelledby=”inbox-label”
class=”instrument”>
<svg id=”inbox-tool-icon”>
<!– SVG icon code … –>
</svg>
</button>

<div id=”inbox-label” function=”tooltip”>
<p>Inbox</p>
</div>
</li>
<!– … –>

The HTML is structured in a approach the place the tooltip factor is a sibling of our anchor-positioned <button>, discover the way it has the [aria-labelledby] attribute set to match the tooltip’s [id]. The tooltip itself is a generic <div>, semantically enhanced to turn into a tooltip with the [role=”tooltip”] attribute. We will additionally use [role=”tooltip”] as a semantic selector so as to add widespread kinds to tooltips, together with the tooltip’s positioning relative to its anchor.

First, let’s flip our button into an anchored factor by giving it an anchor-name. Subsequent, we will set the goal factor’s position-anchor to match the anchor-name of the anchored factor. By default, we will set the tooltip’s visibility to hidden, then utilizing CSS sibling selectors, if the goal factor receives hover or focus-visible, we will then swap the visibility to seen.

/* Anchor-positioned Ingredient */
#inbox-tool {
anchor-name: –inbox-tool;
}

/* Goal factor */
[role=”tooltip”]#inbox-label {
position-anchor: –inbox-tool
}

/* Goal positioning */
[role=”tooltip”] {
place: absolute;
position-area: finish middle;
/* Hidden by default */
visibility: hidden;
}

/* Seen when instrument is hovered or receives focus */
.instrument:hover + [role=”tooltip”],
.instrument:focus-visible + [role=”tooltip”] {
visibility: seen;
}

Ta-da! Right here we’ve a working, CSS anchor-positioned tooltip!

As customers of contact gadgets aren’t capable of hover over components, you could wish to discover toggletips as an alternative!

Floating disclosures

Disclosures are one other widespread element sample that is perhaps an ideal use case for anchor positioning. Disclosures are sometimes a element the place interacting with a toggle will open and shut a corresponding factor. Consider the nice ol’ <element>/<abstract> HTML factor duo, for instance.

Presently, if you’re trying to create a disclosure-like element which floats over different parts of your consumer interface, you is perhaps in for some JavaScript, absolute positioning, and z-index associated troubles. Quickly sufficient although, we’ll have the ability to mix CSS anchor positioning with one other newer platform function [popover] to create some extremely simple (and semantically correct) floating disclosure components.

The Popover API gives a non-modal approach to elevate components to the top-layer, whereas additionally baking in some nice performance, resembling mild dismissals.

Zell additionally has extra data on popovers, dialogs, and modality!

One of many extra widespread patterns you may think about as a “floating disclosure”-type element is a dropdown menu. Right here is the HTML we’ll work with:

<nav>
<button id=”anchor”>Toggle</button>
<ul id=”goal”>
<li><a href=”#”>Hyperlink 1</a></li>
<li><a href=”#”>Hyperlink 2</a></li>
<li><a href=”#”>Hyperlink 3</a></li>
</ul>
</nav>

We will set our goal factor, on this case the <ul>, to be our popover factor by including the [popover] attribute.

To regulate the popover, let’s add the attribute [popoveraction=”toggle”] to allow the button as a toggle, and level the [popovertarget] attribute to the [id] of our goal factor.

<nav>
<button id=”anchor”
popoveraction=”toggle”
popovertarget=”goal”>
Toggle
</button>

<ul id=”goal” popover>
<li><a href=”#”>Hyperlink 1</a></li>
<li><a href=”#”>Hyperlink 2</a></li>
<li><a href=”#”>Hyperlink 3</a></li>
</ul>
</nav>

No JavaScript is critical, and now we’ve a toggle-able [popover] disclosure factor! The issue is that it’s nonetheless not tethered to the anchor-positioned factor, let’s repair that in our CSS.

First, as this can be a popover, let’s add a small little bit of styling to take away the intrinsic margin popovers obtain by default from browsers.

ul[popover] {
margin: 0;
}

Let’s flip our button into an anchor-positioned factor by offering it with an anchor-name:

ul[popover] {
margin: 0;
}

#anchor {
anchor-name: –toggle;
}

As for our goal factor, we will connect it to the anchor-positioned factor by setting its place to absolute and the position-anchor to our anchor-positioned factor’s anchor-name:

ul[popover] {
margin: 0;
}

#anchor {
anchor-name: –toggle;
}

#goal {
place: absolute;
position-anchor: –toggle;
}

We will additionally alter the goal’s positioning close to the anchor-positioned factor with the position-area property, just like what we did with our tooltip.

ul[popover] {
margin: 0;
}

#anchor {
anchor-name: –toggle;
}

#goal {
place: absolute;
position-anchor: –toggle;
position-area: backside;
width: anchor-size(width);
}

You could discover one other CSS anchor perform in right here, anchor-size()! We will set the goal’s width to match the width of the anchor-positioned factor through the use of anchor-size(width).

There may be yet one more neat factor we will apply right here, fallback positioning! Let’s think about that perhaps this dropdown menu may generally be situated on the backside of the viewport, both from scrolling or another cause. We don’t actually need it to overflow or trigger any additional scrolling, however as an alternative, swap to an alternate location that’s seen to the consumer.

Anchor positioning makes this potential with the postion-try-fallbacks property, a approach to supply an alternate location for the goal factor to show close to an anchor-positioned factor.

#goal {
place: absolute;
position-anchor: –toggle;
position-area: backside;
postion-try-fallbacks: high;
width: anchor-size(width);
}

To maintain issues easy for our demo, we will add the alternative worth of the worth of the postion-area property: high.

Buying cart element

We all know tips on how to make a tooltip and a disclosure factor, now let’s construct upon what we’ve realized to date and create a neat, interactive buying cart element.

Let’s take into consideration how we wish to mark this up. First, we’ll want a button with a buying cart icon:

<button id=”shopping-cart-toggle”>
<svg id=”shopping-cart-icon” />
<!– SVG icon code … –>
</svg>
</button>

We will already reuse what we realized with our tooltip kinds to supply a functioning label for this toggle. Let’s add the category .instrument to the button, then embrace a tooltip as our label.

<!– Toggle –>
<button id=”shopping-cart-toggle”
aria-labelledby=”shopping-cart-label”
class=”instrument”>
<svg id=”shopping-cart-icon” />
<!– SVG icon code … –>
</svg>
</button>

<!– Tooltip –>
<div id=”shopping-cart-label”
function=”tooltip”
class=”tooltip”>
<p>Buying Cart</p>
</div>

We’ll must specify our <button> is an anchor-positioned factor in CSS with an anchor-name, which we will additionally set because the tooltip’s position-anchor worth to match.

button#shopping-cart-toggle {
anchor-name: –shopping-cart-toggle;
}

[role=”tooltip”]#shopping-cart-label {
position-anchor: –shopping-cart-toggle;
}

Now we should always have a nice-looking tooltip labeling our buying cart button!

However wait, we wish this factor to do greater than that! Let’s flip it right into a disclosure element that reveals an inventory of things contained in the consumer’s cart. As we wish to have a floating user-interface with a couple of actions included, we should always think about a <dialog> factor. Nevertheless, we don’t essentially wish to be blocking background content material, so we will go for a non-modal dialog utilizing the[popover] attribute once more!

<!– Toggle –>
<button id=”shopping-cart-toggle”
aria-labelledby=”shopping-cart-label”
class=”instrument”
popovertarget=”shopping-cart”
popoveraction=”toggle”>
<svg id=”shopping-cart-icon” />
<!– SVG icon code … –>
</svg>
</button>
<!– Tooltip –>
<div id=”shopping-cart-label”
function=”tooltip”
class=”tooltip”>
<p>Buying Cart</p>
</div>
<!– Buying Cart –>
<dialog id=”shopping-cart” popover>
<!– Buying cart template… –>
<button popovertarget=”shopping-cart” popoveraction=”shut”>
Dismiss Cart
</button>
</dialog>

To regulate the popover, we’ve added [popovertarget=”shopping-cart”] and [popoveraction=”toggle”] to our anchor-positioned factor and included a second button throughout the <dialog> that may also be used to shut the dialog with [popoveraction=”close”].

To anchor the buying cart <dialog> to the toggle, we will set position-anchor and position-area:

#shopping-cart {
position-anchor: –shopping-cart;
position-area: finish middle;
}

At this level, we should always take a second to appreciate that we’ve tethered two components to the identical anchor!

We received’t cease there, although. There may be yet one more enhancement we will make to actually present how useful anchor positioning may be: Let’s add a notification badge to the factor to explain what number of objects are contained in the cart.

Let’s place the badge inside of our anchor-positioned factor this time.

<!– Toggle –>
<button id=”shopping-cart-toggle”
aria-labelledby=”shopping-cart-label”
class=”instrument”
popovertarget=”shopping-cart”
popoveraction=”toggle”>

<svg id=”shopping-cart-icon” />
<!– SVG icon code … –>
</svg>

<!– Notification Badge –>
<div id=”shopping-cart-badge” class=”notification-badge”>
1
</div>
</button>
<!– … –>

We will enhance our tooltip to incorporate verbiage about what number of objects are within the cart:

<!– Tooltip –>
<div id=”shopping-cart-label”
function=”tooltip”>
<p>Buying Cart</p>
<p>(1 merchandise in cart)</p>
</div>

Now the accessible identify of our anchor-positioned factor might be learn as Buying Cart (1 merchandise in cart), which helps present context to assistive applied sciences like display readers.

Let’s tether this notification badge to the identical anchor as our tooltip and buying cart <dialog>, we will do that by setting the position-anchor property of the badge to –shopping-cart-toggle:

#shopping-cart-badge {
place: absolute;
position-anchor: –shopping-cart-toggle;
}

Let’s have a look at positioning. We don’t need it under or subsequent to the anchor, we wish it overlapping, so we will use CSS anchor capabilities to place it primarily based on the anchor-positioned factor’s dimensions.

#shopping-cart-badge {
place: absolute;
position-anchor: –shopping-cart-toggle;
backside: anchor(middle);
left: anchor(middle);
}

Right here we’re setting the underside and left of the goal factor to match the anchor’s middle. This locations it within the upper-right nook of the SVG icon!

People, this implies we’ve three components anchored now. Isn’t that unbelievable?

Combining issues

To place these anchor-positioned components into perspective, I’ve mixed all of the methods we’ve realized to date right into a extra acquainted setting:

Disclosure parts, dropdown menus, tooltips (and toggletips!), in addition to notification badges all made a lot less complicated utilizing CSS anchor positioning!

Remaining challenge

As a closing challenge for myself (and to deliver this entire factor round full-circle), I made a decision to attempt to construct a CSS anchor-positioned-based onboarding instrument. I’ve beforehand tried to construct a instrument like this at work, which I referred to as “HandHoldJS” and it… properly, it didn’t go so nice. I managed to have loads of the core performance working utilizing JavaScript, however it meant preserving observe of various positions and many bizarre issues saved occurring!

Let’s see if we will do higher with CSS anchor positioning.

Be happy to take a look at the code on CodePen! I went down fairly a rabbit gap on this one, so I’ll present a little bit of a high-level overview right here.

<hand-hold> is a local customized factor that works fully within the mild DOM. It kind of falls into the class of an HTML net element, as it’s principally primarily based on enabling its interior HTML. You may specify tour stops to any factor on the web page by including [data-tour-stop] attributes with values within the order you need the tour to happen.

Contained in the <hand-hold> factor comprises a <button> to begin the tour, a <dialog> factor to include the tour data, <part> components to separate content material between tour stops, a fieldset[data-handhold-navigation] factor which holds navigation radio buttons, in addition to one other <button> to finish the tour.

Every <part> factor corresponds to a tour cease with an identical [data-handhold-content] attribute utilized. Utilizing JavaScript, <hand-hold> dynamically updates tour stops to be anchor-positioned components, which the <dialog> can connect itself (there’s a sneaky pseudo-element hooked up to the anchor to spotlight the tour cease factor!).

Though the <dialog> factor is hooked up through CSS anchor positioning, it additionally strikes throughout the DOM to seem subsequent to the anchor-position factor within the accessibility tree. The (well-meaning) intention right here is to assist present extra context to those that could also be navigating through assistive gadgets by determining which factor the dialog is referring to. Consider me, although, this factor is removed from excellent as an accessible consumer expertise.

Additionally, for the reason that <dialog> strikes all through the DOM, sadly, a easy CSS transition wouldn’t suffice. One other trendy browser function to the rescue but once more, as we will go a DOM manipulation perform right into a View Transition, making the transitions really feel smoother!

There may be nonetheless quite a bit to check with this, so I’d not suggest utilizing <hand-hold> in a manufacturing setting. If for no different cause than browser help is fairly restricted in the mean time!

That is simply an experiment to see what I might cook dinner up utilizing CSS anchor positioning, I’m excited for the potential!

Class dismissed!

After seeing what CSS anchor positioning is able to, I’ve suspicions that it might change loads of the methods we write CSS, just like the introduction of flexbox or grid.

I’m excited to see what different consumer interface patterns may be achieved with anchor positioning, and I’m much more excited to see what the group will do with it as soon as it’s extra broadly obtainable!

One in every of These “Onboarding” UIs, With Anchor Positioning initially printed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the e-newsletter.