Learn about its use cases, available options, and how to effectively implement it in your projects.
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:
Explanation of Syntax
none
: The default value. Settinganchor-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 theposition-anchor
property.
Example Usage
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
, andunset
for more flexible styling.
Key Values
-
none
- Description: The default value. Setting
anchor-name: none
means the element is not defined as an anchor. - Usage:
- Description: The default value. Setting
-
<dashed-ident>
- Description: One or more comma-separated arbitrary custom identifiers that define the name or names of the anchor.
- Usage:
-
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 likeinherit
if the property is inheritable or likeinitial
if not.- Usage:
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.
- Defining Anchors: An element can be defined as an anchor by setting one or more
<dashed-ident>
anchor names on it via theanchor-name
property. - Associating Elements: When one of those names is set as the value of the
position-anchor
property of an element that has itsposition
set toabsolute
orfixed
, the two elements are associated. - 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
CSS
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
CSS
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
CSS
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:
Browser | Supported |
---|---|
Chrome | Yes |
Firefox | No |
Safari | No |
Edge | Yes |
Opera | No |
Internet Explorer | No |
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 withanchor-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.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.