One of Those 'Onboarding' UIs, With Anchor Positioning

Dive into the fascinating world of CSS anchor positioning! This tutorial explores this innovative CSS feature, using Juan Diego Rodriguez's comprehensive "Anchor Positioning Guide" (available on CSS-Tricks) as our reference.

This is an exciting development. Many will recall the impact of CSS-Tricks' "Flexbox Layout Guide" and "Grid Layout Guide"— invaluable resources I still use regularly! I often juggle multiple tabs to ensure correct syntax in my CodePen experiments.

Since Juan's guide, I've been experimenting with CSS anchor positioning, and I'm eager to share my findings, learn more, experiment further, and, of course, build things!

Introducing CSS Anchor Positioning

Anchor positioning allows us to connect—or "anchor"—one element to one or more others. Crucially, it defines how a "target" element (the element attached to an anchor) is positioned relative to the anchor, including fallback positioning via the @position-try at-rule.

Simply put, anchor positioning significantly enhances position: absolute;, helping absolutely-positioned elements behave predictably. We'll explore this in detail.

Currently a W3C draft spec, anchor positioning is relatively new. It's marked "limited availability" in Baseline, meaning it's primarily supported by Chromium-based browsers (version 125 ). However, Oddbird provides a helpful polyfill for broader browser compatibility.

Browser support details are available on caniuse.com. A number indicates the version where support begins.

Desktop Browser Support

Mobile/Tablet Browser Support

Oddbird creates polyfills for many new CSS features. Support their work on GitHub or Open Collective!

Tab Atkins-Bittner, a contributor to the W3C spec, presented anchor positioning at CSS Day 2024 (video available on YouTube). Juan demonstrated its use with view-driven animations for a floating notes effect on CSS-Tricks. Kevin Powell showcased "CSS Popover Anchor Positioning" in a recent video, and Thomas Park created Anchoreum (a Flexbox Froggy-style game) to teach anchor positioning.

The Assignment

Now that we understand CSS anchor positioning, let's explore its functionality. Tethering elements offers immense potential, solving many issues previously tackled with complex absolute positioning and z-index adjustments.

Let's examine the basic syntax. We need two elements: an anchor-positioned element and its tethered target.

<div>
  Anchor
</div>
<div>
  Target
</div>

We designate an anchor-positioned element using anchor-name, a unique name (prefixed with double dashes, like CSS custom properties).

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

The target element requires position: absolute; and position-anchor (matching the anchor's anchor-name).

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

These elements are now linked. position-area creates an invisible 3x3 grid over the anchor element, allowing precise target placement.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

The target is now anchored to the top-center of the anchor element!

Anchoring Pseudo-elements

Pseudo-elements can be anchored like regular elements:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;

  &::before {
    content: "Target";
    position: absolute;
    position-anchor: --anchor;
    left: anchor(center);
    bottom: anchor(center);
  }
}

This is useful for adding visual enhancements or indicators.

Moving Anchors

Anchors can be repositioned using anchor() functions instead of position-area.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor-one;
  top: anchor(bottom);
  left: anchor(left);
}

anchor() functions use the anchor element's computed values. Here, the target's top matches the anchor's bottom. Hovering changes position-anchor and smooth transitions are possible.

Advanced Experiments

The Chrome team released new pseudo-selectors for <details></details> and <summary></summary> elements (:details-content). These can also be anchored. This is experimental but demonstrates the potential.

Practical Applications

Let's explore practical uses of CSS anchor positioning (currently Chrome-only).

Tooltips

Tooltips are a natural fit. Hovering over an icon displays a nearby label. Zell Liew's article on tooltip best practices provides semantic guidance.

<button id="inbox-tool" class="tool" aria-labelledby="inbox-label">
  <svg></svg>
</button>
<div id="inbox-label" role="tooltip">Inbox</div>

The tooltip is a sibling of the anchor element (aria-labelledby links them). CSS handles positioning and visibility.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15binbox-tool {
  anchor-name: --inbox-tool;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15binbox-label {
  position: absolute;
  position-anchor: --inbox-tool;
  position-area: end center;
  visibility: hidden;
}

.tool:hover + [role="tooltip"],
.tool:focus-visible + [role="tooltip"] {
  visibility: visible;
}

A working CSS-anchored tooltip! Consider toggletips for touch devices.

Floating Disclosures

Disclosures (like

/<summary></summary>

) benefit from anchor positioning, particularly for floating elements. The Popover API provides a non-modal, top-layer solution with features like light dismissals. Zell Liew offers further information on popovers, dialogs, and modality.

A dropdown menu example:

<div>
  Anchor
</div>
<div>
  Target
</div>

CSS handles anchoring and fallback positioning:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

Shopping Cart Component

Combining previous techniques, we can create a shopping cart component:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

CSS anchors the tooltip, shopping cart dialog, and badge:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

Three elements anchored to a single anchor!

Combining Techniques

This section showcases the combined use of tooltips, disclosures, and badges, demonstrating the power of anchor positioning.

Final Project: Onboarding Tool

As a final project, I built a CSS anchor-positioned onboarding tool (CodePen available). This avoids the complexities of my previous JavaScript-based attempt ("HandHoldJS").

A custom element <hand-hold></hand-hold> uses data-tour-stop attributes to define tour steps. JavaScript dynamically updates anchor positions, and a View Transition ensures smooth transitions. This project is experimental and not production-ready due to limited browser support.

Conclusion

CSS anchor positioning has the potential to revolutionize CSS development, similar to flexbox and grid. Its applications are vast, and I'm excited to see future innovations from the community.

The above is the detailed content of One of Those 'Onboarding' UIs, With Anchor Positioning. For more information, please follow other related articles on the PHP Chinese website!