anchor-size()

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

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

Die Parameter sind:

<anchor-name> Optional

Der anchor-name Eigenschaftswert eines Ankerelements, relativ zu dem die Größe, Position oder Abstände des Elements 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 assoziiert oder verknüpft ein Element nicht mit einem Anker; es definiert nur, auf welchen Anker sich die Eigenschaftswerte des Elements beziehen sollen.

<anchor-size> Optional

Gibt die Dimension des Ankerelements an, auf die sich die Eigenschaftswerte des positionierten Elements beziehen. Gültige Werte sind unter anderem:

width

Die Breite des Ankerelements.

height

Die Höhe des Ankerelements.

block

Die Länge des umgebenden Blocks des Ankerelements in Blockrichtung.

inline

Die Länge des umgebenden Blocks 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, wird die Dimension auf das <anchor-size> Schlüsselwort gesetzt, das zur Achse der Eigenschaft passt, in der die Funktion enthalten ist. Zum Beispiel ist width: anchor-size(); gleichbedeutend mit width: anchor-size(width);.

<length-percentage> Optional

Gibt die Größe an, die als Fallback-Wert verwendet werden soll, wenn das Element nicht absolut oder fest positioniert ist oder das Ankerelement nicht existiert. Wenn dieser Parameter weggelassen wird, wenn der Fallback ansonsten verwendet würde, ist die Deklaration ungültig.

Gibt einen <length> Wert zurück.

Die anchor-size() Funktion ermöglicht es, Größen-, Positions- und Abstandswerte eines positionierten Elements in Bezug auf die Dimensionen eines Ankerelements auszudrücken; sie gibt einen <length> Wert zurück, der die Dimension eines bestimmten Ankerelements darstellt, relativ zu dem die Eigenschaftswerte des positionierten Elements festgelegt sind. Es ist ein gültiger Wert für Größen-, Einfügungs- und Abstandseigenschaften, die auf ankerpositionierten Elementen gesetzt sind.

Die zurückgegebene Länge ist die vertikale oder horizontale Größe eines Ankerelements oder seines umgebenden Blocks. Die verwendete Dimension wird durch den <anchor-size> Parameter definiert. Wird dieser Parameter weggelassen, wird die verwendete Dimension die Achse der Größe, Position oder Abstandseigenschaft entsprechen, auf der sie gesetzt ist. Zum Beispiel:

• width: anchor-size() entspricht width: anchor-size(width).
• top: anchor-size() entspricht top: anchor-size(height).
• margin-inline-end: anchor-size() entspricht margin-inline-end: anchor-size(self-inline). margin-inline-end: anchor-size() entspricht auch margin-inline-end: anchor-size(width) in horizontalen Schreibmodi oder margin-inline-end: anchor-size(height) in vertikalen Schreibmodi.

Das Ankerelement, das als Grundlage für die Dimensionslänge verwendet wird, ist das Element mit dem in der <anchor-name> Parameter angegebenen anchor-name. Wenn mehr als ein Element denselben Ankernamen hat, wird das letzte Element mit diesem Ankernamen in der DOM-Reihenfolge verwendet.

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

Wenn ein <anchor-name> Parameter enthalten ist und es keine Elemente mit diesem Ankernamen gibt, 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 keinen Effekt.

Wenn ein Element Größen-, Positions- oder Abstandseigenschaften mit anchor-size() Werten darauf gesetzt hat, es jedoch kein ankerpositioniertes Element ist (es hat nicht seine position Eigenschaft auf absolute oder fixed gesetzt oder hat keinen Anker über seine position-anchor Eigenschaft mit ihm verbunden), wird der Fallback-Wert verwendet, falls verfügbar. 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, sodass width einen berechneten Wert von 50px hätte.

Für detaillierte Informationen zu Ankerfunktionen und deren Verwendung siehe die CSS-Ankerpositionierung Modul-Startseite und den Leitfaden zur Verwendung von CSS-Ankerpositionierung.

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
• Einfüge-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
• Abstands-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

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

Zum Beispiel wird mit dieser Regel die Breite des positionierten Elements gleich der Breite des Standardankerelements festgelegt:

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

Mit dieser Regel wird die Inline-Größe des positionierten Elements auf das Vierfache der Inline-Größe des Ankerelements festgelegt, wobei die Multiplikation innerhalb einer calc() Funktion erfolgt:

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

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

Dieses Beispiel zeigt zwei Elemente, die relativ zu einem Anker positioniert und mit anchor-size() Funktionen dimensioniert sind.

HTML

Wir spezifizieren drei <div> Elemente, ein Anker-Element und die beiden Infobox-Elemente, die wir relativ zum Anker positionieren werden. Wir fügen auch Fülltext hinzu, um den <body> hoch genug zu machen, um Scrollen zu erfordern, aber dieser 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 Anker <div> als Ankerelement, indem wir ihm einen anchor-name zuweisen. Die positionierten Elemente, deren position Eigenschaften auf fixed gesetzt sind, sind über ihre position-anchor Eigenschaften mit dem Ankerelement verbunden. Wir setzen außerdem absolute height und width Dimensionen auf dem Anker, um einen Referenzpunkt zu bieten, wenn die Dimensionen des positionierten Elements überprüft werden, zum Beispiel 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 #ddd;
  font-size: 1rem;
  text-align: center;
}

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

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

Wir setzen einige unterschiedliche Eigenschaftswerte auf den positionierten Elementen:

• Die positionierten Elemente sind mit unterschiedlichen position-area Werten an den Anker gebunden, die die Elemente an verschiedenen Stellen um das Ankerelement positionieren.
• Die height der ersten Infobox wird auf die gleiche Höhe wie das Ankerelement gesetzt: anchor-size(height) gibt die Höhe des Ankerelements zurück. Die width des Elements wird verdoppelt zur Breite des Ankerelements unter Verwendung der anchor-size() Funktion innerhalb einer calc() Funktion gesetzt: anchor-size(width) ruft die Breite des Ankerelements ab, die dann mit zwei multipliziert wird.
• Die height der zweiten Infobox wird auf zwei Drittel der Höhe des Ankerelements gesetzt, indem eine ähnliche Technik angewandt wird.
• Es sind Abstandswerte enthalten, um eine Trennung vom Ankerelement zu gewährleisten.

#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;
}

Ergebnis

Verwenden Sie Ihre Browswerwerkzeuge, um die ankerpositionierten Elemente zu inspizieren. Die erste Infobox wird 100px hoch und 200px breit sein, während die zweite Infobox eine Höhe von etwa 66,7px haben wird, wobei die width auf max-content voreingestellt ist.

Siehe anchor-size() Beispiel für Position und Abstand.

• anchor-name
• position-anchor
• anchor() Funktion
• Leitfaden zur Verwendung von CSS-Ankerpositionierung
• CSS-Ankerpositionierung Modul