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 lautet wie folgt:

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

Die Parameter sind:

<anchor-name> Optional

Der anchor-name-Eigenschaftenwert eines Ankerelements, zu dem Sie die Größe, Position oder Abstände des Elements relativ einstellen 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 verknüpft oder koppelt ein Element nicht mit einem Anker; es definiert lediglich, zu welchem Anker die Werte der Element-Eigenschaften relativ gesetzt werden sollen.

<anchor-size> Optional

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

width

Die Breite des Ankerelements.

height

Die Höhe des Ankerelements.

block

Die Länge des Enthaltungsblocks des Ankerelements in Blockrichtung.

inline

Die Länge des Enthaltungsblocks 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(); gleichwertig mit width: anchor-size(width);.

<length-percentage> Optional

Gibt die Größe an, die als Fallback-Wert verwendet wird, 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 sonst 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 Randwerte eines positionierten Elements in Bezug auf die Abmessungen eines Ankerelements auszudrücken; sie gibt einen <length>-Wert zurück, der die Dimension eines bestimmten Ankerelements darstellt, zu dem die Eigenschaftswerte des positionierten Elements relativ gesetzt werden. Es ist ein gültiger Wert für Größen-, Inset- und Rand-Eigenschaften, die auf ankerpositionierten Elementen gesetzt sind.

Die zurückgegebene Länge ist die vertikale oder horizontale Größe eines Ankerelements oder seines Enthaltungsblocks. 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 Rand-Eigenschaft, auf die sie gesetzt ist. Beispielsweise:

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

Das Ankerelement, das als Basis für die Dimensionlänge verwendet wird, ist das Element mit dem im <anchor-name>-Parameter angegebenen Ankernamen. 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 über das anchor-HTML-Attribut mit dem Element verknüpft 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 war, wird die Deklaration ignoriert. Zum Beispiel, wenn width: anchor-size(--foo width, 50px); height: anchor-size(--foo width); auf das positionierte Element angegeben wurde, aber kein Anker mit dem Namen --foo in der DOM existiert, würde die width auf 50px gesetzt, und die height-Deklaration hätte keine Wirkung.

Wenn ein Element Größen-, Positions- oder Randeigenschaften mit anchor-size()-Werten gesetzt hat, es jedoch kein ankerpositioniertes Element ist (es hat seine position-Eigenschaft nicht auf absolute oder fixed gesetzt oder hat keinen Anker über seine position-anchor-Eigenschaft verknüpft), 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 angegeben wurde, aber kein Anker damit verknüpft wurde, wird der Fallback-Wert verwendet, sodass die width einen berechneten Wert von 50px erhält.

Für ausführliche Informationen zu Ankerfunktionen und deren Verwendung, sehen Sie sich die CSS-Ankerpositionierung-Modul-Startseite und den Anleitung zur Verwendung von CSS-Ankerpositionierung an.

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
• Inset-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, 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 auf das positionierte Element angewandte Größe zu ändern.

Zum Beispiel, diese Regel setzt die Breite des positionierten Elements gleich der Breite des Standardankerelements:

.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 sind und mit anchor-size()-Funktionen dimensioniert werden.

HTML

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

<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, werden über ihre position-anchor-Eigenschaften mit dem Ankerelement verknüpft. Wir setzen auch absolute height- und width-Dimensionen auf den Anker, um einen Bezugspunkt bei der Überprüfung der Dimensionen der positionierten Elemente bereitzustellen, beispielsweise mit Browser-Entwicklertools:

.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 unterscheidbare Eigenschaftswerte auf die positionierten Elemente:

• Die positionierten Elemente sind mit unterschiedlichen position-area-Werten an den Anker gebunden, die die Elemente an verschiedenen Stellen um das Ankerelement herum positionieren.
• Die height der ersten Infobox hat dieselbe Höhe wie das Ankerelement: anchor-size(height) gibt die Höhe des Ankerelements zurück. Die width des Elements wird auf das Doppelte der Breite des Ankerelements gesetzt, indem die anchor-size()-Funktion innerhalb einer calc()-Funktion verwendet wird: anchor-size(width) ruft die Breite des Ankerelements ab, die dann mal zwei multipliziert wird.
• Die height der zweiten Infobox ist auf zwei Drittel der Höhe des Ankerelements gesetzt, mit einer ähnlichen Technik.
• Randwerte sind enthalten, um etwas Abstand vom Ankerelement zu bieten.

#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

Benutzen Sie Ihre Browserwerkzeuge, 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 und die width standardmäßig auf max-content gesetzt ist.

Positions- und Randbeispiel

Siehe anchor-size() Positions- und Randbeispiel.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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