Einführung in die CSS-Anchor Positioning API

Una Kravets

Veröffentlicht: 10. Mai 2024

Die CSS Anchor Positioning API ist ein echter Gamechanger in der Webentwicklung, da Sie damit Elemente nativ relativ zu anderen Elementen positionieren können, die als Anker bezeichnet werden. Diese API vereinfacht komplexe Layoutanforderungen für viele Benutzeroberflächenfunktionen wie Menüs und Untermenüs, Kurzinfos, Auswahlmöglichkeiten, Labels, Karten, Einstellungsdialoge und vieles mehr. Dank der integrierten Ankerpositionierung im Browser können Sie Benutzeroberflächen mit mehreren Ebenen erstellen, ohne auf Drittanbieterbibliotheken zurückgreifen zu müssen. Dadurch eröffnen sich unendlich viele kreative Möglichkeiten.

Die Ankerpositionierung ist seit Chrome 125 verfügbar.

Unterstützte Browser

  • Chrome: 125.
  • Edge: 125.
  • Firefox: nicht unterstützt
  • Safari: Nicht unterstützt.

Quelle

Kernkonzepte: Anker und positionierte Elemente

Im Mittelpunkt dieser API steht die Beziehung zwischen Anchors (Anker) und positioned Elements (Positionierte Elemente). Ein Anker ist ein Element, das mithilfe der Eigenschaft anchor-name als Bezugspunkt festgelegt wird. Ein positioniertes Element ist ein Element, das relativ zu einem Anker mithilfe der position-anchor-Eigenschaft oder explizit anchor-name in seiner Positionierungslogik platziert wird.

Verankerung von Elementen und positionierten Elementen.

Anker einrichten

Das Erstellen eines Ankers ist ganz einfach. Wenden Sie die Anchor-Name-Eigenschaft auf das ausgewählte Element an und weisen Sie ihm eine eindeutige Kennung zu. Diese eindeutige Kennung muss wie eine CSS-Variable mit einem doppelten Bindestrich vorangestellt werden.

.anchor-button {
    anchor-name: --anchor-el;
}

Nachdem .anchor-button einen Ankernamen zugewiesen wurde, dient es als Anker, an dem andere Elemente ausgerichtet werden können. Sie können diesen Anker auf zwei Arten mit anderen Elementen verbinden:

Implizite Anker

Die erste Möglichkeit, einen Anker mit einem anderen Element zu verbinden, ist ein impliziter Anker, wie im folgenden Codebeispiel. Die Property position-anchor wird dem Element hinzugefügt, das mit dem Anker verbunden werden soll, und hat den Namen des Ankers (in diesem Fall --anchor-el) als Wert.

.positioned-notice {
    position-anchor: --anchor-el;
}

Bei einer impliziten Ankerbeziehung können Sie Elemente mit der Funktion anchor() positionieren, ohne den Ankernamen im ersten Argument explizit anzugeben.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Explizite Anker

Alternativ können Sie den Ankernamen direkt in der Ankerfunktion verwenden (z. B. top: anchor(--anchor-el bottom). Dies wird als expliziter Anker bezeichnet und kann nützlich sein, wenn Sie an mehreren Elementen ankern möchten. Weitere Informationen finden Sie im Beispiel unten.

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Elemente relativ zu Ankern positionieren

Diagramm zur Positionierung von Ankern mit physikalischen Eigenschaften.

Die Positionierung der Anker baut auf der absoluten CSS-Positionierung auf. Wenn Sie Positionswerte verwenden möchten, müssen Sie dem positionierten Element position: absolute hinzufügen. Verwenden Sie dann die Funktion anchor(), um die Positionierungswerte anzuwenden. Wenn Sie ein angedocktes Element beispielsweise links oben am angedockten Element positionieren möchten, verwenden Sie die folgende Positionierung:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}
Diagramm zur Positionierung der Kanten des positionierten Elements

Jetzt ist ein Element an ein anderes angedockt, wie in der folgenden Abbildung dargestellt.

Screenshot der Demo

Für die Verwendung der logischen Positionierung dieser Werte gelten folgende Entsprechungen:

  • top = inset-block-start
  • left= inset-inline-start
  • bottom = inset-block-end
  • right= inset-inline-end

Positioniertes Element mit anchor-center zentrieren

Damit Sie das an einem Anker positionierte Element leichter relativ zum Anker zentrieren können, gibt es den neuen Wert anchor-center, der mit den Eigenschaften justify-self, align-self, justify-items und align-items verwendet werden kann.

