Rileva le posizioni di riserva con le query sui contenitori ancorati da Chrome 143

Una Kravets

Data di pubblicazione: 29 ottobre 2025

A partire da Chrome 143, puoi utilizzare le query sui contenitori ancorati per identificare quando un elemento ancorato utilizza un posizionamento dell'ancora di riserva. Questo post spiega il problema che questa funzionalità risolve.

L'API CSS Anchor Positioning offre un modo efficace per collegare un elemento (come un popup) a un altro (l'ancora) e definire un insieme di fallback di prova della posizione da utilizzare se l'elemento esaurisce lo spazio. Ad esempio, se l'elemento ancorato è inizialmente stilizzato per trovarsi in alto, ma mentre scorri raggiunge il bordo dello schermo, il browser può gestire l'inversione per mantenerlo nell'area visibile.

Tuttavia, il livello 1 della specifica di posizionamento dell'ancoraggio ha lasciato un vuoto significativo: mentre CSS poteva spostare l'elemento in una posizione di riserva, non aveva modo di sapere quale riserva era stata scelta. Ciò significava che non potevi applicare stili diversi in base alla posizione finale. Se la descrizione comando è stata spostata dal basso verso l'alto, la freccia continuerà a puntare nella direzione sbagliata, a meno che tu non l'abbia corretta con JavaScript.

Le query sui contenitori ancorati (definite nella specifica CSS Anchor Position Level 2) risolvono questo problema, fornendo al posizionamento dell'ancoraggio CSS la consapevolezza contestuale che mancava.

Come funziona: query di riserva

Le query sui contenitori ancorati consentono di applicare stili in base alla modalità di risoluzione del posizionamento dell'ancora da parte del browser.

Questa configurazione prevede due nuove funzionalità CSS:

  • container-type: anchored: applica questo valore all'elemento posizionato (ad esempio, la descrizione comando). In questo modo, si trasforma in un contenitore di query "consapevole " del suo stato di posizionamento dell'ancora.
  • @container anchored(fallback: ...): questa nuova sintassi della regola @ consente di eseguire query sull'opzione di fallback di position-try che è stata utilizzata alla fine.

Immagina di avere un suggerimento che vuoi posizionare in basso, ma con la posizione in alto come fallback. Il seguente codice:

  • Inizialmente, tenta di posizionare .tooltip nella parte inferiore del relativo ancoraggio (--my-anchor).
  • Se non rientra, il fallback lo sposta in alto.
  • La query @container rileva questo problema. Quando viene applicato il fallback principale, la query anchored(fallback: top) diventa true.
  • In questo modo, puoi modificare il contenuto dello pseudo-elemento ::before da una freccia "su" (▲) a una freccia "giù" (▼) e regolarne la posizione.
/* 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 */
  }
}

Tutto questo viene fatto interamente in CSS: niente JavaScript, niente osservatori, niente classi aggiuntive. Nota: se utilizzi l'API popover, non devi denominare esplicitamente gli ancoraggi, poiché viene creata una relazione di ancoraggio implicita.

Guarda la seguente demo che utilizza l'hack del bordo per creare un triangolo CSS e riposiziona il triangolo con query ancorate:

Conclusione

Le query ancorate consentono al browser di conoscere in modo nativo la posizione attuale dell'ancora di un elemento posizionato. Ciò significa che puoi creare componenti molto più resilienti e sensibili al contesto. La freccia della descrizione comando è solo un esempio. Puoi anche:

  • Modificare il colore di sfondo di un menu quando viene capovolto.
  • Sposta uno stile del bordo sul bordo più vicino all'ancora.
  • Modifica il raggio del bordo di un popover in modo che l'angolo "collegato" sia quadrato.
  • Anima un elemento in modo diverso in base alla posizione di riserva a cui si aggancia.

Si tratta di un enorme vantaggio per il posizionamento degli ancoraggi e per le librerie di componenti in generale, in quanto consente di creare elementi UI più robusti e autonomi con meno codice.

Risorse