anchor-size()

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(--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 anchor-name Eigenschaftswert eines Ankerelements, dessen Größe, Position oder Abstände Sie festlegen möchten. Dies ist ein <dashed-ident> Wert. Wenn weggelassen, wird der Standardanker des Elements verwendet.

Hinweis: Die Angabe eines <anchor-name> innerhalb einer anchor-size() Funktion verbindet oder verankert ein Element nicht mit einem Anker; es definiert nur, relativ zu welchem Anker die Eigenschaftswerte des Elements 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 enthaltenden Blocks des Ankerelements in Blockrichtung.

inline

Die Länge des enthaltenden Blocks des Ankerelements in Inlinerichtung.

self-block

Die Länge des Ankerelements in Blockrichtung.

self-inline

Die Länge des Ankerelements in Inlinerichtung.

Hinweis: Wenn dieser Parameter weggelassen wird, ist die Dimension standardmäßig der <anchor-size> Schlüsselbegriff, der mit der Achse der Eigenschaft übereinstimmt, 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-Wert verwendet werden soll, wenn das Element nicht absolut oder fix positioniert ist oder das Ankerelement nicht existiert. Wenn dieser Parameter in einem Fall weggelassen wird, in dem der Fallback ansonsten verwendet würde, 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 Abstandsgrößen 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üge- und Abstandseigenschaften, die auf ankerpositionierten Elementen festgelegt sind.

Die zurückgegebene Länge ist die vertikale oder horizontale Größe eines Ankerelements oder dessen enthaltenden Blocks. Die verwendete Dimension wird durch den <anchor-size> Parameter definiert. Wenn dieser Parameter weggelassen wird, entspricht die verwendete Dimension der Achse der Größen-, Positions- oder Abstandseigenschaft, auf die sie angewendet wird. So zum Beispiel:

• width: anchor-size() ist gleichbedeutend mit width: anchor-size(width).
• top: anchor-size() ist gleichbedeutend mit top: anchor-size(height).
• margin-inline-end: anchor-size() ist gleichbedeutend mit margin-inline-end: anchor-size(self-inline). margin-inline-end: anchor-size() ist auch gleichbedeutend mit 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 dimensionale Länge dient, ist das Element mit dem anchor-name, das im <anchor-name> Parameter angegeben ist. 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 verwendet, der in seiner position-anchor Eigenschaft referenziert oder dem Element über das anchor HTML-Attribut zugeordnet ist.

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

Wenn ein Element Größen-, Positions- oder Abstandseigenschaften mit anchor-size() Werten aufweist, aber kein ankerpositioniertes Element ist (es hat die position Eigenschaft nicht auf absolute oder fixed gesetzt oder hat keinen Anker, der ihm über seine position-anchor Eigenschaft zugeordnet ist), wird der Fallback-Wert verwendet, wenn einer verfügbar ist. Wenn kein Fallback verfügbar ist, wird die Deklaration ignoriert.

Zum Beispiel, wenn width: anchor-size(width, 50px); auf das positionierte Element spezifiziert wurde, aber kein Anker ihm zugeordnet wurde, würde der Fallback-Wert verwendet, sodass width einen berechneten Wert von 50px erhält.

Für detaillierte Informationen zu Ankerfunktionen und deren Verwendung siehe die CSS-Ankerpositionierung Modulseite und den Anleitung zur Verwendung von CSS-Ankerpositionierung.

Eigenschaften, die anchor-size() Funktionswerte akzeptieren

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

• Größeneigenschaften:
  • 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ügeeigenschaften:
  • bottom
  • left
  • right
  • top
  • inset Kurzschreibweise
  • inset-block Kurzschreibweise
  • inset-block-end
  • inset-block-start
  • inset-inline Kurzschreibweise
  • inset-inline-end
  • inset-inline-start
• Abständeigenschaften:
  • margin Kurzschreibweise
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-block Kurzschreibweise
  • margin-block-end
  • margin-block-start
  • margin-inline Kurzschreibweise
  • margin-inline-end
  • margin-inline-start

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

Die häufigsten anchor-size() Funktionen, die Sie verwenden werden, beziehen sich nur auf eine Dimension des Standardankers. Alternativ schließen Sie die anchor-size() Funktion in eine calc() Funktion ein, um die Größe des positionierten Elements zu modifizieren.

Beispielsweise legt diese Regel die Breite des positionierten Elements gleich der Breite des Standard-Ankerelements fest:

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

Diese Regel setzt die Inline-Größe des positionierten Elements auf das Vierfache der Inline-Größe des Ankerelements, wobei die Multiplikation innerhalb einer calc() Funktion durchgeführt wird:

.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 Verwendung von anchor-size()

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 anchor Element und die zwei infobox Elemente, die wir relativ zum Anker positionieren werden. Wir fügen auch Fülltext ein, um das <body> hoch genug zu machen, um Scrollen zu erfordern, aber dies wurde der Kürze halber weggelassen.

<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 erklären das anchor <div> als ein Ankerelement, indem wir ihm einen anchor-name geben. Die positionierten Elemente, deren position Eigenschaften auf fixed gesetzt sind, werden über ihre position-anchor Eigenschaften mit dem Ankerelement verbunden. Wir setzen außerdem absolute height und width Dimensionen auf den Anker, um beim Überprüfen der Abmessungen der positionierten Elemente, z.B. mit Entwicklerwerkzeugen im Browser, einen Bezugspunkt zu bieten:

.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: 100px;
}

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

Wir setzen einige unterschiedliche Eigenschaftswerte auf die positionierten Elemente:

• Die positionierten Elemente sind mit dem Anker durch verschiedene position-area Werte verbunden, die die Elemente an verschiedenen Stellen um das Ankerelement positionieren.
• Die height der ersten Infobox wird auf dieselbe Höhe wie das Ankerelement gesetzt: anchor-size(height) gibt die Höhe des Ankerelements zurück. Die width des Elements wird auf das Doppelte der Breite des Ankerelements gesetzt, 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 wird auf zwei Drittel der Höhe des Ankerelements gesetzt, unter Verwendung einer ähnlichen Technik.
• Randwerte sind enthalten, um etwas Abstand zum 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.5);
  margin-bottom: 5px;
}

Ergebnis

Verwenden Sie Ihre Browsertools, um die ankerpositionierten Elemente zu inspizieren. Die erste Infobox ist 100px hoch und 200px breit, während die zweite Infobox eine Höhe von ca. 66,7px hat, wobei die width standardmäßig auf max-content gesetzt ist.

Beispiel für Position und Rand

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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