Einführung in die CSS-Anchor Positioning API

Una Kravets

Die CSS Anchor Positioning API ist ein entscheidender Faktor in der Webentwicklung, da Sie mit ihr Elemente nativ relativ zu anderen Elementen positionieren können. Diese werden als Anker bezeichnet. Diese API vereinfacht komplexe Layoutanforderungen für viele Funktionen der Benutzeroberfläche wie Menüs und Untermenüs, Kurzinfos, Auswahlelemente, Labels, Karten, Dialogfelder mit Einstellungen und vieles mehr. Mit der im Browser integrierten Ankerpositionierung können Sie mehrschichtige Benutzeroberflächen erstellen, ohne auf Bibliotheken von Drittanbietern zurückgreifen zu müssen. Das eröffnet Ihnen eine Welt voller kreativer Möglichkeiten.

Die Ankerpositionierung ist ab Chrome 125 verfügbar.

Unterstützte Browser

  • 125
  • 125
  • x
  • x

Quelle

Kernkonzepte: Anker und positionierte Elemente

Das Herzstück dieser API ist die Beziehung zwischen Ankern und positionierten Elementen. Ein Anker ist ein Element, das mithilfe der Eigenschaft anchor-name als Referenzpunkt bezeichnet wird. Ein positioniertes Element ist ein Element, das mithilfe der position-anchor-Eigenschaft oder explizit mit anchor-name in seiner Positionierungslogik relativ zu einem Anker platziert wird.

Verankern Sie Elemente und positionierte Elemente.

Anker einrichten

Das Erstellen von Ankern ist ganz einfach. Wenden Sie die Eigenschaft "anchor-name" auf das ausgewählte Element an und weisen Sie ihm eine eindeutige ID zu. Diese eindeutige Kennung muss ähnlich wie bei einer CSS-Variable mit einem doppelten Bindestrich vorangestellt werden.

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

Nachdem ein Ankername zugewiesen wurde, dient .anchor-button als Anker, der als Orientierungshilfe für die Platzierung anderer Elemente dient. Es gibt zwei Möglichkeiten, diesen Anker mit anderen Elementen zu verbinden:

Implizite Anker

Wie im folgenden Codebeispiel können Sie einen Anker zuerst mit einem impliziten Anker mit einem anderen Element verbinden. Die Eigenschaft position-anchor 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 anchor()-Funktion positionieren, ohne den Ankernamen explizit beim ersten Argument anzugeben.

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

Explizite Anker

Alternativ können Sie den Anchor-Namen direkt in der Anchor-Funktion verwenden (z. B. top: anchor(--anchor-el bottom). Dies wird als expliziter Anker bezeichnet und kann praktisch sein, wenn Sie mit mehreren Elementen verankern möchten (siehe Beispiel).

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

Elemente relativ zu Ankern positionieren

Diagramm zur Ankerpositionierung mit physikalischen Eigenschaften.

Die Ankerpositionierung baut auf der absoluten CSS-Positionierung auf. Um Positionierungswerte zu verwenden, müssen Sie Ihrem positionierten Element position: absolute hinzufügen. Verwenden Sie dann die Funktion anchor(), um Positionierungswerte anzuwenden. Wenn Sie beispielsweise ein verankertes Element oben links am 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);
}
Diagramm der Positionierungsränder am positionierten Element.

Jetzt ist ein Element mit einem anderen verankert:

Demo eines einfachen Ankers

Screenshot der Demo.

Um die logische Positionierung für diese Werte zu verwenden, sehen Sie folgende Entsprechungen:

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

Ein positioniertes Element mit anchor-center zentrieren

Damit das Ankerelement leichter relativ zu seinem Anker zentriert werden kann, gibt es einen neuen Wert namens anchor-center, der mit den Attributen justify-self, align-self, justify-items und align-items verwendet werden kann.

