Mit Anker-Containerabfragen Fallback-Positionen erkennen (ab Chrome 143)

Una Kravets

Veröffentlicht: 29. Oktober 2025

Ab Chrome 143 können Sie Anker-Containerabfragen verwenden, um zu ermitteln, wann ein verankertes Element eine Fallback-Ankerpositionierung verwendet. In diesem Beitrag wird das Problem erläutert, das durch diese Funktion gelöst wird.

Die CSS Anchor Positioning API bietet eine leistungsstarke Möglichkeit, ein Element (z. B. ein Pop-over) an ein anderes (den Anker) zu binden und eine Reihe von Fallback-Positionen zu definieren, die verwendet werden, wenn das Element nicht mehr genügend Platz hat. Wenn Ihr verankertes Element beispielsweise anfangs oben positioniert ist, aber beim Scrollen an den Bildschirmrand gelangt, kann der Browser es „umdrehen“, damit es im Darstellungsbereich bleibt.

Stufe 1 der Spezifikation für die Ankerpositionierung wies jedoch eine erhebliche Lücke auf: Mit CSS konnte das Element zwar an eine Fallback-Position verschoben werden, es war jedoch nicht möglich, den ausgewählten Fallback zu ermitteln. Das bedeutete, dass Sie keine unterschiedlichen Formatierungen basierend auf dieser endgültigen Position anwenden konnten. Wenn das Tooltip von unten nach oben gekippt wird, zeigt der Pfeil immer noch in die falsche Richtung, es sei denn, Sie haben das Problem mit JavaScript behoben.

Mit Anker-Containerabfragen (definiert in der CSS Anchor Position Level 2-Spezifikation) wird dieses Problem behoben, da die CSS-Ankerpositionierung dadurch den fehlenden Kontext erhält.

So funktioniert das Abfragen von Alternativen

Mit verankerten Containerabfragen können Sie Stile basierend darauf anwenden, wie der Browser die Ankerpositionierung aufgelöst hat.

Dazu werden zwei neue CSS-Funktionen verwendet:

  • container-type: anchored: Wenden Sie diese auf das positionierte Element an (z. B. Ihr Kurzinfo-Fenster). Dadurch wird daraus ein Abfragecontainer, der sich des Status seiner Ankerpositionierung bewusst ist.
  • @container anchored(fallback: ...): Mit dieser neuen @-Regel-Syntax können Sie abfragen, welche „position-try-fallbacks“-Option letztendlich verwendet wurde.

Angenommen, Sie haben ein Kurzinfo, das Sie unten positionieren möchten, aber die obere Position als Fallback verwenden möchten. Der folgende Code:

  • Versucht zuerst, die .tooltip unten am Anker (--my-anchor) zu positionieren.
  • Wenn es nicht passt, wird es durch den Fallback an den Anfang verschoben.
  • Die @container-Abfrage erkennt dies. Wenn der oberste Fallback angewendet wird, wird die anchored(fallback: top)-Abfrage auf „true“ gesetzt.
  • So können Sie den Inhalt des Pseudoelements „::before“ von einem Aufwärtspfeil (▲) in einen Abwärtspfeil (▼) ändern und seine Position anpassen.
/* The element our tooltip is anchored to */
.anchor {
  anchor-name: --my-anchor;
}

/* The positioned element (tooltip) */
.tooltip {
  /* Use anchor positioning to set fallbacks */
  position: absolute;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block; /* Reposition in the block direction */
  
  /* Make it an anchored query container */
  container-type: anchored;

  /* Add a default "up" arrow */
  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%; /* Sits on top of the tooltip, pointing up */
  }
}

/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* The 'top' fallback was used, so flip the arrow */
    content: '▼';
    bottom: auto;
    top: 100%; /* Move the arrow below the tooltip */
  }
}

Das alles erfolgt ausschließlich in CSS – ohne JavaScript, ohne Observer und ohne zusätzliche Klassen. Hinweis: Wenn Sie die Popover API verwenden, müssen Sie Ihre Anker nicht explizit benennen, da eine implizite Ankerbeziehung erstellt wird.

In der folgenden Demo wird mit dem Border-Hack ein CSS-Dreieck erstellt und mit Ankerabfragen neu positioniert:

Fazit

Mit Ankerabfragen kann der Browser die aktuelle Ankerposition eines positionierten Elements erkennen. So können Sie viel robustere und kontextbezogenere Komponenten erstellen. Der Tooltip-Pfeil ist nur ein Beispiel. Sie könnten auch:

  • Die Hintergrundfarbe eines Menüs ändern, wenn es umgedreht wird
  • Verschieben Sie einen Rahmenstil an den Rand, der dem Anker am nächsten ist.
  • Passen Sie den „border-radius“ eines Pop-overs so an, dass die „angehängte“ Ecke rechtwinklig ist.
  • Ein Element unterschiedlich animieren, je nachdem, an welcher Fallback-Position es einrastet.

Das ist ein großer Vorteil für die Ankerpositionierung und Komponentenbibliotheken im Allgemeinen, da robustere und in sich geschlossene UI-Elemente mit weniger Code möglich sind.

Ressourcen