Detecteer fallbackposities met verankerde containerquery's vanuit Chrome 143

Una Kravets

Gepubliceerd: 29 oktober 2025

Vanaf Chrome 143 kun je verankerde containerquery's gebruiken om te identificeren wanneer een verankerd element een fallback-ankerpositionering gebruikt. Dit bericht legt het probleem uit dat deze functie oplost.

De CSS-ankerpositionerings-API biedt een krachtige manier om een ​​element (zoals een popover) aan een ander element (het anker) te koppelen en een set positie-, probeer- en terugvalopties te definiëren die worden gebruikt als het element geen ruimte meer heeft. Stel dat uw verankerde element aanvankelijk is gestyled om bovenaan te staan, maar het element bij het scrollen de rand van het scherm raakt, dan kan de browser het "omdraaien" verwerken om het in de viewport te houden.

Niveau 1 van de specificatie voor ankerpositionering liet echter een aanzienlijke leemte achter: CSS kon het element weliswaar naar een fallback-positie verplaatsen , maar wist niet welke fallback-positie was gekozen. Dit betekende dat je geen verschillende stijlen kon toepassen op basis van die uiteindelijke positie. Als je tooltip van onder naar boven omsloeg, zou de pijl nog steeds de verkeerde kant op wijzen, tenzij je dit met JavaScript zou oplossen.

Verankerde containerquery's (gedefinieerd in de CSS Anchor Position Level 2-specificatie ) lossen dit probleem op en geven CSS-ankerpositionering de contextuele bewustwording die het ontbrak.

Hoe het werkt: fallbacks opvragen

Met verankerde containerquery's kunt u stijlen toepassen op basis van de manier waarop de browser de ankerpositie heeft opgelost.

Dit is voorzien van twee nieuwe CSS-functies:

  • container-type: anchored : Pas dit toe op het gepositioneerde element (bijvoorbeeld uw tooltip). Dit verandert het in een querycontainer die "bewust" is van de ankerpositiestatus.
  • @container anchored(fallback: ...) : Met deze nieuwe at-rule-syntaxis kunt u opvragen welke position-try-fallbacks-optie uiteindelijk is gebruikt.

Stel je voor dat je een tooltip hebt die je onderaan wilt plaatsen, maar met de bovenste positie als reserve. De volgende code:

  • Probeert in eerste instantie de .tooltip onderaan het anker te plaatsen ( --my-anchor ).
  • Past het niet, dan wordt het door de fallback bovenaan geplaatst.
  • De @container -query detecteert dit. Wanneer de top fallback wordt toegepast, wordt de anchored(fallback: top) -query true.
  • Hiermee kunt u de inhoud van het pseudo-element ::before wijzigen van een pijltje omhoog (▲) naar een pijltje omlaag (▼) en de positie ervan aanpassen. 
/* 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 */
  }
}

Dit alles gebeurt volledig in CSS: geen JavaScript, geen observers, geen extra klassen. Let op: als u de popover API gebruikt, hoeft u uw ankers niet expliciet te benoemen, omdat er een impliciete ankerrelatie wordt gecreëerd.

Bekijk de volgende demo waarin de border-hack wordt gebruikt om een ​​CSS-driehoek te maken en de driehoek opnieuw te positioneren met verankerde query's:

Conclusie

Verankerde query's geven CSS-browser-native inzicht in de huidige ankerpositie van een gepositioneerd element. Dit betekent dat je veel veerkrachtigere en contextbewuste componenten kunt bouwen. De knopinfopijl is slechts één voorbeeld; je kunt ook:

  • Verander de achtergrondkleur van een menu wanneer het is omgedraaid.
  • Verplaats een randstijl naar de rand die het dichtst bij het anker ligt.
  • Pas de randradius van een popover aan zodat de "vastgemaakte" hoek vierkant is.
  • Animeer een element op verschillende manieren, afhankelijk van de fallbackpositie waaraan het wordt vastgeklikt.

Dit is een enorme winst voor ankerpositionering en componentbibliotheken in het algemeen, waardoor robuustere en zelfstandige UI-elementen met minder code mogelijk worden.

Bronnen