anchor-size()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Die anchor-size()
CSS Funktion ermöglicht es, Elemente mit Ankerpositionierung relativ zu den Abmessungen von Ankerelementen zu skalieren. Sie gibt die <length>
einer bestimmten Seite des Zielankerelements zurück. anchor-size()
ist nur gültig, wenn sie innerhalb der Werte der Skalierungseigenschaften von Anker-positionierten Elementen verwendet wird.
Für detaillierte Informationen zu Anker-Funktionen und ihrer Verwendung siehe die Modul-Startseite CSS-Ankerpositionierung und den Leitfaden zur Verwendung der CSS-Ankerpositionierung.
Syntax
/* size of anchor side */
width: anchor-size(width);
block-size: anchor-size(block);
height: calc(anchor-size(self-inline) + 2em);
/* size of named anchor side */
width: anchor-size(--myAnchor width);
block-size: anchor-size(--myAnchor block);
/* size of named anchor side with fallback */
width: anchor-size(--myAnchor width, 50%);
block-size: anchor-size(--myAnchor block, 200px);
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 das Element relativ skaliert werden soll. Dies ist ein<dashed-ident>
Wert. Wird dieser Wert weggelassen, wird der Standardanker des Elements verwendet.Hinweis: Die Angabe eines
<anchor-name>
innerhalb eineranchor-size()
Funktion verknüpft oder verbindet ein Element nicht mit einem Anker; es skaliert das Element nur relativ zu diesem Anker. <anchor-size>
Optional-
Gibt die Dimension des Ankerelements an, zu der das positionierte Element relativ skaliert wird. 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 Block-Richtung.
inline
-
Die Länge des enthältenden Blocks des Ankerelements in Inline-Richtung.
self-block
-
Die Länge des Ankerelements in Block-Richtung.
self-inline
-
Die Länge des Ankerelements in Inline-Richtung.
Hinweis: Wenn dieser Parameter weggelassen wird, wird die Dimension standardmäßig auf den
<anchor-size>
Schlüsselbegriff gesetzt, der zur Achse der Eigenschaft passt, in der die Funktion enthalten ist. Zum Beispiel istwidth: anchor-size();
gleichbedeutend mitwidth: 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. Wird dieser Parameter weggelassen, wenn der Fallback sonst verwendet würde, ist die Deklaration ungültig.
Hinweis: Die Ankerdimension, zu der Sie das positionierte Element relativ skalieren, muss nicht entlang der gleichen Achse wie der einzustellende Größenwert verlaufen. Zum Beispiel ist width: anchor-size(height)
gültig.
Rückgabewert
Gibt einen <length>
Wert zurück.
Beschreibung
Die anchor-size()
Funktion ermöglicht es, die Skalierungswerte eines positionierten Elements in Bezug auf die Dimensionen eines Ankerelements auszudrücken; sie gibt einen <length>
Wert zurück, der die Dimension eines spezifischen Ankerelements darstellt, zu dem das positionierte Element relativ skaliert wird. Es ist ein gültiger Wert für die auf Anker-positionierten Elementen gesetzten Skalierungseigenschaften.
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, passt die verwendete Dimension zur Achse der Skalierungseigenschaft, auf die sie gesetzt ist.
Das als Grundlage für die Längenbestimmung verwendete Ankerelement ist das Element, dessen anchor-name
im <anchor-name>
Parameter angegeben ist. Wenn mehr als ein Element denselben Ankernamen hat, wird das letzte Element mit diesem Ankernamen in der DOM-Reihenfolge verwendet.
Wird im Funktionsaufruf kein <anchor-name>
Parameter eingeschlossen, wird der Standardanker des Elements, der in seiner position-anchor
Eigenschaft referenziert oder über das anchor
HTML-Attribut mit dem Element verknüpft ist, verwendet.
Wird ein <anchor-name>
Parameter eingeschlossen und es gibt keine Elemente, die diesem Ankernamen entsprechen, 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 wäre, 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 Skalierungseigenschaften mit anchor-size()
Werten hat, es aber kein Anker-positioniertes Element ist (es hat seine position
Eigenschaft nicht auf absolute
oder fixed
gesetzt oder hat keinen Anker über seine position-anchor
Eigenschaft damit verknüpft), 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 wäre, aber kein Anker damit verbunden wäre, würde der Fallback-Wert verwendet, sodass width
einen berechneten Wert von 50px
erhielte.
Für detaillierte Informationen zu Anker-Funktionen und ihrer Verwendung siehe die Modul-Startseite CSS-Ankerpositionierung und den Leitfaden zur Verwendung der CSS-Ankerpositionierung.
Eigenschaften, die anchor-size()
Funktionswerte akzeptieren
Zu den Skalierungseigenschaften, die einen anchor-size()
Funktionswert als Wert akzeptieren, gehören:
Verwendung von anchor-size()
innerhalb von calc()
Die häufigsten anchor-size()
Funktionen, die Sie verwenden, beziehen sich nur auf eine Dimension des Standardankers. Alternativ können Sie die anchor-size()
Funktion innerhalb einer calc()
Funktion einschließen, um die auf das positionierte Element angewandte Größe zu ändern.
Zum Beispiel skaliert diese Regel die Breite des positionierten Elements auf die gleiche Breite wie das Standardankerelement:
.positionedElem {
width: anchor-size(width);
}
Diese Regel skaliert 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
Beispiele
Grundlegende anchor-size()
Verwendung
Dieses Beispiel zeigt zwei Elemente, die relativ zu einem Anker positioniert und mit anchor-size()
Funktionen skaliert 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 den <body>
hoch genug zu machen, um Scrollen erforderlich zu machen, aber dies wurde um der Kürze willen ausgeblendet.
<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>
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 dem Anker, um einen Referenzpunkt beim Überprüfen der Dimensionen der positionierten Elemente bereitzustellen, zum Beispiel mit den Browserentwickler-Tools:
.anchor {
anchor-name: --myAnchor;
width: 100px;
height: 100px;
}
.infobox {
position-anchor: --myAnchor;
position: fixed;
}
Wir setzen einige spezifische Eigenschaftswerte auf die positionierten Elemente:
- Die positionierten Elemente sind mit dem Anker über verschiedene
position-area
Werte verbunden, die die Elemente an verschiedenen Stellen um das Ankerelement positionieren. - Die
height
der ersten Infobox ist auf die gleiche Höhe wie das Ankerelement gesetzt:anchor-size(height)
gibt die Höhe des Ankerelements zurück. Diewidth
des Elements ist auf das Doppelte der Breite des Ankerelements gesetzt, indem dieanchor-size()
Funktion innerhalb einercalc()
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 gesetzt, unter Verwendung einer ähnlichen Technik. - Randwerte sind eingeschlossen, 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 Anker-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
haben wird, wobei die width
standardmäßig auf max-content
gesetzt ist.
Spezifikationen
Specification |
---|
CSS Anchor Positioning # anchor-size-fn |
Browser-Kompatibilität
BCD tables only load in the browser