In diesem Beispiel wird das vorherige Beispiel geändert, indem das positionierte Element mit justify-self: anchor-center über dem Anker zentriert wird.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

Screenshot der Demo

Mehrere Anker

Elemente können an mehr als einem Anker verankert werden. Das bedeutet, dass Sie möglicherweise Positionswerte festlegen müssen, die relativ zu mehr als einem Anker positioniert sind. Verwenden Sie dazu die Funktion anchor() und geben Sie im ersten Argument explizit an, auf welchen Anker Sie verweisen. Im folgenden Beispiel ist die linke obere Ecke eines positionierten Ankers an der unteren rechten Ecke eines Ankers und die untere rechte des positionierten Elements oben links des zweiten Ankers verankert:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

Screenshot der Demo

Position mit inset-area

Zusätzlich zur standardmäßigen Ausrichtung aus der absoluten Positionierung gibt es in der API für die Anordnung einen neuen Layoutmechanismus namens „Eingefügter Bereich“.

Der eingefügte Bereich erleichtert das Platzieren von Ankerelementen relativ zu ihren jeweiligen Ankern. Für die Funktion wird ein Raster mit 9 Zellen verwendet, bei dem sich das Verankerungselement in der Mitte befindet.

Verschiedene Positionierungsoptionen für den eingefügten Bereich, dargestellt auf dem 9-Zellen-Raster

Wenn Sie anstelle der absoluten Positionierung den eingefügten Bereich verwenden möchten, verwenden Sie das Attribut inset-area mit physischen oder logischen Werten. Beispiel:

  • Oben mittig: inset-area: top oder inset-area: block-start
  • Links Mitte: inset-area: left oder inset-area: inline-start
  • Unten in der Mitte: inset-area: bottom oder inset-area: block-end
  • Rechtszentriert: inset-area: right oder inset-area: inline-end

Screenshot der Demo

Größe von Elementen mit anchor-size() anpassen

Mit der Funktion anchor-size(), die ebenfalls zur API für die Ankerpositionierung gehört, können Sie die Größe oder Position eines an einem Anker positionierten Elements anhand der Größe des Ankers (Breite, Höhe oder Inline- und Blockgröße) festlegen.

Im folgenden CSS-Code wird ein Beispiel für die Verwendung dieser Funktion für die Höhe gezeigt. Dabei wird anchor-size(height) in einer calc()-Funktion verwendet,um die maximale Höhe der Kurzinfo auf das Doppelte der Höhe des Ankers festzulegen.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

Screenshot der Demo

Anker mit Elementen der obersten Ebene wie Pop-ups und Dialogfeldern verwenden

Die Anordnung von Ankern funktioniert hervorragend mit Elementen der obersten Ebene wie popover. und <dialog>. Während diese Elemente in einer vom Rest der DOM-Unterstruktur getrennten Ebene platziert werden, können Sie sie mithilfe der Positionierung von Anker an eine Tethering-Verbindung zurückführen und mit Elementen, die sich nicht im obersten Layer befinden, mit scrollen. Das ist ein großer Vorteil von mehrschichtigen Benutzeroberflächen.

Im folgenden Beispiel werden mehrere Pop-ups mit Kurzinfos über eine Schaltfläche geöffnet. Die Schaltfläche ist der Anker und die Kurzinfo ist das positionierte Element. Sie können das positionierte Element wie jedes andere verankerte Element gestalten. In diesem Beispiel sind anchor-name und position-anchor Inline-Styles für die Schaltfläche und die Kurzinfo. Da jeder Anker einen eindeutigen Ankernamen benötigt, ist das Einfügen beim Generieren dynamischer Inhalte die einfachste Methode.

Screenshot der Demo

Ankerpositionen mit @position-try anpassen

Nachdem Sie die erste Position des Ankers festgelegt haben, können Sie sie anpassen, wenn der Anker die Ränder des enthaltenden Blocks erreicht. Wenn Sie alternative Ankerpositionen erstellen möchten, können Sie die Direktive @position-try zusammen mit der Property position-try-options verwenden.

Im folgenden Beispiel wird rechts neben einem Menü ein Untermenü angezeigt. Die API für die Ankerpositionierung eignet sich hervorragend für Menüs und Untermenüs in Kombination mit dem Popover-Attribut, da diese Menüs in der Regel an einer Triggerschaltfläche verankert sind.

