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, auf das Sie die Größe, Position oder Abstände des Elements relativ einstellen möchten. Dies ist ein <dashed-ident> Wert. Falls weggelassen, wird der Standardanker des Elements verwendet.

Hinweis: Die Angabe eines <anchor-name> innerhalb einer anchor-size() Funktion verknüpft oder bindet ein Element nicht an einen Anker; es definiert lediglich, auf welchen Anker sich die Eigenschaftswerte des Elements beziehen 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 containing block des Ankerelements in Blockrichtung.

inline

Die Länge des containing block des Ankerelements in Inlinerichtung.

self-block

Die Länge des Ankerelements in Blockrichtung.

self-inline

Die Länge des Ankerelements in Inlinerichtung.

Hinweis: Falls dieser Parameter weggelassen wird, wird die Dimension auf den <anchor-size> Schlüsselbegriff gesetzt, der zur Achse der Eigenschaft passt, in der die Funktion enthalten ist. Zum Beispiel entspricht width: anchor-size(); der Angabe 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 in einem Fall weggelassen wird, in dem der Fallback sonst verwendet werden 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 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, zu der die Eigenschaftswerte des positionierten Elements relativ gesetzt sind. Es ist ein gültiger Wert für Größen-, Einfüge- und Abstandseigenschaften auf ankerpositionierten Elementen.

Die zurückgegebene Länge ist die vertikale oder horizontale Größe eines Ankerelements oder seines containing block. Die verwendete Dimension wird durch den <anchor-size> Parameter definiert. Wenn dieser Parameter weggelassen wird, passt die verwendete Dimension zur Achse der Eigenschaft für Größe, Position oder Abstand, 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 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 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 ist 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 Fallback-Wert verwendet. Wenn kein Fallback angegeben wurde, wird die Deklaration ignoriert. Zum Beispiel, wenn width: anchor-size(--foo width, 50px); height: anchor-size(--foo width); auf dem positionierten Element angegeben wäre, aber kein Anker namens --foo im DOM existiert, wäre die width 50px und die height Deklaration hätte keinen Effekt.

Wenn ein Element Größen-, Positions- oder Abstandseigenschaften mit auf ihnen gesetzten anchor-size() Werten hat, aber kein ankerpositioniertes Element ist (es hat nicht die position Eigenschaft auf absolute oder fixed gesetzt oder ist nicht über seine position-anchor Eigenschaft mit einem Anker verbunden), wird der Fallback-Wert verwendet, falls 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 wäre, aber kein Anker damit verbunden war, 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 das CSS Ankerpositionierung Modul und den Anleitung zur Verwendung von CSS Ankerpositionierung.

Eigenschaften, die anchor-size() Funktionswerte akzeptieren

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

• 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
• Randeigenschaften:
  • bottom
  • left
  • right
  • top
  • inset verkürzt
  • inset-block verkürzt
  • inset-block-end
  • inset-block-start
  • inset-inline verkürzt
  • inset-inline-end
  • inset-inline-start
• Abständeigenschaften:
  • margin verkürzt
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-block verkürzt
  • margin-block-end
  • margin-block-start
  • margin-inline verkürzt
  • margin-inline-end
  • margin-inline-start

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

Die am häufigsten verwendeten anchor-size() Funktionen beziehen sich nur auf eine Dimension des Standardankers. Alternativ kann die anchor-size() Funktion innerhalb einer calc() Funktion verwendet werden, um die dem positionierten Element zugeordnete Größe zu modifizieren.

Beispielsweise wird durch diese Regel die Breite des positionierten Elements gleich der Breite des Standardanker-Elements gemacht:

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

Diese Regel setzt die Inline-Größe des positionierten Elements auf das 4-fache 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 unter Verwendung von 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 werden. Wir fügen auch Fülltext hinzu, um den <body> hoch genug zu machen, um das Scrollen zu erzwingen, aber dieser wurde zur Kürze 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, sind über deren position-anchor Eigenschaften mit dem Ankerelement verbunden. Wir setzen auch absolute height und width Dimensionen auf dem Anker, um einen Bezugspunkt beim Überprüfen der Dimensionen des positionierten Elements zu bieten, 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 #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 den positionierten Elementen:

• Die positionierten Elemente sind mit dem Anker über verschiedene position-area Werte verbunden, die die Elemente an verschiedenen Orten um das Ankerelement herum positionieren.
• Die height des ersten Infokastens 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 ist auf das Doppelte der Breite des Ankerelements eingestellt, indem die anchor-size() Funktion innerhalb einer calc() Funktion verwendet wird: anchor-size(width) ruft die Breite des Ankerelements ab, die anschließend mit zwei multipliziert wird.
• Die height des zweiten Infokastens ist auf zwei Drittel der Höhe des Ankerelements eingestellt, indem eine ähnliche Technik verwendet wird.
• Es sind Randwerte enthalten, um eine gewisse Trennung 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

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

Beispiel für Position und Abstand

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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