In diesem Beispiel wird das vorherige Element geändert, indem justify-self: anchor-center verwendet wird, um das positionierte Element auf seinem 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;
}
Demo eines Ankers, der mit justify-center zentriert ist.

Screenshot der Demo.

Mehrere Anker

Elemente können an mehr als einen Anker gebunden sein. Das bedeutet, dass Sie möglicherweise Positionswerte festlegen müssen, die relativ zu mehr als einem Anker positioniert sind. Dazu verwenden Sie die Funktion anchor() und geben im ersten Argument explizit an, auf welchen Anker Sie verweisen. Im folgenden Beispiel ist die linke obere Ecke eines positionierten Elements unten rechts bei einem Anker verankert und der untere rechte Teil des positionierten Elements oben links beim zweiten Anker:

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

Screenshot der Demo.

Position mit inset-area

Zusätzlich zur standardmäßigen Richtungspositionierung von der absoluten Positionierung enthält das Anchoring-API einen neuen Layoutmechanismus, den „Einsatzbereich“.

Einfügungsbereich erleichtert das Platzieren der verankerten Elemente relativ zu den jeweiligen Ankern. Sie funktioniert bei einem 9-Zellen-Raster, bei dem sich das Verankerungselement in der Mitte befindet.

Verschiedene mögliche Positionierungsoptionen für den Randbereich, dargestellt im Raster mit 9 Zellen

Wenn Sie statt einer absoluten Positionierung einen Nebenbereich verwenden möchten, verwenden Sie die Eigenschaft inset-area mit physischen oder logischen Werten. Beispiel:

  • Oben in der Mitte: 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
  • Rechts Mitte: inset-area: right oder inset-area: inline-end
Demo mit mehreren Ankern

Screenshot der Demo.

Mit dem folgenden Tool können Sie diese Positionen näher untersuchen:

Ankertool für Positionen von eingelassenen Bereichen

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

Die Funktion anchor-size(), die ebenfalls Teil der Anchor Positioning API ist, kann verwendet werden, um ein Element auf Grundlage der Größe des Ankerelements (Breite, Höhe oder Inline- und Blockgrößen) zu vergrößern oder zu positionieren.

Der folgende CSS-Code zeigt ein Beispiel dafür, wie dies für die Höhe verwendet werden kann. Dabei wird anchor-size(height) in einer calc()-Funktion verwendet, um die maximale Höhe der Kurzinfo auf die doppelte 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);
}
Demo für anchor-size

Screenshot der Demo.

Anker für Elemente der obersten Ebene wie Pop-over und Dialoge verwenden

Die Ankerpositionierung funktioniert bei Elementen der obersten Ebene wie popover sehr gut. und <dialog>. Während diese Elemente in einer anderen Ebene als der Rest der DOM-Unterstruktur platziert werden, können Sie sie mithilfe von Ankerpositionen wieder aneinander binden und an Elementen, die sich nicht in der obersten Ebene befinden, mit ihnen scrollen. Dies ist ein großer Gewinn für mehrschichtige Benutzeroberflächen.

Im folgenden Beispiel wird eine Reihe von Kurzinfo-Pop-overs ü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 Inlinestile für die Schaltfläche und die Kurzinfo. Da jeder Anker einen eindeutigen Ankernamen benötigt, ist das Inline-Objekt die einfachste Methode, um dynamischen Inhalt zu generieren.

Demo zur Verwendung eines Ankers mit popover

Screenshot der Demo.

Ankerpositionen mit @position-try anpassen

Sobald Sie die Anfangsposition des Ankers festgelegt haben, können Sie die Position anpassen, wenn der Anker die Ränder des zugehörigen Blocks erreicht. Um alternative Ankerpositionen zu erstellen, können Sie die Anweisung @position-try zusammen mit der Eigenschaft position-try-options verwenden.

Im folgenden Beispiel wird rechts neben einem Menü ein Untermenü angezeigt. Die Anchor Positioning API und das Popover-Attribut eignen sich gut für Menüs und Untermenüs, da diese Menüs in der Regel mit einer Triggerschaltfläche verknüpft sind.