Wenn für dieses Untermenü nicht genügend horizontaler Platz vorhanden ist, können Sie es stattdessen unter das Menü verschieben. Legen Sie dazu zuerst die Startposition fest:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

Richten Sie dann mit @position-try Ihre Fallback-Positionen ein:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Verbinden Sie die beiden schließlich mit position-try-options. Zusammen sieht das so aus:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Keywords für die automatische Positionierung von Ankern

Wenn Sie eine grundlegende Anpassung vornehmen möchten, z. B. ein Umdrehen von oben nach unten oder von links nach rechts (oder beides), können Sie den Schritt zum Erstellen benutzerdefinierter @position-try-Deklarationen überspringen und die integrierten, browserunterstützten Schlüsselwörter für das Umdrehen wie flip-block und flip-inline verwenden. Sie können als Platzhalter für benutzerdefinierte @position-try-Deklarationen verwendet werden und miteinander kombiniert werden:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Flip-Keywords können Ihren Ankercode erheblich vereinfachen. Mit nur wenigen Zeilen können Sie einen voll funktionsfähigen Anker mit alternativen Positionen erstellen:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

position-visibility für Anker in untergeordneten Scrollern

In einigen Fällen kann es sinnvoll sein, ein Element in einem untergeordneten Scroller der Seite zu verankern. In diesen Fällen können Sie die Sichtbarkeit des Ankers mit position-visibility steuern. Wann bleibt der Anker im Bild? Wann verschwindet er? Mit dieser Funktion haben Sie die Kontrolle über diese Optionen. Verwenden Sie position-visibility: anchors-visible, wenn das positionierte Element sichtbar bleiben soll, bis der Anker nicht mehr sichtbar ist:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

Alternativ können Sie position-visibility: no-overflow verwenden, um zu verhindern, dass der Anker den Container überläuft.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

Feature-Erkennung und Polyfill

Da die Browserunterstützung derzeit eingeschränkt ist, sollten Sie diese API mit Vorsicht verwenden. Sie können zuerst direkt im Preisvergleichsportal mithilfe der Funktionsabfrage @supports nach Unterstützung suchen. Dazu müssen Sie Ihre Ankerstile in Folgendes einschließen:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Außerdem können Sie die Funktion für die Ankerpositionierung mit dem CSS-Ankerpositionierungs-Polyfill von Oddbird verwenden, das in Firefox 54, Chrome 51, Edge 79 und Safari 10 verfügbar ist. Diese Polyfill-Version unterstützt die meisten grundlegenden Funktionen für Ankerpositionen. Die aktuelle Implementierung ist jedoch nicht vollständig und enthält einige veraltete Syntax. Sie können den unpkg-Link verwenden oder das Paket direkt in einen Paketmanager importieren.

Hinweis zur Barrierefreiheit

Mit der API für die Ankerpositionierung kann ein Element zwar relativ zu anderen positioniert werden, es wird dadurch aber keine sinnvolle semantische Beziehung zwischen ihnen hergestellt. Wenn zwischen dem Ankerelement und dem positionierten Element eine semantische Beziehung besteht (z. B. ist das positionierte Element ein Kommentar in der Seitenleiste zum Ankertext), können Sie aria-details verwenden, um vom Ankerelement auf die positionierten Elemente zu verweisen. Screenreader-Software lernt noch, wie mit Aria-Details umgegangen werden soll, aber die Unterstützung wird immer besser.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Wenn Sie die Ankerpositionierung mit dem popover-Attribut oder mit einem <dialog>-Element verwenden, übernimmt der Browser die Korrekturen der Fokusnavigation für eine ordnungsgemäße Barrierefreiheit. Ihre Pop-ups oder Dialogfelder müssen also nicht in der DOM-Reihenfolge angeordnet sein. Weitere Informationen finden Sie in der Spezifikation in der Anmerkung zur Barrierefreiheit.

Fazit

Das ist eine ganz neue Funktion und wir sind gespannt, was ihr damit anstellt. Bisher haben wir einige wirklich tolle Anwendungsfälle von der Community gesehen, z. B. dynamische Labels in Diagrammen, Verbindungslinien, Fußnoten und visuelle Verweise. Während Sie mit der Positionierung von Ankergeräten experimentieren, würden wir uns über Ihr Feedback freuen. Wenn Sie Fehler finden, kontaktieren Sie uns.

Weitere Informationen