CSS/Funktionen/anchor-size()

Browserunterstützung
caniuse.com

Die CSS-Funktion anchor-size() ermöglicht es, die Größe, Position und Ränder von ankerpositionierten Elementen relativ zu den Abmessungen der Ankerelemente festzulegen. Sie gibt die <Länge> einer bestimmten Seite des Zielankerelements zurück. anchor-size() ist nur gültig, wenn es innerhalb der Eigenschaften sizing, inset und margin von ankerpositionierten Elementen verwendet wird.

anwendbar auf

 

Parameter

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

• optionaler anchor-name des Ankerelements, relativ zu dem die Seite des Elements positioniert werden soll.
  Wenn dieser Wert weggelassen wird, wird der Standardanker des Elements verwendet, auf den in der Eigenschaft position-anchor verwiesen wird.
• <anchor-size> - Gibt die Dimension des Ankerelements an, relativ zu der die Eigenschaftswerte des positionierten Elements festgelegt werden.
  • width, height, block, inline
  • self-block, self-inline
• optionaler Prozentwert als Fallback

Beispiel

/* 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);

 

Beachten Sie: Die Angabe eines <anchor-name> innerhalb einer anchor-size()-Funktion verknüpft ein Element nicht mit einem Anker, sondern positioniert das Element lediglich relativ zu diesem Anker. Die CSS-Eigenschaft position-anchor ist weiterhin erforderlich, um die Verknüpfung herzustellen.

Siehe auch

• Infobox
  • Anchor positioning

Weblinks

• CSSWG: #anchor-size-fn
• MDN: anchor-size()
• Browser-Support: caniuse.com