One Of These “Onboarding” UIs, With Anchor Positioning

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

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

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

CSS Anchor Positioning introduction

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

Essentially the most hand-wavy solution to clarify the advantages of anchor positioning is to consider it as a strong enhancement to place: absolute; because it helps absolutely-positioned parts 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 realize it’s contemporary. 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 stated, the thoughtful people over at Oddbird have a polyfill accessible that’ll assist out different browsers till they ship assist.

Oddbird contributes polyfills for many new CSS options and also you (sure, you!) can assist 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 total convention speak is offered on YouTube:

Right here at CSS-Methods, Juan demonstrated easy methods to combine and match anchor positioning with view-driven animations for an superior floating notes impact:

Entrance-end pal Kevin Powell not too long ago launched a video demonstrating how “CSS Popover + Anchor Positioning is Magical”.

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

The homework

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

Let’s take a fast take a look at the fundamental syntax. First, we want two parts, an anchor-positioned ingredient and the goal ingredient that can be tethered to it.

<!-- Anchor ingredient -->
<div id="anchor">
  Anchor
</div>

<!-- Goal ingredient -->
<div id="goal">
  Goal
</div>

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

#anchor {
  anchor-name: --anchor;
}

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

#anchor {
  anchor-name: --anchor;
}

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

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

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

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

Anchoring pseudo-elements

Whereas taking part in with anchor positioning, I seen you possibly can anchor pseudo-elements, simply the identical as every other ingredient.

#anchor {
  anchor-name: --anchor;

  &::earlier than {
    content material: "Goal";
    place: absolute;
    position-anchor: --anchor;
    left: anchor(heart);
    backside: anchor(heart);
  }
}

Could be helpful for including design prospers to parts or including performance as some type of indicator.

Transferring anchors

One other fast experiment was to see if we are able to transfer anchors. And it seems that is doable!

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

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

CSS anchor capabilities are an alternate solution to place goal parts based mostly on the computed values of the anchor-positioned ingredient itself. Right here we’re setting the goal ingredient’s high property worth to match the anchor-positioned ingredient’s backside worth. Equally, we are able to set the goal’s left property worth to match the anchor-positioned ingredient’s left worth.

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

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

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

Together with being the primary to launch CSS anchor-positioning, the Chrome dev crew not too long ago launched new pseudo-selectors associated to the <particulars> and <abstract> parts. The ::details-content pseudo-selector permits you to fashion the “hidden” a part of the <particulars> ingredient.

With this data, I assumed: “can I anchor it?” and positive sufficient, you possibly can!

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

Sensible examinations

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

Tooltips

One of the easy use circumstances for CSS anchor positioning is probably a tooltip. Makes quite a lot 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 yet one more tutorial on easy methods to make a tooltip and fortuitously for me, Zell Liew not too long ago wrote an article on tooltip greatest practices, so we are able to focus purely on anchor positioning and consult with Zell’s work for the semantics.

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

<!-- ... -->;
<li class="toolbar-item">;
  <button sort="button" 
    id="inbox-tool" 
    aria-labelledby="inbox-label" 
    class="software">
    <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 ingredient 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 grow to be a tooltip with the [role="tooltip"] attribute. We will additionally use [role="tooltip"] as a semantic selector so as to add widespread types to tooltips, together with the tooltip’s positioning relative to its anchor.

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

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

/* Goal ingredient */
[role="tooltip"]#inbox-label {
  position-anchor: --inbox-tool
}

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

/* Seen when software is hovered or receives focus */
.software:hover + [role="tooltip"],
.software: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 in a position to hover over parts, you could wish to discover toggletips as an alternative!

Floating disclosures

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

Presently, if you’re seeking to create a disclosure-like element which floats over different parts of your person interface, you is likely to be 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 easy (and semantically correct) floating disclosure parts.

The Popover API offers a non-modal solution to elevate parts to the top-layer, whereas additionally baking in some nice performance, resembling gentle dismissals.

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

One of many extra widespread patterns you may take into account 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 ingredient, on this case the <ul>, to be our popover ingredient by including the [popover] attribute.

To manage 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 ingredient.

<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 important, and now we’ve a toggle-able [popover] disclosure ingredient! The issue is that it’s nonetheless not tethered to the anchor-positioned ingredient, 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 ingredient by offering it with an anchor-name:

ul[popover] {
  margin: 0;
}

#anchor {
  anchor-name: --toggle;
}

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

ul[popover] {
  margin: 0;
}

#anchor {
  anchor-name: --toggle;
}

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

