docs.rodeo

MDN Web Docs mirror

anchor-size()

{{CSSRef}} {{SeeCompatTable}} 

The anchor-size() CSS function enables setting anchor-positioned element’s size, position, and margins relative to the dimensions of anchor elements. It returns the <length> of a specified side of the target anchor element. anchor-size() is only valid when used within the value of anchor-positioned elements’ sizing, inset, and margin properties.

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

Syntax

/* sizing relative to anchor side */
width: anchor-size(width);
block-size: anchor-size(block);
height: calc(anchor-size(self-inline) + 2em);

/* sizing relative to named anchor's side */
width: anchor-size(--myAnchor width);
block-size: anchor-size(--myAnchor block);

/* sizing relative to named anchor's side with fallback */
width: anchor-size(--myAnchor width, 50%);
block-size: anchor-size(--myAnchor block, 200px);

/* positioning relative to anchor side */
left: anchor-size(width);
inset-inline-end: anchor-size(--myAnchor height, 100px);

/* setting margin relative to anchor side */
margin-left: calc(anchor-size(width) / 4);
margin-block-start: anchor-size(--myAnchor self-block, 20px);

Parameters

The anchor-size() function’s syntax is as follows:

anchor-size(<anchor-name> <anchor-size>, <length-percentage>)

The parameters are:

[!NOTE] The anchor dimension you set the positioned element’s property values relative to does not have to be along the same axis as the sizing value being set. For example, width: anchor-size(height) is valid.

Return value

Returns a {{cssxref("length")}}  value.

Description

The anchor-size() function enables a positioned element’s sizing, position, and margin values to be expressed in terms of an anchor element’s dimensions; it returns a {{cssxref("length")}}  value representing the dimension of a specific anchor element the positioned element’s property values are set relative to. It is a valid value for sizing, inset, and margin properties set on anchor-positioned elements.

The length returned is the vertical or horizontal size of an anchor element or its containing block. The dimension used is defined by the <anchor-size> parameter. If that parameter is omitted, the dimension used will match the axis of the sizing, position, or margin property is it set on. So for example:

The anchor element used as the basis for the dimension length is the element with the anchor-name specified in the <anchor-name> parameter. If more than one element has the same anchor name, the last element with that anchor name in the DOM order is used.

If no <anchor-name> parameter is included in the function call, the element’s default anchor, referenced in its position-anchor property, or associated with the element via the anchor HTML attribute, is used.

If an <anchor-name> parameter is included and there are no elements matching that anchor name, the fallback value is used. If no fallback was included, the declaration is ignored. For example, if width: anchor-size(--foo width, 50px); height: anchor-size(--foo width); were specified on the positioned element but no anchor named --foo exists in the DOM, the width would be 50px and the height declaration would have no effect.

If an element has sizing, position, or margin properties with anchor-size() values set on them, but it is not an anchor-positioned element (it does not have its {{cssxref("position")}}  property set to absolute or fixed or does not have an anchor associated with it via its position-anchor property), the fallback value will be used if one is available. If no fallback is available, the declaration is ignored.

For example, if width: anchor-size(width, 50px); were specified on the positioned element but no anchor was associated with it, the fallback value would be used, so width would get a computed value of 50px.

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

Properties that accept anchor-size() function values

The properties that accept an anchor-size() function as a value include:

Using anchor-size() inside calc()

The most common anchor-size() functions you’ll use will just refer to a dimension of the default anchor. Alternative, include the anchor-size() function inside a {{cssxref("calc")}}  function to modify the size applied to the positioned element.

For example, this rule sizes the positioned element’s width equal to the default anchor element’s width:

.positionedElem {
  width: anchor-size(width);
}

This rule sizes the positioned element’s inline size to 4 times the anchor element’s inline size, with the multiplication being done inside a {{cssxref("calc()")}}  function:

.positionedElem {
  inline-size: calc(anchor-size(self-inline) * 4);
}

Formal syntax

{{CSSSyntax}} 

Examples

Basic anchor-size() usage

This example shows two elements positioned relative to an anchor and sized using anchor-size() functions.

HTML

We specify three {{htmlelement("div")}}  elements, one anchor element and the two infobox elements we’ll position relative to the anchor. We also include filler text to make the {{htmlelement("body")}}  tall enough to require scrolling, but this has been hidden for the sake of brevity.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<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>

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

<div class="infobox" id="infobox1">
  <p>This is the first infobox.</p>
</div>

<div class="infobox" id="infobox2">
  <p>This is the second infobox.</p>
</div>

<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

We declare the anchor <div> as an anchor element by giving it an {{cssxref("anchor-name")}} . The positioned elements, with their {{cssxref("position")}}  properties set to fixed, are associated with the anchor element via their {{cssxref("position-anchor")}}  properties. We also set absolute {{cssxref("height")}}  and {{cssxref("width")}}  dimensions on the anchor to provide a reference point when checking the positioned element dimensions, for example, with browser developer tools:

.anchor {
  font-size: 2rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  text-align: center;
  align-content: center;
  outline: 1px solid black;
}

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

.infobox {
  align-content: center;
  color: darkblue;
  background-color: azure;
  outline: 1px solid #ddd;
  font-size: 1rem;
  text-align: center;
}

.anchor {
  anchor-name: --myAnchor;
  width: 100px;
  height: 100px;
}

.infobox {
  position-anchor: --myAnchor;
  position: fixed;
}

We set some distinct property values on the positioned elements:

#infobox1 {
  position-area: right;
  height: anchor-size(height);
  width: calc(anchor-size(width) * 2);
  margin-left: 5px;
}

#infobox2 {
  position-area: top span-right;
  height: calc(anchor-size(height) / 1.5);
  margin-bottom: 5px;
}

Result

{{EmbedLiveSample("Basic anchor-size() usage", "100%", "240")}} 

Use your browser tools to inspect the anchor-positioned elements. The first infobox will be 100px tall and 200px wide, while the second infobox will have a height of approximately 66.7px, with the width defaulting to {{cssxref("max-content")}} .

Position and margin example

See anchor-size() position and margin example.

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN