anchor-size() CSS-Funktion

Syntax

/* without parameters */
anchor-size()

/* anchor size parameter */
anchor-size(width);
anchor-size(block);
anchor-size(self-inline);

/* anchor-name and anchor-side */
width: anchor-size(--my-anchor width);
block-size: anchor-size(--my-anchor block);

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

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

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

Parameter

Die Syntax der anchor-size() Funktion ist wie folgt:

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

Die Parameter sind:

<anchor-name> Optional

Der Wert der anchor-name Eigenschaft eines Ankerelements, zu dem die Größe, Position oder Ränder des Elements relativ festgelegt werden sollen. Dies ist ein <dashed-ident> Wert. Wenn weggelassen, wird der Standardanker des Elements verwendet.

Hinweis: Das Angeben eines <anchor-name> innerhalb einer anchor-size() Funktion stellt weder eine Verbindung noch eine Bindung eines Elements zu einem Anker her; es definiert nur, zu welchem Anker die Eigenschaftswerte des Elements relativ festgelegt werden sollen.

<anchor-size> Optional

Gibt die Dimension des Ankerelements an, zu der die Eigenschaftswerte des positionierten Elements relativ festgelegt werden. Gültige Werte sind:

width

Die Breite des Ankerelements.

height

Die Höhe des Ankerelements.

block

Die Länge des Containing Block des Ankerelements in Blockrichtung.

inline

Die Länge des Containing Block des Ankerelements in Inline-Richtung.

self-block

Die Länge des Ankerelements in Blockrichtung.

self-inline

Die Länge des Ankerelements in Inline-Richtung.

Hinweis: Wenn dieser Parameter weggelassen wird, ist die Dimension standardmäßig der <anchor-size> Schlüsselbegriff, der zur Achse der Eigenschaft passt, in der die Funktion enthalten ist. Zum Beispiel ist width: anchor-size(); äquivalent zu width: anchor-size(width);.

<length-percentage> Optional

Gibt die Größe an, die als Fallback verwendet wird, falls das Element nicht absolut oder fest positioniert ist oder das Ankerelement nicht existiert. Wenn dieser Parameter in einem Fall weggelassen wird, in dem der Fallback sonst verwendet worden wäre, ist die Deklaration ungültig.

Rückgabewert

Gibt einen <length> Wert zurück.

Beschreibung

Die anchor-size() Funktion ermöglicht es, die Größen-, Positions- und Randwerte eines positionierten Elements in Bezug auf die Dimensionen eines Ankerelements auszudrücken; sie gibt einen <length> Wert zurück, der die Dimension eines spezifischen Ankerelements darstellt, zu der die Eigenschaftswerte des positionierten Elements relativ festgelegt werden. Sie ist ein gültiger Wert für Größen-, Einzugs- und Rand-Eigenschaften, die auf ankerpositionierten Elementen festgelegt werden.

Die zurückgegebene Länge ist die vertikale oder horizontale Größe eines Ankerelements oder seines Containing Block. Die verwendete Dimension wird durch den <anchor-size> Parameter definiert. Wenn dieser Parameter weggelassen wird, passt die verwendete Dimension zur Achse der Eigenschaft, auf die sie festgelegt ist. Zum Beispiel:

• width: anchor-size() ist äquivalent zu width: anchor-size(width).
• top: anchor-size() ist äquivalent zu top: anchor-size(height).
• margin-inline-end: anchor-size() ist äquivalent zu margin-inline-end: anchor-size(self-inline). margin-inline-end: anchor-size() ist auch äquivalent zu margin-inline-end: anchor-size(width) in horizontalen Schreibrichtungen oder margin-inline-end: anchor-size(height) in vertikalen Schreibrichtungen.

Das Ankerelement, das als Grundlage für die Längendimension verwendet wird, ist das Element mit dem im <anchor-name> Parameter angegebenen anchor-name. Wenn mehr als ein Element denselben Ankernamen hat, wird das zuletzt im DOM-Order befindliche Element mit diesem Ankernamen verwendet.

Wenn kein <anchor-name> Parameter in der Funktionsaufruf enthalten ist, wird der Standardanker des Elements verwendet, auf den in seiner position-anchor Eigenschaft verwiesen wird oder der über das anchor HTML-Attribut mit dem Element verbunden ist.

Wenn ein <anchor-name> Parameter enthalten ist und es keine Elemente gibt, die mit diesem Ankernamen übereinstimmen, wird der Fallback-Wert verwendet. Wenn kein Fallback enthalten war, wird die Deklaration ignoriert. Zum Beispiel, wenn width: anchor-size(--foo width, 50px); height: anchor-size(--foo width); auf dem positionierten Element angegeben wurde, aber kein Anker mit dem Namen --foo im DOM existiert, würde die width 50px betragen und die height Deklaration hätte keine Wirkung.