We will additionally modify the goal’s positioning close to the anchor-positioned ingredient 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 might 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 ingredient by utilizing anchor-size(width).

There may be another neat factor we are able to apply right here, fallback positioning! Let’s take into account that perhaps this dropdown menu may typically 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 person.

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

#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 are able to add the alternative worth of the worth of the postion-area property: high.

Purchasing cart element

We all know easy methods to make a tooltip and a disclosure ingredient, now let’s construct upon what we’ve realized to this point and create a neat, interactive procuring cart element.

Let’s take into consideration how we wish to mark this up. First, we’ll want a button with a procuring 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 types to offer a functioning label for this toggle. Let’s add the category .software to the button, then embrace a tooltip as our label.

<!-- Toggle -->
<button id="shopping-cart-toggle" 
        aria-labelledby="shopping-cart-label"
        class="software">
  <svg id="shopping-cart-icon" />
    <!-- SVG icon code ... -->
  </svg>
</button>

<!-- Tooltip -->
<div id="shopping-cart-label" 
     function="tooltip" 
     class="tooltip">
  <p>Purchasing Cart</p>
</div>

We’ll must specify our <button> is an anchor-positioned ingredient in CSS with an anchor-name, which we are able to 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 must always have a nice-looking tooltip labeling our procuring cart button!

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

<!-- Toggle -->
<button id="shopping-cart-toggle" 
	aria-labelledby="shopping-cart-label"
	class="software"
	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>Purchasing Cart</p>
</div>
<!-- Purchasing Cart -->
<dialog id="shopping-cart" popover>
  <!-- Purchasing cart template... -->
  <button popovertarget="shopping-cart" popoveraction="shut">
    Dismiss Cart
  </button>
</dialog>

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

To anchor the procuring cart <dialog> to the toggle, we are able to set position-anchor and position-area:

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

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

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

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

<!-- Toggle -->
<button id="shopping-cart-toggle" 
	aria-labelledby="shopping-cart-label"
	class="software"
	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>Purchasing Cart</p>
  <p>(1 merchandise in cart)</p>
</div>

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

Let’s tether this notification badge to the identical anchor as our tooltip and procuring cart <dialog>, we are able to 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 take a look at positioning. We don’t need it beneath or subsequent to the anchor, we wish it overlapping, so we are able to use CSS anchor capabilities to place it based mostly on the anchor-positioned ingredient’s dimensions.

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

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

People, this implies we’ve three parts anchored now. Isn’t that implausible?

Combining issues

To place these anchor-positioned parts into perspective, I’ve mixed all of the strategies we’ve realized to this point right into a extra acquainted setting:

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

Last challenge

As a remaining challenge for myself (and to convey this complete factor round full-circle), I made a decision to attempt to construct a CSS anchor-positioned-based onboarding software. I’ve beforehand tried to construct a software like this at work, which I referred to as “HandHoldJS” and it… properly, it didn’t go so nice. I managed to have quite a lot of the core performance working utilizing JavaScript, however it meant maintaining observe of various positions and plenty of bizarre issues stored taking place!

Let’s see if we are able to do higher with CSS anchor positioning.

Be at liberty 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 ingredient that works solely within the gentle DOM. It type of falls into the class of an HTML net element, as it’s largely based mostly on enabling its inside HTML. You’ll be able to specify tour stops to any ingredient 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> ingredient accommodates a <button> to begin the tour, a <dialog> ingredient to comprise the tour data, <part> parts to separate content material between tour stops, a fieldset[data-handhold-navigation] ingredient which holds navigation radio buttons, in addition to one other <button> to finish the tour.

Every <part> ingredient 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 parts, which the <dialog> can connect itself (there’s a sneaky pseudo-element hooked up to the anchor to focus on the tour cease ingredient!).

Though the <dialog> ingredient is hooked up through CSS anchor positioning, it additionally strikes throughout the DOM to seem subsequent to the anchor-position ingredient 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 ingredient the dialog is referring to. Consider me, although, this factor is removed from good as an accessible person expertise.

Additionally, for the reason that <dialog> strikes all through the DOM, sadly, a easy CSS transition wouldn’t suffice. One other fashionable browser function to the rescue but once more, as we are able to cross 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 assist is fairly restricted in the meanwhile!

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 could change quite a lot of the methods we write CSS, just like the introduction of flexbox or grid.

I’m excited to see what different person interface patterns might be achieved with anchor positioning, and I’m much more excited to see what the neighborhood will do with it as soon as it’s extra broadly accessible!