Pattern per dropdown e popover

L'HTML Popover API (Chrome 114+, ampiamente supportata) offre un comportamento dichiarativo per la visualizzazione e l'occultamento: attributo popover sull'elemento di destinazione e popovertarget sul pulsante trigger. Per l'apertura e la chiusura di base non serve JavaScript, inclusa la chiusura al clic esterno e la gestione del tasto Escape.

Selezioni gli elementi popover con [popover] o :popover-open. Il pseudo-elemento ::backdrop è disponibile per oscurare lo sfondo. I popover vengono visualizzati nel top layer, come i dialog, evitando problemi di impilamento legati a z-index.

CSS Anchor Positioning (Chrome 125+) posiziona un popover rispetto al suo trigger senza JavaScript: anchor-name: --btn sul trigger, position-anchor: --btn sul popover, quindi top: anchor(bottom); left: anchor(left) per allinearlo sotto il trigger.

Senza Anchor Positioning, usi un wrapper contenitore con posizionamento: position: relative sul contenitore e position: absolute; top: 100%; left: 0 sul dropdown. Funziona in tutti i browser, ma richiede che trigger e dropdown siano elementi fratelli all'interno di un contenitore con posizionamento.

Definisca lo stile dell'elenco dropdown come position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Gli elementi del menu usano padding, uno sfondo al passaggio del mouse e una visualizzazione a larghezza completa.

Anime l'apertura e la chiusura dei popover usando @starting-style per l'ingresso e transition-behavior: allow-discrete per animare la modifica della proprietà display. In questo modo è possibile creare animazioni CSS di ingresso e uscita associate allo stato aperto o chiuso del popover.

I menu dropdown devono supportare la tastiera: i tasti freccia permettono di spostarsi tra gli elementi del menu, Invio/Spazio attivano l'elemento focalizzato, mentre Escape chiude il menu e restituisce il focus al trigger. La Popover API gestisce automaticamente Escape; la navigazione con i tasti freccia richiede la gestione degli eventi JavaScript.

Dropdown personalizzato, che non usa la popover API: aggiunga aria-haspopup="listbox" e aria-expanded al trigger, role="listbox" all'elenco, e role="option" e aria-selected a ogni elemento. I lettori di schermo annunciano lo stato di espansione e il numero di elementi.

Un dropdown posizionato sotto il trigger può fuoriuscire dalla viewport nella parte inferiore. Rilevi il problema con IntersectionObserver o getBoundingClientRect e sposti il dropdown sopra il trigger. CSS Anchor Positioning gestisce questo caso con position-try-fallbacks.

I dropdown annidati, ovvero i sottomenu, aggiungono complessità. Posizioni i sottomenu a destra dei relativi elementi principali. Aggiunga un ritardo prima di nasconderli quando il mouse esce, usando CSS transition-delay o un timeout JS, per impedire che si chiudano durante il movimento diagonale del mouse.

I dropdown attivati al passaggio del mouse non funzionano sui dispositivi touch, perché non esiste uno stato hover. Usi universalmente trigger basati su clic o tocco. La chiusura con un tocco all'esterno funziona tramite la chiusura automatica della popover API oppure con un listener di clic sul document che chiuda i dropdown aperti.

Che cosa fornisce automaticamente la Popover API che in precedenza richiedeva JavaScript personalizzato?

La Popover API e CSS Anchor Positioning, usati insieme, consentono di creare pattern dichiarativi per dropdown e popover con un uso minimo di JavaScript. Per una compatibilità più ampia tra i browser, i pattern basati su contenitori con posizionamento funzionano in modo affidabile. Accessibilità da tastiera, attributi ARIA, gestione delle collisioni con la viewport e supporto per i dispositivi touch completano componenti dropdown pronti per la produzione.