Einführung in die CSS-Anchor Positioning API

Una Kravets

Veröffentlicht: 10. Mai 2024

Die CSS Anchor Positioning API ist eine bahnbrechende Neuerung in der Webentwicklung, da sie es ermöglicht, Elemente nativ relativ zu anderen Elementen zu positionieren, die als Anker bezeichnet werden. Diese API vereinfacht komplexe Layoutanforderungen für viele Benutzeroberflächenfunktionen wie Menüs und Untermenüs, Tooltips, Auswahlfelder, Labels, Karten und Einstellungsdialogfelder. Da die Ankerpositionierung in den Browser integriert ist, können Sie mehrschichtige Benutzeroberflächen erstellen, ohne auf Drittanbieterbibliotheken angewiesen zu sein. Das eröffnet Ihnen eine Vielzahl kreativer Möglichkeiten.

Die Ankerpositionierung ist ab Chrome 125 verfügbar.

Wichtige Konzepte: Anker und positionierte Elemente

Im Mittelpunkt dieser API steht die Beziehung zwischen Ankern und positionierten Elementen. Ein Anker ist ein Element, das mit der Property anchor-name als Referenzpunkt festgelegt wird. Ein positioniertes Element ist ein Element, das relativ zu einem Anker mit der Property position-anchor oder explizit mit anchor-name in seiner Positionierungslogik platziert wird.

Anker einrichten

Das Erstellen eines Ankers ist ganz einfach. Wenden Sie die Eigenschaft „anchor-name“ auf das ausgewählte Element an und weisen Sie ihr eine eindeutige Kennung zu. Dieser eindeutigen Kennung muss ein doppelter Bindestrich vorangestellt werden, ähnlich wie bei einer CSS-Variablen.

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

Nachdem .anchor-button ein Ankernamen zugewiesen wurde, dient es als Anker für die Platzierung anderer Elemente. 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 die Verwendung eines impliziten Ankers, wie im folgenden Codebeispiel. Die position-anchor-Eigenschaft wird dem Element hinzugefügt, das Sie mit dem Anker verbinden möchten, 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 mehrere Elemente verankern möchten (siehe Beispiel unten).

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

Elemente relativ zu Ankern positionieren

Die Ankerpositionierung basiert auf der absoluten CSS-Positionierung. Wenn Sie Positionierungswerte verwenden möchten, müssen Sie dem positionierten Element position: absolute hinzufügen. Verwenden Sie dann die Funktion anchor(), um Positionierungswerte anzuwenden. Wenn Sie ein verankertes Element beispielsweise oben links im Ankerelement 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);
}

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

Wenn Sie die logische Positionierung für diese Werte verwenden möchten, sind die Entsprechungen wie folgt:

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

Positioniertes Element mit anchor-center zentrieren

Damit Sie ein relativ zum Anker positioniertes Element leichter zentrieren können, gibt es einen neuen Wert namens 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 justify-self: anchor-center verwendet wird, um das positionierte Element über dem Anker zu zentrieren.

.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;
}

Mehrere Anker

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

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

Position mit inset-area

Zusätzlich zur standardmäßigen Richtungsbestimmung durch die absolute Positionierung gibt es einen neuen Layoutmechanismus in der Anchoring API, der als „Inset Area“ bezeichnet wird.

Mit dem Inset-Bereich lassen sich ankerpositionierte Elemente ganz einfach relativ zu ihren jeweiligen Ankern platzieren. Er basiert auf einem 9‑Zellen-Raster mit dem Ankerelement in der Mitte.

Verschiedene mögliche Positionierungsoptionen für den Inset-Bereich, dargestellt im 9‑Zellen-Raster

Wenn Sie anstelle der absoluten Positionierung den Inset-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
• Mitte links: inset-area: left oder inset-area: inline-start
• Unten in der Mitte: inset-area: bottom oder inset-area: block-end
• Rechts mittig: inset-area: right oder inset-area: inline-end

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

Mit der Funktion anchor-size(), die ebenfalls Teil der API zur Ankerpositionierung ist, kann die Größe oder Position eines ankerpositionierten Elements basierend auf der Größe des Ankers (Breite, Höhe oder Inline- und Blockgrößen) festgelegt werden.

Im folgenden CSS-Beispiel wird gezeigt, wie dies für die Höhe verwendet wird. Dabei wird anchor-size(height) in einer calc()-Funktion verwendet, um die maximale Höhe des Tooltips 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);
}

Anker mit Elementen der obersten Ebene wie Pop-over und Dialogfeld verwenden

Die Ankerpositionierung funktioniert sehr gut mit Top-Layer-Elementen wie popover. und <dialog>. Diese Elemente werden zwar in einer separaten Ebene vom Rest des DOM-Unterbaums platziert, aber mit der Ankerpositionierung können Sie sie wieder an Elemente binden, die sich nicht in der obersten Ebene befinden, und mit ihnen scrollen. Das ist ein großer Vorteil für mehrschichtige Benutzeroberflächen.