Wenn horizontal nicht genügend Platz in diesem Untermenü verfügbar ist, können Sie es unter das Menü verschieben. Richten Sie dazu zunächst die Anfangsposition ein:

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

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

Richten Sie dann die verankerten Positionen für das Fallback mit @position-try ein:

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

Verbinden Sie die beiden abschließend mit position-try-options. Das Ganze sieht dann 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;
}
Demo zum Verwenden des Ankers mit popover

Keywords zum automatischen Umdrehen der Ankerposition

Bei einer einfachen Anpassung, z. B. 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 browsergestützten Flip-Keywords wie flip-block und flip-inline verwenden. Sie dienen als Ersatz für benutzerdefinierte @position-try-Deklarationen und können 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;
}
Funktion „Automatisch spiegeln“ mit position-try-options: flip-block verwenden

position-visibility für Anker in Subscrollern

Es gibt einige Fälle, in denen Sie ein Element in einem Subscroller-Bereich der Seite verankern möchten. In diesen Fällen können Sie die Sichtbarkeit des Ankers mit position-visibility steuern. Wann bleibt der Anker sichtbar? Wann verschwindet sie? Mit dieser Funktion können Sie diese Optionen steuern. Verwenden Sie position-visibility: anchors-visible, wenn das positionierte Element sichtbar bleiben soll, bis der Anker nicht mehr zu sehen ist:

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

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);
}
Demo zu position-visibility: no-overflow

Funktionserkennung und Polyfilling

Da Browser derzeit nur eingeschränkt unterstützt werden, sollten Sie dieses API mit einigen Vorsichtsmaßnahmen verwenden. Zuerst können Sie direkt in CSS mit der Funktionsabfrage @supports nach Unterstützung suchen. Dazu müssen Sie Ihre Ankerstile so umbrechen:

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

  /* Anchor styles here */

}

Außerdem können Sie die Funktion zur Ankerpositionierung mit der CSS-Polyfill-Funktion zur Ankerpositionierung von Oddbird Polyfill für die Funktion in Firefox 54, Chrome 51, Edge 79 und Safari 10 verwenden. Dieses Polyfill unterstützt die meisten grundlegenden Funktionen für Ankerpositionen, auch wenn die aktuelle Implementierung nicht vollständig ist und eine veraltete Syntax enthält. Sie können den „unpkg“-Link verwenden oder ihn direkt in einen Paketmanager importieren.

Hinweis zur Barrierefreiheit

Die Anchor Positioning API ermöglicht zwar die Positionierung eines Elements relativ zu anderen Elementen, stellt jedoch keine grundsätzliche semantische Beziehung zwischen den Elementen her. Wenn eine semantische Beziehung zwischen dem Ankerelement und dem positionierten Element besteht (z. B. ein Kommentar in der Seitenleiste zum Ankertext), können Sie aria-details verwenden, um vom Ankerelement auf das positionierte Element zu verweisen. Screenreader-Software lernt noch, wie mit Aria-Details umgegangen wird, aber der Support 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, nimmt der Browser die Korrekturen der Fokusnavigation für eine korrekte Zugänglichkeit vor. Sie müssen also keine Pop-over oder Dialogfelder in der DOM-Reihenfolge haben. Weitere Informationen finden Sie im Hinweis zur Barrierefreiheit in der Spezifikation.

Fazit

Dies ist eine brandneue Funktion und wir sind auf Ihre Entwicklung gespannt. Bisher haben wir einige sehr interessante Anwendungsfälle aus der Community gesehen, z. B. dynamische Labels in Diagrammen, Verbindungslinien, Fußnoten und visuelle Querverweise. Wir freuen uns auf dein Feedback, während du die Ankerpositionierung testest. Wir freuen uns auf dein Feedback. Wenn du Fehler findest, lass es uns bitte wissen.

Weitere Informationen