CSS Anchor-Name Enhancing Web Layouts with Anchors

Introduction

The anchor-name CSS property is a powerful tool for web developers, allowing you to define an element as an anchor by assigning it one or more anchor names. These names can be used later with the position-anchor property to link and position other elements relative to the anchor. This feature is part of the CSS Anchor Positioning module, which aims to make complex layouts easier to manage.

Although not yet widely supported in all browsers, anchor-name opens up exciting possibilities for creating dynamic and responsive web designs. By using this property, you can create layouts that adapt based on the position of key elements, enhancing the user experience.

In this article, we’ll explore the syntax, values, and usage of the anchor-name property, provide examples, and discuss browser compatibility. We’ll also look at related properties and resources to help you make the most of this powerful CSS feature.

Specification

The anchor-name CSS property is defined in the CSS Anchor Positioning Module Level 1 specification, a Working Draft from the World Wide Web Consortium (W3C). This specification outlines how anchor positioning properties like anchor-name work.

The anchor-name property is designed to work with other anchor positioning properties like position-anchor and position-area. By defining an element as an anchor, you can create complex layouts where elements are positioned relative to each other, rather than the document flow.

This specification is currently in the Working Draft stage, meaning it is still under development and subject to change. It’s important to check the latest documentation and browser compatibility tables before using these features in production.

Syntax and Values

The anchor-name CSS property is used to define an element as an anchor by assigning it one or more identifying anchor names. The syntax is straightforward:

anchor-name: none | <dashed-ident>#;

Explanation of Syntax

• none: The default value. Setting anchor-name: none means the element is not defined as an anchor.
• <dashed-ident>: One or more comma-separated custom identifiers that define the anchor name(s). These names can be referenced using the position-anchor property.

Example Usage

/* Single value */
anchor-name: none;
anchor-name: --name;

/* Multiple values */
anchor-name: --name, --another-name;

/* Global values */
anchor-name: inherit;
anchor-name: initial;
anchor-name: revert;
anchor-name: revert-layer;
anchor-name: unset;

Key Points

• The <dashed-ident> values must be prefixed with two dashes (--), similar to CSS custom properties.
• You can assign multiple anchor names to a single element by separating them with commas.
• The property supports global CSS values like inherit, initial, revert, revert-layer, and unset for more flexible styling.

Key Values

1. none

   • Description: The default value. Setting anchor-name: none means the element is not defined as an anchor.
   • Usage:

     anchor-name: none;

2. <dashed-ident>

   • Description: One or more comma-separated arbitrary custom identifiers that define the name or names of the anchor.
   • Usage:

     anchor-name: --name;
     anchor-name: --name, --another-name;

3. Global Values

   • inherit: Inherits the value from the parent element.
   • initial: Sets the property to its initial value (none).
   • revert: Resets the property to its default value as defined by the user agent’s stylesheet.
   • revert-layer: Resets the property to the value established by the originating cascade layer.
   • unset: Resets the property to its natural value, which means it behaves like inherit if the property is inheritable or like initial if not.
   • Usage:

     anchor-name: inherit;
     anchor-name: initial;
     anchor-name: revert;
     anchor-name: revert-layer;
     anchor-name: unset;

Description and How It Works

The anchor-name CSS property is a powerful tool for web developers and designers, allowing them to define an element as an anchor by assigning it one or more identifying anchor names. These names can then be referenced using the position-anchor property to associate and position other elements relative to the anchor.

How It Works

To position an element relative to an anchor element, the positioned element requires three key features: an association, a position, and a location. The anchor-name and position-anchor properties provide the association.

1. Defining Anchors: An element can be defined as an anchor by setting one or more <dashed-ident> anchor names on it via the anchor-name property.
2. Associating Elements: When one of those names is set as the value of the position-anchor property of an element that has its position set to absolute or fixed, the two elements are associated.
3. Positioning Elements: The positioned element can then be tethered to the anchor by setting a location on the associated element relative to the anchor, making it an “anchor-positioned” element.

Multiple Anchors

If multiple anchor elements have the same anchor name, and that name is referenced by the position-anchor property value of a positioned element, the positioned element will be associated with the last anchor element with that anchor name in the source order.

Containing Block Changes

Anchor positioning changes the containing block of anchor-positioned elements, making their position relative to the anchor rather than to the nearest positioned ancestor element.

Positioning Features

To tether and place a positioned element in a specific location relative to an anchor element, you need an anchor positioning feature such as the anchor() function (set within an inset property’s value) or the position-area property.

Limitations

