CSS anchor positioning: cosa fa e perché MDN parla ancora di disponibilità limitata

Il posizionamento con ancora in CSS permette di legare un elemento posizionato in assoluto a un altro elemento, così che un tooltip segua il suo pulsante senza una riga di JavaScript. È davvero elegante. È anche, stando al banner di MDN, qualcosa che non puoi ancora rilasciare senza condizioni - e molto di ciò che è stato pubblicato nel 2026 afferma il contrario.

I tre pezzi

Il modello è piccolo. Dai un nome a un elemento come ancora, punti un altro elemento a quel nome e posizioni rispetto a esso.

.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --my-trigger;
  top: anchor(bottom);
  left: anchor(left);
}

anchor-name registra l'elemento sotto un identificatore personalizzato. position-anchor associa l'elemento posizionato a quell'identificatore. La funzione anchor() si risolve poi in un bordo dell'ancora: anchor(bottom) è il bordo inferiore dell'ancora espresso nello spazio di coordinate dell'elemento posizionato.

Ciò che lo rende più di uno zucchero sintattico è il comportamento vicino al bordo della finestra. Un tooltip fissato sotto il suo elemento scatenante dovrebbe ribaltarsi sopra invece di essere tagliato, e quel ribaltamento è esattamente la logica per cui esistono tutte le librerie di posizionamento. L'ancoraggio la offre in modo dichiarativo tramite posizioni di ripiego: elenchi collocazioni alternative e il browser sceglie la prima che entra.

Perché l'entusiasmo ha superato il supporto

Chrome ha rilasciato l'ancoraggio nel 2024, e ne è seguita un'ondata di articoli che annunciavano che il CSS nativo aveva sostituito le librerie per i tooltip. Cerca l'argomento nel 2026 e troverai affermazioni di stato Baseline e percentuali di copertura sopra il novanta.

La pagina MDN di position-anchor porta attualmente un banner diverso: disponibilità limitata, con la spiegazione che questa funzionalità non è Baseline perché non funziona in alcuni dei browser più usati. È la documentazione di riferimento della proprietà stessa, ed è la riga di cui fidarsi quando le fonti secondarie la contraddicono.

Non è un motivo per ignorare la funzionalità. È un motivo per controllare tu stesso il banner su MDN il giorno in cui prevedi di rilasciare, invece di ereditare un'affermazione da un articolo che era ottimista quando è stato scritto.

Come usarlo senza scommetterci

Interrogalo con una feature query. @supports è la differenza tra miglioramento progressivo e un layout rotto per chi si trova sul motore sbagliato:

.tooltip {
  /* collocazione di ripiego che funziona ovunque */
  position: absolute;
  top: 100%;
  left: 0;
}

@supports (anchor-name: --x) {
  .trigger { anchor-name: --my-trigger; }
  .tooltip {
    position-anchor: --my-trigger;
    top: anchor(bottom);
    left: anchor(left);
  }
}

Scrivi prima il posizionamento ordinario e lascia che la versione ancorata lo sovrascriva dentro la query. I browser che capiscono l'ancoraggio ottengono il comportamento buono; gli altri ottengono qualcosa che funziona comunque.

Il riassunto onesto: l'ancoraggio va nella direzione giusta e vale la pena impararlo ora, ma un tooltip in produzione nel 2026 ha ancora bisogno di una strada per i motori che non lo supportano. Cancellare la libreria del tutto è una decisione da prendere dalla tabella di compatibilità, non da un titolo.

Dove si colloca nel resto della piattaforma

L'ancoraggio si abbina naturalmente all'API Popover, che gestisce apertura e chiusura mentre l'ancoraggio gestisce la collocazione, e all'elemento dialog per i casi che richiedono una vera finestra modale. Quei due sono più avanti sul supporto, ed è anche per questo che conviene rivolgersi prima a loro.

In breve

anchor-name segna l'ancora, position-anchor vi si collega, anchor() ne risolve i bordi e le posizioni di ripiego gestiscono il ribaltamento vicino a un bordo della finestra. MDN elenca la proprietà come a disponibilità limitata ed esplicitamente fuori Baseline. Usala dietro @supports, tieni un fallback ordinario e consulta la tabella di compatibilità il giorno del rilascio invece di fidarti di una percentuale letta su un blog.