`Anchor-size()` - Function CSS

anchor-size()

Summary of characteristics of the `anchor-size()` function

Quick description

Returns the size (height or width) of the element designated as the anchor (anchor-based positioning).

Status

Compatibility issues ⚠

Usable for

HTML

W3C Module

CSS Anchor Positioning

References (W3C)

CSS Anchor Positioning - Level 1

Document status: WD (Working Draft)

Description of the `anchor-size()` function.

⚠

Attention! The function anchor-size() is not yet supported by all browsers (see the compatibility table below). The examples on this page will only work in browsers that support the function.

Anchor-based positioning involves positioning one element in relation to another. The element that serves as a reference is called the anchor. It is assigned an identifier with the property anchor-name. The property position-anchor, assigned to the positioned element, links it to the anchor.
Here is an example of CSS code:


	#anchor {
	   anchor-name:--demo;
	}
	#target {
	   position: absolute;
	   position-anchor:--demo;
	   top: anchor(bottom);
	   left: anchor(right);
	   width: anchor-size(width);
	}

The function anchor() used in the example positions the element, while the function anchor-size(), assigned to properties such as width or height, allows you to set the dimensions of the element relative to those of the anchor.

This function therefore returns a dimension, which allows it to be used with the calc(), minmax() functions, etc.

For more information on anchor positioning, refer to the anchor-name pages, or to the page on the anchor() function.

The `anchor-size()` value can be used with the following properties:

block-size : Sets the size of an element in the block direction. For Latin-based languages, this logical property is equivalent to height.
bottom : Defines the space between the bottom of the element (if positioned) and the bottom of its parent.
height : Sets the height of the element.
inline-size : Sets the size of the element in the inline direction. For Latin-based languages, this property is equivalent to width.
inset : Sets the position of the element when it is positioned other than static. Short hand for top, right, bottom and left.
inset-block : Defines the position of a positioned element in the block direction. Shorthand for inset-block-start and inset-block-end.
inset-inline : Defines the position of a positioned element in the inline direction. Shorthand for inset-inline-start and inset-inline-end.
margin : Shorthand of the four margins.
margin-block : Defines the dimension of the margins in the direction of the blocks given the writing mode.
margin-inline : Defines the dimension of the margins at the beginning and at the end of the lines, given the writing mode.
max-height : Sets a limit for the maximum height of the element.
max-width : Sets the maximum width of the element.
min-height : Sets the minimum height of the element.
min-width : Sets the minimum width of the element.
width : Sets the width of the element.

As well as all the corresponding detailed properties (for example, inset-block-start).

Syntaxes of the `anchor-size()` function.

width: anchor-size(width); height: anchor-size(height);

These two properties define the width (width) and height (height) of the element positioned in accordance with those of the anchor.
You can adjust the size of the anchor.

⚓

width:anchor(width);

height:anchor(height);
inline-size: anchor-size(inline); block-size: anchor-size(block);

The block and inline values are sensitive to the writing mode depending on the language. Otherwise, in latin langages, they behave like height and width.

Writing mode:

⚓

block-size:anchor(block); inline-size:anchor(inline);
width: anchor-size(--id width, 100px); height: anchor-size(--id height, 50px); i d

It is possible to specify an identifier other than the one normally assigned to the anchor. However, the identifier defined to position the element remains valid. Therefore, the property position-anchor should not be deleted. This identifier i simply specifies that the dimensions of the element are defined by another anchor.

In the example below, the position of the element is defined by the image of an anchor, but its dimensions are determined by those of the target image (you can adjust them to see this for yourself).

If the specified identifier is not found, the dimensions specified last (d) are the ones that are ultimately taken into account.

⚓

🎯

width:anchor(--syntax2 width, 100px); height:anchor(--syntax2 height, 50px);

Browsers compatibility with `anchor-size()` function.

Firefox does not yet support this property by default; it needs to be enabled with the layout.css.anchor-positioning.enabled flag. See how access flags on Firefox.

Column 1

General support for positioning by anchoring.

Column 2

Recognition by browsers of the function anchor-size() to size the positioned element (anchoring position).

Notes:

(1) Disabled by default. Can be enabled by setting the layout.css.anchor-positioning.enabled flag to true.

Anchor
positioning

anchor-size()
function

Estimated overall support.

71%

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

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `anchor-size()` function.

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-size(). Introduction to this specification of anchoring positioning, and definition of the function anchor-size().

June 29, 2023
Working Draft.

`Anchor-size()` - Function CSS

Summary of characteristics of the `anchor-size()` function

Description of the `anchor-size()` function.

The `anchor-size()` value can be used with the following properties:

Syntaxes of the `anchor-size()` function.

Simulator.