You cannot associate a positioned element with an anchor element if the anchor is hidden (e.g., with display: none or visibility: hidden) or if the anchor is part of the skipped contents of another element due to it having content-visibility: hidden.

Supported Elements

The anchor-name property is supported on all elements that generate a principal box. This includes pseudo-elements (e.g., ::before and ::after) and UI features like the range input thumb (::-webkit-slider-thumb). Pseudo elements are implicitly anchored to the same element as the pseudo-element’s originating element, unless otherwise specified.

Further Resources

For more information on anchor features and usage, see the CSS anchor positioning module landing page and the Using CSS anchor positioning guide.

Examples

Basic Usage

This example shows how to tether a positioned element to an anchor, positioning the element to the right of the anchor.

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox" id="infobox1">
  <p>This is an information box.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

/* Define the anchor element */
.anchor {
  anchor-name: --myAnchor;
}

/* Associate the infobox with the anchor and position it */
.infobox {
  position-anchor: --myAnchor;
  position: fixed;
}

#infobox1 {
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

Result

Scroll the page to see how the infobox is tethered to the anchor.

Multiple Positioned Elements

This example demonstrates how you can associate multiple positioned elements with one anchor.

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox" id="infobox1">
  <p>This is an information box.</p>
</div>

<div class="infobox" id="infobox2">
  <p>This is another information box.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

/* Define the anchor element */
.anchor {
  anchor-name: --myAnchor;
}

/* Associate the infoboxes with the anchor and position them */
.infobox {
  position-anchor: --myAnchor;
  position: fixed;
}

#infobox1 {
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

#infobox2 {
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 15px;
}

Result

Scroll the page to see how both infoboxes are tethered to the anchor.

Multiple Anchor Names

This example demonstrates how an anchor element can have more than one anchor name.

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor">⚓︎</div>

<div class="infobox" id="infobox1">
  <p>This is an information box.</p>
</div>

<div class="infobox" id="infobox2">
  <p>This is another information box.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

/* Define the anchor element with multiple names */
.anchor {
  anchor-name: --myAnchor, --anotherAnchor;
}

/* Associate the infoboxes with different anchors and position them */
#infobox1 {
  position-anchor: --myAnchor;
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

#infobox2 {
  position-anchor: --anotherAnchor;
  position: fixed;
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 15px;
}

Result

Scroll the page to see how both infoboxes are tethered to the anchor with different anchor names.

By understanding these examples, you can effectively use the anchor-name property to create dynamic and responsive layouts in your web projects.

Browser Compatibility

The anchor-name CSS property is a new feature and might not work in all browsers. It’s important to check if it works before using it in your projects.

Compatibility Table

Here’s the current browser support for the anchor-name property:

Notes on Compatibility

• Chrome: Supports anchor-name in the latest versions.
• Firefox: Does not support anchor-name as of the latest updates.
• Safari: Does not support anchor-name.
• Edge: Supports anchor-name in the latest versions.
• Opera: Does not support anchor-name.
• Internet Explorer: Does not support anchor-name.

Checking Compatibility

Before using anchor-name, check the latest browser compatibility tables and documentation. You can also use feature detection libraries or polyfills to make sure it works on more browsers.

Reporting Issues

If you find any problems with anchor-name, you can report them to the browser makers or contribute to the MDN Web Docs to improve the documentation.

See Also

For more information about the anchor-name CSS property, check out these related topics and properties:

Related CSS Properties

• position-anchor: Used with anchor-name to position elements relative to an anchor.
• position-area: Defines the area for positioning elements relative to the anchor.
• position-try-fallbacks: Provides fallback options for positioning.
• position-try-order: Defines the order of fallback positioning options.
• position-visibility: Controls the visibility of positioned elements.
• anchor(): Positions elements relative to specific edges of the anchor.
• anchor-size(): Gets the dimensions of the anchor element.

HTML Attributes

• anchor: Defines an anchor in HTML elements.

CSS Modules

• CSS Anchor Positioning: Overview of anchor positioning features.
• Using CSS Anchor Positioning: Practical examples and tips for using anchor positioning.

Additional Resources

• CSS Anchor Positioning in Practice – Winging It Live: YouTube video on practical applications.
• Introducing the CSS Anchor Positioning API: Article by Una Kravets introducing the API.
• Tether Elements to Each Other with CSS Anchor Positioning: Article by Jhey Tompkins on tethering elements.
• Drawing a Line to Connect Elements with CSS Anchor Positioning: Blog post by Silvestar Bistrović on connecting elements.

Explore these resources to learn more about CSS anchor positioning and how to use it effectively in your web projects.