anchor-size()

Die Syntax der anchor-size() Funktion ist wie folgt:

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

Die Parameter sind:

<anchor-name> Optional

Der anchor-name Propertywert 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 ausgelassen, wird der Standardanker des Elements verwendet.

Hinweis: Die Angabe eines <anchor-name> innerhalb einer anchor-size() Funktion verknüpft oder verbindet kein Element mit einem Anker; es definiert lediglich, welcher Anker als Referenz für die Propertywerte des Elements verwendet werden soll.

<anchor-size> Optional

Gibt die Abmessung des Ankerelements an, zu der die Propertywerte des positionierten Elements relativ gesetzt werden sollen. 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 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, wird die Dimension auf den <anchor-size> Schlüsselbegriff eingestellt, der mit der Achse der Property übereinstimmt, in der die Funktion enthalten 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 fix positioniert ist oder das Ankerelement nicht existiert. Wenn dieser Parameter in einem Fall ausgelassen wird, in dem der Fallback ansonsten verwendet werden würde, ist die Deklaration ungültig.

Gibt einen <length> Wert zurück.

Die anchor-size() Funktion ermöglicht es, dass Größen-, Positions- und Randwerte eines positionierten Elements in Bezug auf die Abmessungen eines Ankerelements ausgedrückt werden können; sie gibt einen <length> Wert zurück, der die Dimension eines spezifischen Ankerelements darstellt, zu dem die Propertywerte des positionierten Elements relativ gesetzt werden. Es ist ein gültiger Wert für Größen-, Einfügungs- und Randproperties, die auf anchor-positionierten Elementen eingestellt werden.

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, stimmt die verwendete Dimension mit der Achse der Größe, Position oder Randproperty überein, auf der sie gesetzt ist. Beispielsweise:

• 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 Dimensionen verwendet wird, ist das Element mit dem im <anchor-name> Parameter angegebenen anchor-name. Wenn mehrere Elemente denselben Anker-Namen haben, wird das letzte Element mit diesem Anker-Namen in der DOM-Reihenfolge verwendet.

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

Wenn ein <anchor-name> Parameter enthalten ist und keine Elemente mit diesem Anker-Namen existieren, 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 sind, aber keine Anker mit dem Namen --foo im DOM existieren, wäre die width 50px und die height Deklaration hätte keine Wirkung.

Wenn ein Element Größen-, Positions- oder Randproperties mit anchor-size() Werten darauf gesetzt hat, aber es sich nicht um ein anchor-positioniertes Element handelt (es hat seine position Property nicht auf absolute oder fixed gesetzt oder ist nicht über seine position-anchor Property mit einem Anker verknüpft), wird der Fallback-Wert verwendet, wenn einer verfügbar ist. Wenn kein Fallback verfügbar ist, wird die Deklaration ignoriert.

Wenn zum Beispiel width: anchor-size(width, 50px); auf dem positionierten Element angegeben ist, aber kein Anker damit verknüpft ist, würde der Fallback-Wert verwendet, sodass width einen berechneten Wert von 50px erhält.

Für detaillierte Informationen zu Ankerfunktionen und ihrer Verwendung siehe die CSS-Ankerpositionierung Modul-Übersichtsseite und den Leitfaden zur Verwendung von CSS-Ankerpositionierung.

Zu den Eigenschaften, die eine anchor-size() Funktion als Wert akzeptieren, gehören:

• 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

Die häufigsten anchor-size() Funktionen, die Sie verwenden werden, beziehen sich einfach auf eine Dimension des Standardankers. Alternativ schließen Sie die anchor-size() Funktion innerhalb einer calc() Funktion ein, um die auf das positionierte Element angewendete Größe zu modifizieren.

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

.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 in einer calc() Funktion durchgeführt wird:

.positionedElem {
  inline-size: calc(anchor-size(self-inline) * 4);
}

<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>  

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. Wir fügen auch Fülltext hinzu, um den <body> so groß zu machen, dass Scrollen erforderlich ist, 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 Ankerelement, indem wir ihm einen anchor-name zuweisen. Die positionierten Elemente, bei denen ihre position Eigenschaften auf fixed gesetzt sind, sind über ihre position-anchor Eigenschaften mit dem Ankerelement verknüpft. Wir setzen auch absolute height und width Dimensionen auf den Anker, um einen Bezugspunkt beim Überprüfen der Dimensionen der positionierten Elemente zu bieten, zum Beispiel mit Entwicklerwerkzeugen im Browser:

.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 #ddd;
  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 Propertywerte auf die positionierten Elemente:

• Die positionierten Elemente sind mit unterschiedlichen position-area Werten an den Anker gebunden, die die Elemente an unterschiedlichen Stellen um das Ankerelement platzieren.
• Die height der ersten Infobox wird auf dieselbe Höhe wie das Ankerelement gesetzt: 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 verdoppelt wird.
• Die height der zweiten Infobox wird auf zwei Drittel der Höhe des Ankerelements gesetzt, unter Verwendung einer ähnlichen Technik.
• Randwerte sind enthalten, um etwas Abstand vom Ankerelement zu schaffen.

#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 anchor-positionierten Elemente zu inspizieren. Die erste Infobox wird 100px hoch und 200px breit sein, während die zweite Infobox eine Höhe von ungefähr 66,7px hat, wobei die width standardmäßig auf max-content eingestellt ist.

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

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