anchor-size()

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, relativ zu dem Sie die Größe, Position oder Ränder des Elements setzen möchten. Dies ist ein <dashed-ident>-Wert. Wenn er weggelassen wird, wird der Standardanker des Elements verwendet.

Hinweis: Das Angeben eines <anchor-name> innerhalb einer anchor-size()-Funktion verknüpft oder verbindet ein Element nicht mit einem Anker; es definiert lediglich, zu welchem Anker die Eigenschaftswerte des Elements relativ gesetzt werden sollen.

<anchor-size> Optional

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

width

Die Breite des Ankerelements.

height

Die Höhe des Ankerelements.

block

Die Länge des Einfügungsblocks des Ankerelements in Blockrichtung.

inline

Die Länge des Einfügungsblocks 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 das <anchor-size>-Schlüsselwort, das zur Achse der Eigenschaft passt, in die die Funktion eingeschlossen 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, falls das Element nicht absolut oder fest positioniert ist oder das Ankerelement nicht existiert. Wenn dieser Parameter weggelassen wird, ist die Deklaration ungültig, wenn der Fallback ansonsten verwendet würde.

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 anhand der Dimensionen eines Ankerelements auszudrücken. Sie gibt einen <length>-Wert zurück, der die Dimension eines bestimmten Ankerelements darstellt, auf den die Eigenschaftswerte des positionierten Elements relativ gesetzt werden. Sie ist ein gültiger Wert für ankerpositionierte Elemente, die Größen-, Einfügungs- und Rand-Eigenschaften aufweisen.

Die zurückgegebene Länge ist die vertikale oder horizontale Größe eines Ankerelements oder seines Einfügungsblocks. Die verwendete Dimension wird durch den <anchor-size>-Parameter definiert. Wird dieser Parameter weggelassen, passt die verwendete Dimension zur Achse der Eigenschaft, auf die sie gesetzt 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 ebenfalls ä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 Dimensionslänge verwendet wird, ist das Element mit dem im <anchor-name>-Parameter angegebenen anchor-name. Wenn mehr als ein Element denselben Ankernamen besitzt, wird das letzte Element mit diesem Ankernamen in der DOM-Reihenfolge verwendet.

Wenn kein <anchor-name>-Parameter in den Funktionsaufruf eingeschlossen 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 eingeschlossen wurde, 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äre die width 50px, und die height-Deklaration hätte keine Wirkung.

Wenn ein Element Größen-, Positions- oder Randeigenschaften mit anchor-size()-Werten hat, es aber kein ankerpositioniertes Element ist (es hat keine seiner position-Eigenschaften auf absolute oder fixed gesetzt oder keinen Anker über seine position-anchor-Eigenschaft zugeordnet), 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 dem positionierten Element angegeben war, aber kein Anker damit verbunden war, würde der Fallback-Wert verwendet, sodass width einen berechneten Wert von 50px erhalten würde.

Für ausführliche Informationen zu Ankerfunktionen und deren Verwendung, siehe das CSS-Ankerpositionierungsmodul und den CSS-Ankerpositionierungs-Leitfaden.

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ügungseigenschaften:
  • bottom
  • left
  • right
  • top
  • inset Kurze Angabe
  • inset-block Kurze Angabe
  • inset-block-end
  • inset-block-start
  • inset-inline Kurze Angabe
  • inset-inline-end
  • inset-inline-start
• Randeigenschaften:
  • margin Kurze Angabe
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-block Kurze Angabe
  • margin-block-end
  • margin-block-start
  • margin-inline Kurze Angabe
  • margin-inline-end
  • margin-inline-start

Verwendung von anchor-size() in 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 in eine calc()-Funktion einschließen, um die Größe, die auf das positionierte Element angewendet wird, zu modifizieren.

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 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 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 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 ein Ankerelement, indem wir ihm einen anchor-name geben. Die positionierten Elemente, mit ihren position-Eigenschaften auf fixed gesetzt, sind über ihre position-anchor-Eigenschaften mit dem Ankerelement verbunden. Wir setzen auch absolute height- und width-Dimensionen auf den Anker, um einen Referenzpunkt zu bieten, wenn die Dimensionen des positionierten Elements überprüft werden, zum Beispiel mit den Entwicklertools 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 einige unterschiedliche Eigenschaftswerte auf die positionierten Elemente:

• Die positionierten Elemente sind mit unterschiedlichen position-area-Werten an den Anker gebunden, die die Elemente an verschiedenen Orten um das Ankerelement 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 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 ist auf 80% der Höhe des Ankerelements gesetzt, unter Verwendung einer ähnlichen Technik.
• Randwerte sind enthalten, um eine gewisse Trennung vom Ankerelement zu ermöglichen.

#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 Browser-Tools, 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-Eigenschaft standardmäßig zu 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
• CSS-Ankerpositionierungen verwenden-Leitfaden
• CSS-Ankerpositionierungsmodul