Im folgenden Beispiel wird eine Reihe von Tooltip-Pop-ups über eine Schaltfläche geöffnet. Die Schaltfläche ist der Anker und die Kurzinfo 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-Stile für die Schaltfläche und die Kurzinfo. Da jeder Anker einen eindeutigen Namen benötigt, ist das Inlining die einfachste Methode, um dynamische Inhalte zu generieren.

Ankerpositionen mit @position-try anpassen

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

Im folgenden Beispiel wird rechts neben einem Menü ein Untermenü angezeigt. Menüs und Untermenüs sind ein guter Anwendungsfall für die API zur Ankerpositionierung in Verbindung mit dem Popover-Attribut, da diese Menüs in der Regel an einer Schaltfläche zum Auslösen verankert sind.

Wenn in diesem Untermenü nicht genügend horizontaler Platz vorhanden ist, können Sie es stattdessen unter das Menü verschieben. Richten Sie dazu zuerst die Ausgangsposition ein:

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

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

Richten Sie dann Ihre Fallback-Ankerpositionen mit @position-try 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. Insgesamt 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 automatische Umkehrung der Ankerposition

Wenn Sie eine einfache Anpassung vornehmen, z. B. das Spiegeln von oben nach unten oder von links nach rechts (oder beides), können Sie sogar den Schritt zum Erstellen benutzerdefinierter @position-try-Deklarationen überspringen und die integrierten, vom Browser unterstützten Spiegelungs-Keywords wie flip-block und flip-inline verwenden. Sie können als Ersatz für benutzerdefinierte @position-try-Deklarationen verwendet und miteinander kombiniert werden:

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

Mit Flip-Keywords lässt sich der Anker-Code 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 Subscrollern

In einigen Fällen kann es sinnvoll sein, ein Element in einem Subscroller der Seite zu verankern. In diesen Fällen können Sie die Sichtbarkeit des Ankers mit position-visibility steuern. Wann bleibt der Anker im Blickfeld? Wann verschwindet es? Mit dieser Funktion haben Sie die Kontrolle über diese Optionen. Sie verwenden position-visibility: anchors-visible, wenn das positionierte Element so lange im Blickfeld 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 seinen Container überläuft.

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

Feature-Erkennung und Polyfilling

Da die Browserunterstützung derzeit begrenzt ist, sollten Sie diese API mit Vorsicht verwenden. Zuerst können Sie direkt im CSS mit der Feature-Abfrage @supports nach Unterstützung suchen. Dazu müssen Sie Ihre Ankerstile in Folgendes einfügen:

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

  /* Anchor styles here */

}

Außerdem können Sie die Ankerpositionierungsfunktion mit dem CSS-Ankerpositionierungs-Polyfill von Oddbird polyfillen, das ab Firefox 54, Chrome 51, Edge 79 und Safari 10 funktioniert. Dieses Polyfill unterstützt die meisten grundlegenden Ankerpositionierungsfunktionen. Die aktuelle Implementierung ist jedoch nicht vollständig und enthält einige veraltete Syntax. Sie können den unpkg-Link verwenden oder ihn direkt in einen Paketmanager importieren.

Hinweis zur Barrierefreiheit

Mit der API zur Ankerpositionierung kann ein Element zwar relativ zu anderen positioniert werden, es wird aber keine sinnvolle semantische Beziehung zwischen ihnen hergestellt. Wenn tatsächlich eine semantische Beziehung zwischen dem Anker- und dem positionierten Element besteht (z. B. wenn das positionierte Element ein Seitenleistenkommentar zum Ankertext ist), können Sie das positionierte Element mit aria-details auf das Ankerelement verweisen. Screenreader-Software muss noch lernen, wie sie mit aria-details umgehen 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 Attribut popover oder mit einem <dialog>-Element verwenden, übernimmt der Browser die Korrekturen für die Fokusnavigation, um eine gute Barrierefreiheit zu gewährleisten. Sie müssen Ihre Pop-overs oder Dialogfelder also nicht in der DOM-Reihenfolge anordnen. Weitere Informationen finden Sie in der Spezifikation im Hinweis zur Barrierefreiheit.

Fazit

Diese Funktion ist brandneu und wir sind gespannt, was Sie damit entwickeln. Bisher haben wir einige wirklich interessante Anwendungsfälle aus der Community gesehen, z. B. dynamische Labels in Diagrammen, Verbindungslinien, Fußnoten und visuelle Querverweise. Wir freuen uns auf Ihr Feedback zur Ankerpositionierung und bitten Sie, uns auf Fehler hinzuweisen.

Weitere Informationen

• Linie zum Verbinden von Elementen mit CSS Anchor Positioning zeichnen
• Future CSS: Anchor positioning by Roman Komarov
• Una's Codepen Collection of Anchor demos
• Tool zur Ankerpositionierung