Wenn ein Element Größen-, Positions- oder Rand-Eigenschaften mit anchor-size() Werten darauf eingestellt hat, aber kein ankerpositioniertes Element ist (sein position Eigenschaft ist nicht auf absolute oder fixed eingestellt oder es gibt keinen Anker, der über seine position-anchor Eigenschaft verknüpft ist), wird der Fallback-Wert verwendet, falls einer verfügbar ist. Wenn kein Fallback verfügbar ist, wird die Deklaration ignoriert.

Zum Beispiel, wenn width: anchor-size(width, 50px); auf dem positionierten Element angegeben wurde, aber kein Anker damit verbunden war, würde der Fallback-Wert verwendet werden, sodass width einen berechneten Wert von 50px erhalten würde.

Für detaillierte Informationen zu Ankerfunktionen und deren Verwendung siehe das Modul CSS Anchor Positioning und den Anleitung zur Verwendung von CSS Anchor Positioning Leitfaden.

Eigenschaften, die anchor-size() Funktionswerte akzeptieren

Die Eigenschaften, die eine anchor-size() Funktion als Wert akzeptieren, umfassen:

• Größen-Eigenschaften:
  • width
  • height
  • min-width
  • min-height
  • max-width
  • max-height
  • block-size
  • inline-size
  • min-block-size
  • min-inline-size
  • max-block-size
  • max-inline-size
• Einsetz-Eigenschaften:
  • bottom
  • left
  • right
  • top
  • inset Kurzform
  • inset-block Kurzform
  • inset-block-end
  • inset-block-start
  • inset-inline Kurzform
  • inset-inline-end
  • inset-inline-start
• Rand-Eigenschaften:
  • margin Kurzform
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-block Kurzform
  • margin-block-end
  • margin-block-start
  • margin-inline Kurzform
  • margin-inline-end
  • margin-inline-start

Verwendung von anchor-size() innerhalb von calc()

Die am häufigsten verwendeten anchor-size() Funktionen beziehen sich nur auf eine Dimension des Standardankers. Alternativ können Sie die anchor-size() Funktion innerhalb einer calc() Funktion verwenden, um die auf das positionierte Element angewendete Größe zu ändern.

Zum Beispiel legt diese Regel die Breite des positionierten Elements auf die gleiche Breite wie das Standardankerelement fest:

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

Diese Regel legt die Inline-Größe des positionierten Elements auf das Vierfache der Inline-Größe des Ankerelements fest, wobei die Multiplikation innerhalb einer calc() Funktion erfolgt:

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

Formale Syntax

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Grundlegende anchor-size() Verwendung

Dieses Beispiel zeigt zwei Elemente, die relativ zu einem Anker positioniert und unter Verwendung von anchor-size() Funktionen dimensioniert werden.

HTML

Wir spezifizieren drei <div> Elemente, ein anchor Element und die zwei infobox Elemente, die wir relativ zum Anker positionieren. Wir fügen auch Fülltext hinzu, um den <body> hoch genug zu machen, um ein Scrollen zu erfordern, aber dies wurde der Kürze halber ausgeblendet.

<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

Wir deklarieren das anchor <div> als Ankerelement, indem wir ihm einen anchor-name geben. Die positionierten Elemente, deren position Eigenschaften auf fixed gesetzt sind, sind über ihre position-anchor Eigenschaften mit dem Ankerelement verbunden. Wir setzen auch absolute height und width Dimensionen auf dem Anker, um einen Referenzpunkt beim Überprüfen der Abmessungen des positionierten Elements zu bieten, beispielsweise mit den Entwicklerwerkzeugen des Browsers:

.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 #dddddd;
  font-size: 1rem;
  text-align: center;
}

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

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

Wir setzen unterschiedliche Eigenschaftswerte auf den positionierten Elementen:

• Die positionierten Elemente sind mit dem Anker über unterschiedliche position-area Werte verbunden, die die Elemente an verschiedenen Stellen um das Ankerelement herum positionieren.
• Die height der ersten Infobox ist auf die gleiche Höhe wie das Ankerelement eingestellt: anchor-size(height) gibt die Höhe des Ankerelements zurück. Die width des Elements ist auf das Doppelte der Breite des Ankerelements eingestellt, wobei die anchor-size() Funktion innerhalb einer calc() Funktion verwendet wird: anchor-size(width) ruft die Breite des Ankerelements ab, die dann mit zwei multipliziert wird.
• Die height der zweiten Infobox ist auf 80% der Höhe des Ankerelements eingestellt, mit einer ähnlichen Technik.
• Randwerte werden eingeschlossen, um etwas Abstand vom Ankerelement zu schaffen.

#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.25);
  margin-bottom: 5px;
}

Ergebnis

Verwenden Sie Ihre Browserwerkzeuge, um die ankerpositionierten Elemente zu inspizieren. Die erste Infobox wird 50px hoch und 200px breit sein, während die zweite Infobox 40px hoch sein wird, wobei die width standardmäßig auf max-content gesetzt ist.

Beispiel zu Position und Rand

Siehe anchor-size() Position und Randbeispiel.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• anchor-name
• position-anchor
• anchor() Funktion
• Anleitung zur Verwendung von CSS Anchor Positioning Leitfaden
• CSS Anchor Positioning Modul