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 Wert der anchor-name Eigenschaft eines Ankerelements, relativ zu dem Sie die Größe, Position oder die Ränder des Elements einstellen möchten. Dies ist ein <dashed-ident> Wert. Wenn er weggelassen wird, 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, welchen 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 eingestellt 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 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 ausgelassen wird, ist die Dimension standardmäßig der <anchor-size>-Begriff, der zur Achse der Eigenschaft passt, in der die Funktion eingeschlossen ist. Zum Beispiel ist width: anchor-size(); gleichbedeutend mit 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, in dem der Fallback sonst verwendet würde, nicht angegeben wird, ist die Deklaration ungültig.

Rückgabewert

Gibt einen <length> Wert zurück.

Beschreibung

Die anchor-size()-Funktion ermöglicht es, dass Größen-, Positions- und Rand-Werte eines positionierten Elements in Bezug auf die Dimensionen eines Ankerelements ausgedrückt werden können; sie gibt einen <length> Wert zurück, der die Dimension eines bestimmten Ankerelements darstellt, auf die sich die Eigenschaftswerte des positionierten Elements beziehen. Es ist ein gültiger Wert für bei ankerpositionierten Elementen gesetzte Größen-, Einfüge- und Rand-Eigenschaften.

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 ausgelassen wird, entspricht die verwendete Dimension der Achse der Größe, Position oder der Rand-Eigenschaft, auf die sie gesetzt wurde. Ein 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 Schreibmodi oder margin-inline-end: anchor-size(height) in vertikalen Schreibmodi.

Das Ankerelement, das als Grundlage für die Dimensionalänge verwendet wird, ist das Element mit dem in der <anchor-name>-Parameter angegebenen anchor-name. Wenn mehr als ein Element denselben Ankernamen hat, wird das zuletzt mit diesem Ankernamen im DOM-Ordnung stehende Element verwendet.

Wenn kein <anchor-name>-Parameter im Funktionsaufruf enthalten ist, wird der Standardanker des Elements, der in seiner position-anchor Eigenschaft referenziert ist oder mit dem Element über das anchor HTML-Attribut verknüpft ist, verwendet.

Wenn ein <anchor-name>-Parameter enthalten ist und keine Elemente zu diesem Ankernamen passen, 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 dem positionierten Element angegeben wurde, aber kein Anker mit dem Namen --foo im DOM existiert, würde die width 50px sein und die height Deklaration hätte keine Wirkung.

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

Zum Beispiel, wenn width: anchor-size(width, 50px); auf dem positionierten Element angegeben wurde, aber kein Anker damit verbunden war, würde der Fallback-Wert verwendet, so dass width einen berechneten Wert von 50px hätte.

Für detaillierte Informationen zu Ankerfunktionen und deren Verwendung, siehe die CSS-Anker-Positionierung Modul-Startseite 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, sind:

• 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
• Einfüge-Eigenschaften:
  • bottom
  • left
  • right
  • top
  • inset shorthand
  • inset-block shorthand
  • inset-block-end
  • inset-block-start
  • inset-inline shorthand
  • inset-inline-end
  • inset-inline-start
• Rand-Eigenschaften:
  • margin shorthand
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-block shorthand
  • margin-block-end
  • margin-block-start
  • margin-inline shorthand
  • margin-inline-end
  • margin-inline-start

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

Die am häufigsten verwendeten anchor-size()-Funktionen beziehen sich einfach auf eine Dimension des Standardankers. Alternativ kann die anchor-size()-Funktion innerhalb einer calc() Funktion verwendet werden, um die auf das positionierte Element angewendete 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 erfolgt:

.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 den <body> hoch genug zu machen, um ein Scrollen zu erfordern, aber dies wurde der Übersichtlichkeit 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, deren position Eigenschaften auf fixed gesetzt sind, werden über ihre position-anchor Eigenschaften mit dem Ankerelement verknüpft. Wir setzen außerdem absolute height und width Dimensionen auf den Anker, um einen Bezugspunkt beim Überprüfen der Dimensionen der positionierten Elemente zu bieten, beispielsweise mit Browser-Entwicklerwerkzeugen:

.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 unterschiedlichen position-area Werten an den Anker gebunden, die die Elemente an verschiedenen Stellen um das Ankerelement herum positionieren.
• Die height des ersten Infobox ist 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 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 Ankerhöhe gesetzt, unter Verwendung 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

Verwenden Sie Ihre Browser-Werkzeuge, 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 hat, wobei die width auf max-content standardmäßig 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
• Anleitung zur Verwendung von CSS-Anker-Positionierung
• CSS-Anker-Positionierung Modul