Anchor-scope - CSS Property

Syntax diagram of anchor-scope.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• --id is an identifier defined by anchor-name. It must start with a double dash.
• Multiple IDs can be specified, separated by a comma.

Description of the anchor-scope property.

The property anchor-scope is used in the area of anchor-based positioning. It changes the scope of the property anchor-name. It's useful when several elements have the same anchor ID.

For the anchor-scope property to work properly, the positioned element needs to be a child of the element that serves as an anchor. Anchored positioning can still work without this: you can link an element to an anchor even if there's no parent-child relationship between them. But in that case, the anchors have to have a unique ID, which isn't always possible when elements are generated automatically.

Let's take the example of a series of images showing different means of transportation. Each image gets a tooltip. All these images have the same anchor ID. In this first example (without using anchor-scope), you can see that all the tooltips overlap because they all position themselves relative to the last image.

In this second example, the property anchor-scope was used, limiting its scope to each of the images. The tooltips are correctly positioned.

Also see the anchor-name property for a summary of useful properties for anchor positioning. You'll also find a tutorial on anchor positioning on this page.

Values for anchor-scope.

• anchor-scope: none;

  No change in the scope of anchor IDs.

• anchor-scope: all;

  Specifies that all positioning IDs are now limited to the descendant tree of the element that receives this property. One exception though: IDs that are already limited by a anchor-scope property.

• anchor-scope: --id;

  Specifies the scope of the --id identifier. This is now limited to the element that receives this property and its sub-tree (descendant tree).

  Several IDs can be specified, separated by a comma.

• anchor-scope: initial; (none) anchor-scope: inherit; anchor-scope: revert; anchor-scope: revert-layer; anchor-scope: revert-rule; anchor-scope: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the anchor-scope property.

The property anchor-scope can be animated in the discrete animation type, meaning it jumps from one value to another without any transition.

Simulator.

The position ID set on each of the first three images is --demo1. The following ones got --demo2. Each of the labels already refers to one of the IDs to position itself. All that's left is to define anchor-scope.

Browsers compatibility with anchor-scope.

The anchor-scope property is well recognized by all modern browsers.

Notes:

(1) Samsung Internet does not support the position-anchor property with the value normal. It also doesn't fully support the anchor-visibility property.

(2) Android browser does not support the position-anchor property with the value normal.
It also doesn't fully support the anchor-visibility property.

(3) Doesn't fully support the anchor-visibility property.

(4) Firefox does not allow animation of the anchor() and anchor-size() functions.
It does not fully support the anchor-visibility property.

(5) Opera does not support the position-anchor property with the value normal.
It also doesn't fully support the anchor-visibility property.

1

Anchoring
positioning

2

anchor-scope
property

Estimated overall support.

86%

69%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

1

Androïd Brower

2

Chrome

3

Chrome pour Androïd

3

Edge

3

Firefox

4

Firefox pour Androïd

4

KaiOS Browser

Opéra

5

Safari

Safari sur IOS

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the anchor-scope property.

• CSS Anchor Positioning - Level 1

  Absolute positioning relative to the page or screen can prove to be limited when you want to position an element relative to another.
  This specification describes the properties necessary to achieve this, as well as the functions anchor() and anchor-size() that allow you to set the position and dimensions of an element based on another.
  It also describes how to test several positioning possibilities to adapt to the context, particularly to the state of the page scrolling.

  Regarding anchor-scope First definition of the property anchor-scope.
  

  June 29, 2023

  Working Draft.

  

  

  

See also, about anchor positioning.

Anchor positioning is a relatively new feature, described in the specification CSS Anchor Positioning. The following properties are also described in this module.

Properties:

Functions:

At-rules: