# CSS Anchor Positioning: posizionare tooltip e menu senza JavaScript
Table of Contents
Un piccolo riquadro che compare accanto al pulsante giusto per spiegare a cosa serve (un “tooltip”, cioè un suggerimento a comparsa). Un menu che si apre proprio sotto la voce che l’ha richiamato. Una scheda informativa agganciata a un’icona. Sono dettagli banali da immaginare, ma sorprendentemente scomodi da realizzare bene su una pagina web. Il motivo è che per anni il browser non ha avuto un modo diretto per dire “colloca questo elemento accanto a quest’altro”. A maggio 2024 è arrivata una novità che affronta proprio questo problema: il CSS Anchor Positioning, una funzione che permette di ancorare un elemento a un altro usando solo il CSS, il linguaggio con cui si definisce l’aspetto delle pagine, senza ricorrere a JavaScript.
La notizia in breve
La funzione è arrivata in forma stabile con Google Chrome 125, uscito il 14 maggio 2024, e con Microsoft Edge, che condivide lo stesso motore di rendering (Chromium). Al momento dell’annuncio Firefox e Safari non la supportano ancora: i rispettivi team la stanno implementando. La specifica, inoltre, è ancora una bozza (draft) del CSS Working Group del W3C, l’organismo che definisce gli standard del web: alcuni dettagli potrebbero quindi cambiare. In pratica è una funzione nuova, disponibile per ora in un solo motore di browser. È un dato importante da tenere presente prima di adottarla su un sito in produzione.
Il problema: mettere un elemento accanto a un altro
Per capire perché la notizia conta, serve un passo indietro. Un elemento come un tooltip di solito viene “estratto” dal flusso normale della pagina (con la proprietà CSS position: absolute) e piazzato tramite coordinate. Il guaio è che quell’elemento non sa dove si trova il pulsante a cui dovrebbe stare vicino. E la posizione del pulsante cambia in continuazione: quando la pagina scorre, quando la finestra viene ridimensionata, quando il testo attorno si allunga.
La soluzione, finora, era il JavaScript, il linguaggio di programmazione che gira nel browser. Serviva codice che misurasse la posizione del pulsante, calcolasse le coordinate del tooltip e ripetesse il calcolo a ogni scorrimento o ridimensionamento. Per non riscrivere ogni volta questa logica, si ricorre a librerie specializzate come Floating UI (l’erede di Popper), pensate proprio per gestire questi calcoli e i casi limite, ad esempio far comparire il tooltip sopra il pulsante quando sotto non c’è spazio. Sono strumenti validi, ma hanno un costo: codice in più da caricare e mantenere, e calcoli che, girando a ogni scorrimento, possono appesantire la pagina e peggiorare la reattività misurata da metriche come l’INP.
Cosa fa l’anchor positioning
L’anchor positioning (“posizionamento tramite ancora”) sposta questo lavoro dentro il browser, sulla stessa scia di altre funzioni che portano nel motore capacità prima affidate a codice esterno, come la Prompt API per l’AI. L’idea è dichiarare la relazione direttamente nel CSS: un elemento viene indicato come “ancora”, un altro viene posizionato rispetto a lei. Da quel momento è il browser a tenerli legati e a ricalcolare la posizione da solo quando qualcosa si muove o la pagina scorre. Poiché la funzione è integrata nel motore, questo ricalcolo avviene in modo efficiente, senza il codice aggiuntivo che prima girava a ogni evento.
Come funziona, in pratica
Il meccanismo si regge su pochi ingredienti. Prima si dà un nome all’ancora con la proprietà anchor-name. Poi, sull’elemento da posizionare, si usa position-anchor per puntare a quel nome e la funzione anchor() per allineare i suoi bordi ai bordi dell’ancora.
/* il pulsante diventa un'ancora, con un nome scelto da noi */.pulsante { anchor-name: --info;}
/* il tooltip viene agganciato a quell'ancora e messo appena sopra */.tooltip { position: absolute; position-anchor: --info; bottom: anchor(top); /* il bordo inferiore del tooltip tocca il bordo superiore del pulsante */ justify-self: anchor-center; /* centrato in orizzontale rispetto al pulsante */}La riga bottom: anchor(top) si legge così: “posiziona il bordo inferiore del tooltip all’altezza del bordo superiore dell’ancora”, cioè mettilo sopra il pulsante. Cambiando questi riferimenti si sposta l’elemento sopra, sotto o di fianco, senza mai indicare coordinate assolute e senza una riga di JavaScript.
Quando non c’è spazio
Il caso più interessante è proprio quello che rende faticoso il lavoro a mano: cosa succede se il tooltip, messo sopra il pulsante, finisce fuori dallo schermo perché il pulsante è vicino al bordo superiore? Qui l’anchor positioning offre un meccanismo di ripiego integrato. Attraverso una regola dedicata (@position-try) si possono elencare posizioni alternative, e il browser sceglie la prima che ci sta senza essere tagliata. È lo stesso comportamento “intelligente” che finora richiedeva le librerie, ma ottenuto con il solo CSS. C’è anche un modo per nascondere l’elemento quando l’ancora esce dalla vista scorrendo, così un tooltip non resta appeso nel vuoto.
Cosa cambia rispetto alle librerie JavaScript
Per chi costruisce interfacce, il vantaggio principale è meno codice da scrivere e mantenere. Per i casi comuni - tooltip, menu, piccoli pannelli a comparsa - non serve più aggiungere una libreria dedicata solo per posizionare un elemento accanto a un altro. Il browser conosce la posizione degli elementi e aggiorna tutto da sé, in modo più coerente da un sito all’altro.
Questo non manda in pensione le librerie. Restano utili per scenari complessi, per animazioni e comportamenti particolari, e soprattutto per garantire lo stesso risultato oggi, su tutti i browser, anche quelli che non supportano ancora la funzione nativa. La scelta, insomma, dipende dal progetto.
Disponibilità e cautele
Trattandosi di una funzione nuova e per ora presente in un solo motore, conviene adottarla con l’approccio del miglioramento progressivo (progressive enhancement): costruire l’interfaccia in modo che resti utilizzabile anche dove la funzione manca, trattando l’ancoraggio nativo come un extra dove è disponibile. In alternativa si può continuare a usare una libreria come ripiego, attivando il metodo nativo solo sui browser che lo conoscono. L’anchor positioning si sposa bene con la Popover API, un’altra funzione recente pensata per mostrare pannelli sovrapposti come menu e finestrelle, e con le View Transitions per animare i cambi di stato: insieme coprono buona parte di ciò che serve per queste interfacce a livelli.
In sintesi
Il CSS Anchor Positioning permette di ancorare un elemento a un altro direttamente nel CSS, delegando al browser il calcolo della posizione. È arrivato in forma stabile con Chrome 125 a maggio 2024, mentre gli altri browser lo stanno ancora implementando, e la specifica è tuttora una bozza. Per chi fa frontend significa meno JavaScript e meno dipendenze per un compito molto comune, tenendo però conto che oggi il supporto non è ancora universale. È uno di quei tasselli che, col tempo, spostano nel browser lavori che prima ricadevano su chi scrive il codice.
