Tillitsdone
down Scroll to discover
CSS Anchor-Name Enhancing Web Layouts with Anchors
Discover the CSS anchor-name property, a powerful tool for defining elements as anchors and creating dynamic, responsive web layouts.

Learn about its use cases, available options, and how to effectively implement it in your projects.
thumbnail

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:

BrowserSupported
ChromeYes
FirefoxNo
SafariNo
EdgeYes
OperaNo
Internet ExplorerNo

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

HTML Attributes

  • anchor: Defines an anchor in HTML elements.

CSS Modules

Additional Resources

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

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.