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 vor der Verwendung auf produktiven Webseiten.
Die anchor-size()
CSS Funktion ermöglicht das Festlegen der Größe, Position und Abstände von Elementen, die relativ zu den Dimensionen von Ankerelementen positioniert sind. Sie gibt die <length>
einer bestimmten Seite des Zielankerelements zurück. anchor-size()
ist nur gültig, wenn es innerhalb der Werte von Ankerelementen für die Größen-, Einfügungs- und Abstands-Eigenschaften verwendet wird.
Für detaillierte Informationen zu Ankerfunktionen und deren Verwendung, siehe die CSS Ankerpositionierung Modulseite und den Verwendung von CSS Ankerpositionierung Leitfaden.
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(--myAnchor width);
block-size: anchor-size(--myAnchor block);
/* sizing relative to named anchor's side with fallback */
width: anchor-size(--myAnchor width, 50%);
block-size: anchor-size(--myAnchor block, 200px);
/* positioning relative to anchor side */
left: anchor-size(width);
inset-inline-end: anchor-size(--myAnchor height, 100px);
/* setting margin relative to anchor side */
margin-left: calc(anchor-size(width) / 4);
margin-block-start: anchor-size(--myAnchor self-block, 20px);
Parameter
Die Syntax der Funktion anchor-size()
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 den Sie die Größe, Position oder Abstände des Elements relativ einstellen möchten. Dies ist ein<dashed-ident>
Wert. Wenn weggelassen, wird der Standardanker des Elements verwendet.Hinweis: Das Angeben eines
<anchor-name>
innerhalb eineranchor-size()
Funktion verknüpft oder verbindet ein Element nicht mit einem Anker; es definiert lediglich, relativ zu welchem Anker die Eigenschaftswerte des Elements eingestellt werden sollen. <anchor-size>
Optional-
Gibt die Dimension des Ankerelements an, zu der die Eigenschaftswerte des positionierten Elements relativ eingestellt werden. Gültige Werte beinhalten:
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 weggelassen wird, entspricht die Dimension standardmäßig dem
<anchor-size>
Schlüsselbegriff, der der Achse der Eigenschaft entspricht, 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. Wenn dieser Parameter in einem Fall weggelassen wird, in dem der Fallback sonst verwendet würde, ist die Anweisung ungültig.
Hinweis:
Die Ankerdimension, zu der Sie die Eigenschaftswerte des positionierten Elements relativ einstellen, muss nicht entlang der gleichen Achse wie der einzustellende Größenwert liegen. 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, dass die Größen-, Positions- und Abstandswerte 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 repräsentiert, zu dem die Eigenschaftswerte des positionierten Elements relativ eingestellt werden. Es ist ein gültiger Wert für Größen-, Einfügungs- und Abstands-Eigenschaften, die auf Ankerelemente eingestellt 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 Eigenschaft, auf die sie eingestellt ist. So zum Beispiel:
width: anchor-size()
ist gleichbedeutend mitwidth: anchor-size(width)
.top: anchor-size()
ist gleichbedeutend mittop: anchor-size(height)
.margin-inline-end: anchor-size()
ist gleichbedeutend mitmargin-inline-end: anchor-size(self-inline)
.margin-inline-end: anchor-size()
ist auch gleichbedeutend mitmargin-inline-end: anchor-size(width)
in horizontalen Schreibrichtungen, odermargin-inline-end: anchor-size(height)
in vertikalen Schreibrichtungen.
Das Ankerelement, das als Grundlage für die Dimensionenlä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 in der DOM-Reihenfolge mit diesem Ankernamen verwendet.
Wenn kein <anchor-name>
Parameter in den Funktionsaufruf aufgenommen wird, wird der Standardanker des Elements verwendet, der in seiner position-anchor
Eigenschaft referenziert oder über das anchor
HTML-Attribut mit dem Element verbunden ist.
Wenn ein <anchor-name>
Parameter enthalten ist und keine Element mit diesem Ankernamen übereinstimmt, wird der Fallback-Wert verwendet. Wenn kein Fallback enthalten ist, wird die Anweisung ignoriert. Zum Beispiel, wenn width: anchor-size(--foo width, 50px); height: anchor-size(--foo width);
auf dem positionierten Element spezifiziert wird, aber kein Anker mit dem Namen --foo
im DOM existiert, wäre die width
50px
und die height
Anweisung hätte keinen Effekt.
Wenn ein Element Größen-, Positions- oder Abstandseigenschaften mit anchor-size()
Werten darauf gesetzt hat, aber es sich nicht um ein Ankerelement handelt (es hat seine position
Eigenschaft nicht 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 Anweisung ignoriert.
Zum Beispiel, wenn width: anchor-size(width, 50px);
auf dem positionierten Element angegeben wird, aber kein Anker damit verbunden ist, würde der Fallback-Wert verwendet, weshalb width
einen berechneten Wert von 50px
hätte.
Für detaillierte Informationen zu Ankerfunktionen und deren Verwendung, siehe die CSS Ankerpositionierung Modulseite und den Verwendung von CSS Ankerpositionierung Leitfaden.
Eigenschaften, die anchor-size()
Funktionswerte akzeptieren
Die Eigenschaften, die eine anchor-size()
Funktion als Wert akzeptieren, umfassen:
- Größen-Eigenschaften:
- Einfüge-Eigenschaften:
bottom
left
right
top
inset
Kurzforminset-block
Kurzforminset-block-end
inset-block-start
inset-inline
Kurzforminset-inline-end
inset-inline-start
- Abstands-Eigenschaften:
margin
Kurzformmargin-bottom
margin-left
margin-right
margin-top
margin-block
Kurzformmargin-block-end
margin-block-start
margin-inline
Kurzformmargin-inline-end
margin-inline-start
Verwendung von anchor-size()
innerhalb von calc()
Die häufigsten anchor-size()
Funktionen, die Sie verwenden werden, beziehen sich nur auf eine Dimension des Standardankers. Alternativ verwenden Sie die anchor-size()
Funktion innerhalb einer calc()
Funktion, um die Größe anzupassen, die auf das positionierte Element angewendet wird.
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 Inline-Größe des positionierten Elements auf das Vierfache der Inline-Größe des Ankerelements ein, 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 unter Verwendung von 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, dies wurde jedoch der Kürze wegen 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, deren position
Eigenschaften auf fixed
gesetzt sind, 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 Abmessungen des positionierten Elements bereitzustellen, zum Beispiel mit Browser-Entwicklertools:
.anchor {
anchor-name: --myAnchor;
width: 100px;
height: 100px;
}
.infobox {
position-anchor: --myAnchor;
position: fixed;
}
Wir setzen einige unterschiedliche Eigenschaftswerte auf die positionierten Elemente:
- Die positionierten Elemente sind mit dem Anker durch verschiedene
position-area
Werte verbunden, die die Elemente an unterschiedlichen Stellen um das Ankerelement positionieren. - Die
height
der ersten Infobox wird auf dieselbe Höhe wie das Ankerelement eingestellt:anchor-size(height)
gibt die Höhe des Ankerelements zurück. Diewidth
des Elements wird auf das Doppelte der Breite des Ankerelements unter Verwendung deranchor-size()
Funktion innerhalb einercalc()
Funktion eingestellt:anchor-size(width)
ruft die Breite des Ankerelements ab, die dann mit zwei multipliziert wird. - Die
height
der zweiten Infobox wird auf zwei Drittel der Höhe des Ankerelements eingestellt, wobei eine ähnliche Technik verwendet wird. - Margenwerte sind enthalten, um einen gewissen Abstand zum Ankerelement zu gewährleisten.
#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, während die zweite Infobox eine Höhe von ungefähr 66.7px
hat, wobei die width
standardmäßig auf max-content
gesetzt ist.
Position und Marge Beispiel
Spezifikationen
Specification |
---|
CSS Anchor Positioning # anchor-size-fn |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
anchor-size() | ||||||||||||
Valid in inset and margin property values. |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
Siehe auch
anchor-name
position-anchor
anchor()
Funktion- Verwendung von CSS Ankerpositionierung Leitfaden
- CSS Ankerpositionierung Modul