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

Hinweis: Wenn Sie einen <anchor-name> in einer anchor-size() Funktion angeben, wird weder ein Element mit einem Anker verknüpft noch daran gebunden; es definiert lediglich, zu welchem Anker die Eigenschaftswerte des Elements relativ gesetzt werden sollen.

<anchor-size> Optional

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

width

Die Breite des Ankerelements.

height

Die Höhe des Ankerelements.

block

Die Länge des enthältenden Blocks des Ankerelements in Blockrichtung.

inline

Die Länge des enthältenden Blocks des Ankerelements in Innenlinienrichtung.

self-block

Die Länge des Ankerelements in Blockrichtung.

self-inline

Die Länge des Ankerelements in Innenlinienrichtung.

Hinweis: Wenn dieser Parameter weggelassen wird, wird die Abmessung standardmäßig 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(); äquivalent zu width: anchor-size(width);.

<length-percentage> Optional

Gibt die Größe an, die als Rückfallwert verwendet werden soll, wenn das Element nicht absolut oder fix positioniert ist oder das Ankerelement nicht existiert. Wenn dieser Parameter in einem Fall, in dem der Rückfallwert sonst verwendet würde, weggelassen wird, 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 repräsentiert, zu dem die Eigenschaftswerte des positionierten Elements relativ gesetzt sind. Es ist ein gültiger Wert für Größen-, Einfüge- und Randeigenschaften, die auf ankerpositionierten Elementen gesetzt sind.

Die zurückgegebene Länge ist die vertikale oder horizontale Größe eines Ankerelements oder seines enthältenden Blocks. Die verwendete Dimension wird durch den <anchor-size> Parameter definiert. Wenn dieser Parameter weggelassen wird, entspricht die verwendete Dimension der Achse der aufgesetzten Größen-, Positions- oder Rand-Eigenschaft. So 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 dem <anchor-name> Parameter spezifizierten 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 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 keine Elemente mit diesem Ankernamen übereinstimmen, wird der Rückfallwert verwendet. Wenn kein Rückfallwert enthalten war, wird die Deklaration ignoriert. Wenn zum Beispiel width: anchor-size(--foo width, 50px); height: anchor-size(--foo width); auf das positionierte Element angewendet wird, aber kein Anker namens --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 Randeigenschaften mit anchor-size() Werten hat, die darauf gesetzt sind, es jedoch kein ankerpositioniertes Element ist (es hat seine position Eigenschaft nicht auf absolute oder fixed gesetzt oder hat keinen Anker, der ihm über seine position-anchor Eigenschaft zugeordnet ist), wird der Rückfallwert verwendet, wenn einer verfügbar ist. Wenn kein Rückfallwert verfügbar ist, wird die Deklaration ignoriert.

Wenn zum Beispiel width: anchor-size(width, 50px); auf das positionierte Element gesetzt wird, aber kein Anker ihm zugeordnet ist, würde der Rückfallwert verwendet werden, sodass width einen berechneten Wert von 50px erhält.

Für detaillierte Informationen zu Ankerfunktionen und deren Verwendung, siehe die Modul-Startseite der CSS-Anker-Positionierung und den Anleitung zur Verwendung von CSS-Anker-Positionierung.

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 Kurzform
  • inset-block Kurzform
  • inset-block-end
  • inset-block-start
  • inset-inline Kurzform
  • inset-inline-end
  • inset-inline-start
• Randeigenschaften:
  • 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 häufigsten anchor-size() Funktionen, die Sie verwenden, werden sich einfach 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 angewandte Größe zu modifizieren.

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

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

Diese Regel stellt die Innenlänge des positionierten Elements auf das Vierfache der Innenlänge des Ankerelements ein, 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 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 hinzu, um den <body> hoch genug zu machen, um Scrollen zu erfordern, jedoch wurde dies der Übersichtlichkeit 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 deklarieren das anchor <div> als 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 Bezugspunkt beim Überprüfen der Dimensionen des positionierten Elements zu bieten, zum Beispiel mit 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: 100px;
}

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

Wir setzen einige deutliche 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 ist auf dieselbe 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, indem 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 zwei Drittel der Höhe des Ankerelements eingestellt, mit einer ähnlichen Technik.
• Randwerte sind enthalten, um etwas Abstand vom Ankerelement einzuhalten.

#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 Browser-Tools, um die ankerpositionierten Elemente zu inspizieren. Die erste Infobox ist 100px hoch und 200px breit, während die zweite Infobox eine Höhe von ungefähr 66.7px hat, wobei die width auf max-content standardmäßig 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-Anker-Positionierung
• CSS-Anker-Positionierung Modul