Tre nuovi strumenti nativi per necessità comuni

FAQ, conferme importanti, menu contestuali, tooltip e pannelli di filtri sono necessità comuni nelle interfacce web.

Per anni questi comportamenti sono stati costruiti combinando elementi generici, CSS e JavaScript. Il risultato poteva funzionare visivamente, ma lasciava allo sviluppatore la responsabilità di semantica, tastiera, focus, stato aperto o chiuso e relazione tra controllo e contenuto.

Per rendere questi pattern più solidi e accessibili, HTML mette oggi a disposizione strumenti nativi che descrivono direttamente l'intenzione dell'interfaccia:

<details> e <summary>: disclosure nativo

Un widget di disclosure è un componente che rivela contenuto su richiesta. In italiano: un blocco espandibile.

<details> è il contenitore. <summary> è l'etichetta cliccabile. Lo usate quando il contenuto è utile, ma non deve occupare spazio o attenzione fin da subito.

<details>
  <summary>Quanto costa la spedizione?</summary>
  <p>La spedizione è gratuita sopra i 50 euro.</p>
</details>

L'attributo open

Di default un <details> parte chiuso. Se aggiungete l'attributo booleano open, parte aperto.

<details>
  <summary>Mostra condizioni di reso</summary>
  <p>Potete restituire il prodotto entro 30 giorni...</p>
</details>

L'attributo name: accordion nativo

Quando più <details> condividono lo stesso name, solo uno può restare aperto alla volta.

Come usare <details>

CSS per <details>

::marker permette di intervenire sulla freccia nativa del <summary>, ma con proprietà limitate. Se vi serve pieno controllo visivo, nascondete il marker e ricreatelo con ::after.

<details class="faq" open>
  <summary>
    <span>Garanzia e reso</span>
  </summary>
  <p>Potete restituire il prodotto entro 30 giorni.</p>
  <p>La garanzia copre i difetti di produzione.</p>
</details>

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq summary::marker {
  content: "";
}

.faq summary::-webkit-details-marker {
  display: none; /* Safari */
}

.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
}

.faq[open] summary::after {
  rotate: 45deg;
}

.faq::details-content {
  display: grid;
  gap: 0.75rem;
}

Sovrapposizioni: modale o non-modale?

Dialog e popover servono quando un pezzo di interfaccia deve galleggiare sopra la pagina: conferme, menu, filtri, tooltip, avvisi. Non state solo posizionando un box più in alto degli altri.

State scegliendo anche un comportamento: decidere se quel contenuto interrompe l'utente oppure se gli resta accanto mentre continua a lavorare. È questa scelta a guidare poi lo strumento giusto.

Il top layer

I dialog modali e i popover usano il cosiddetto top layer: uno strato speciale gestito dal browser sopra il contenuto della pagina.

Questo risolve molti problemi storici di sovrapposizione: non dovete combattere con z-index: 999999.

L'elemento <dialog>

<dialog> è un elemento semantico per finestre di dialogo. Può contenere testo, immagini, liste, form e pulsanti.

<dialog id="conferma-dialog">
  <h2>Confermi l'operazione?</h2>
  <p>Questa azione non può essere annullata.</p>
  <form method="dialog">
    <button value="annulla">Annulla</button>
    <button value="conferma">Conferma</button>
  </form>
</dialog>

Dialog non-modali

Un dialog non-modale può essere visibile senza bloccare il resto della pagina. L'attributo open lo mostra, ma non lo rende modale.

Un pannello chat è un esempio tipico: sta sopra la pagina, ma l'utente può continuare a interagire con il resto.

<dialog open>
  <p>Ciao! Come posso aiutarvi?</p>
</dialog>

Dialog modali con showModal()

Per aprire un dialog in modalità modale serve JavaScript minimo: il metodo showModal().

<button id="apri-dialog-modale" type="button">Apri dialog modale</button>

<dialog id="conferma-dialog-modale">
  <h3>Eliminare il file?</h3>
  <p>Questa azione non può essere annullata.</p>
  <form method="dialog">
    <button value="annulla">Annulla</button>
    <button value="elimina">Elimina</button>
  </form>
</dialog>

const bottone = document.getElementById('apri-dialog-modale');
const dialog = document.getElementById('conferma-dialog-modale');

bottone.addEventListener('click', () => {
  dialog.showModal();
});

form method="dialog"

Un form dentro un dialog può chiudere il dialog senza inviare una richiesta HTTP. Il valore del pulsante premuto viene salvato in returnValue.

Se un button non ha né value né type, il suo comportamento predefinito resta submit: in un form con method="dialog" chiude il dialog lasciando una risposta vuota. Nella demo viene mostrata come Chiuso senza risposta, proprio come quando premete Esc.

<button id="apri-form-method-dialog" class="demo-action" type="button">Scegli una risposta</button>
<output id="form-method-dialog-output">Nessuna risposta</output>

<dialog id="form-method-dialog-modal" class="lesson-dialog">
  <h3>Salvare le modifiche?</h3>
  <form method="dialog" class="dialog-actions">
    <button>Chiudi</button>
    <button value="annulla">Annulla</button>
    <button value="salva">Salva</button>
  </form>
</dialog>

const formButton = document.getElementById('apri-form-method-dialog');
const formDialog = document.getElementById('form-method-dialog-modal');
const formOutput = document.getElementById('form-method-dialog-output');

formButton.addEventListener('click', () => {
  formDialog.returnValue = '';
  formDialog.showModal();
});

formDialog.addEventListener('close', () => {
  formOutput.value = formDialog.returnValue || 'Chiuso senza risposta';
  formOutput.textContent = formOutput.value;
});

Backdrop, focus e accessibilità

Quando un dialog viene aperto con showModal(), il browser gestisce automaticamente molti dettagli difficili.

• Il resto della pagina diventa inerte.
• Il dialog viene annunciato come finestra di dialogo agli screen reader.
• Il focus entra nel dialog e torna al controllo di apertura alla chiusura.
• Esc chiude il dialog modale.
• ::backdrop permette di stilare lo sfondo dietro il dialog.

dialog::backdrop {
  background: rgb(0 0 0 / 0.65);
}

L'attributo popover

popover non è un nuovo elemento: è un attributo che trasforma un elemento esistente in un contenuto sovrapposto non-modale.

Scrivere solo popover equivale a usare popover="auto": è il comportamento da scegliere per menu, dropdown e pannelli leggeri. Il browser gestisce l'apertura dal controllo collegato, la chiusura con click fuori o Esc, e chiude gli altri popover automatici quando ne aprite uno nuovo.

popover="manual" è invece una scelta esplicita: il pannello non usa il light dismiss e resta aperto finché non lo chiudete voi con un pulsante o con JavaScript. È utile per notifiche, stati persistenti o interfacce in cui la chiusura deve essere controllata.

<button popovertarget="attributo-popover-menu" class="demo-action">Apri menu</button>

<nav id="attributo-popover-menu" popover class="lesson-popover">
  <h3>Azioni</h3>
  <button>Salva</button>
  <button>Duplica</button>
  <button>Archivia</button>
</nav>

popovertargetaction

Dopo aver scelto se il popover è auto o manual, dovete decidere che cosa fa il pulsante che lo controlla.

Con il solo popovertarget, il pulsante alterna lo stato: se il popover è chiuso lo apre, se è aperto lo chiude. Con popovertargetaction potete invece rendere esplicito il comando: show apre soltanto, hide chiude soltanto, toggle alterna.

Questo è particolarmente utile con popover="manual", perché il popover non si chiude da solo: dovete prevedere un controllo chiaro per chiuderlo.

<button popovertarget="azione-popover" popovertargetaction="show" class="demo-action">Apri</button>
<button popovertarget="azione-popover" popovertargetaction="hide" class="demo-action secondary">Chiudi</button>
<button popovertarget="azione-popover" class="demo-action secondary">Alterna</button>

<div id="azione-popover" popover="manual" class="lesson-popover status-popover">
  <p>Popover manuale: non si chiude con light dismiss.</p>
</div>

La semantica non arriva da popover

popover aggiunge comportamento, ma non cambia il significato dell'elemento.

<button popovertarget="menu-semantico" class="demo-action">Apri nav</button>
<nav id="menu-semantico" popover class="lesson-popover semantic-popover-card">
  <strong><code>&lt;nav&gt;</code></strong>
  <p>Menu di navigazione o azioni.</p>
</nav>

<button popovertarget="filtri-semantici" class="demo-action">Apri aside</button>
<aside id="filtri-semantici" popover class="lesson-popover semantic-popover-card">
  <strong><code>&lt;aside&gt;</code></strong>
  <p>Pannello di filtri o opzioni.</p>
</aside>

CSS Anchor Positioning

CSS Anchor Positioning permette di collegare un elemento a un altro dichiarato come ancora, e di calcolarne la posizione rispetto a quell'ancora. Nei popover serve a risolvere un problema concreto: un elemento con attributo popover, una volta aperto, entra nel top layer, cioè il livello che il browser disegna sopra la pagina. Per default il popover viene centrato nello schermo: il legame visivo con il pulsante che lo ha aperto si perde.

Tenete separate le responsabilità: l'HTML gestisce apertura e chiusura con popover, popovertarget e popovertargetaction; il CSS decide dove collocare l'interfaccia con delle specifiche proprietà:

• anchor-name dà un nome all'elemento che farà da punto di riferimento, per esempio il pulsante.
• position-anchor dice all'elemento posizionato quale ancora deve seguire.
• anchor() legge una coordinata dell'ancora, per esempio il bordo basso o il bordo sinistro.
• anchor-size() legge una dimensione dell'ancora, utile quando il menu deve avere almeno la larghezza del pulsante.

È una soluzione moderna già utile oggi nei browser recenti, ma non ancora baseline completa: la parte base è solida per i casi semplici, mentre gestione delle collisioni, scroll container annidati, fallback complessi e interazioni più avanzate sono ancora aree da testare. Direzione probabile: stabilizzazione su Baseline nel 2026.

• Uso pratico: dropdown, tooltip, label, callout e menu che devono allinearsi al trigger o ereditarne la larghezza.
• Cosa evitare: non basate layout critici solo su anchor positioning senza un test multibrowser; per collisioni complesse le librerie dedicate restano più mature.

Demo completa renderizzata: un pulsante "Filtri" apre e chiude lo stesso popover. Il CSS lo aggancia al bordo inferiore del pulsante e ne replica la larghezza.

HTML

<div class="anchor-demo">
  <button class="anchor-trigger" popovertarget="filtri-menu" popovertargetaction="toggle" type="button">
    Filtri
  </button>
  <div id="filtri-menu" popover class="anchor-menu">
    <strong>Filtri rapidi</strong>
    <button>Solo disponibili</button>
    <button>In promozione</button>
    <button>Spedizione gratuita</button>
  </div>
</div>

CSS

/* Il wrapper tiene il trigger in linea con il testo della slide. */
.anchor-demo {
  display: inline-block;
}

/* Il pulsante diventa l'ancora: il nome sarà richiamato dal popover. */
.anchor-trigger {
  anchor-name: --filtri;
  width: 13rem;
  font: inherit;
  border: 2px solid #111;
  border-radius: 6px;
  background: #111;
  color: #fff;
  padding: 0.7rem 1rem;
  text-align: left;
}

/* Il popover segue l'ancora invece di restare centrato nella viewport. */
.anchor-menu {
  position: absolute;
  position-anchor: --filtri;
  /* anchor(bottom) prende il bordo basso del pulsante e aggiunge spazio. */
  top: calc(anchor(bottom) + 0.5rem);
  right: auto;
  bottom: auto;
  /* anchor(left) allinea il bordo sinistro del popover al pulsante. */
  left: anchor(left);
  margin: 0;
  width: 13rem;
  /* anchor-size(width) impedisce al menu di essere più stretto del trigger. */
  min-width: anchor-size(width);
  border: 2px solid #111;
  border-radius: 8px;
  background: #fff;
  padding: 0.85rem;
  box-shadow: 6px 6px 0 #e5e7eb;
}

/* Solo da aperto il popover diventa una griglia di opzioni. */
.anchor-menu:popover-open {
  display: grid;
  gap: 0.5rem;
  /* Safari: evita distribuzioni verticali inattese nel grid del popover. */
  align-content: start;
}

/* Stili interni: rendono leggibili titolo e opzioni del menu. */
.anchor-menu strong {
  display: block;
  font-size: 0.95rem;
}

.anchor-menu button {
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f8fafc;
  padding: 0.55rem 0.65rem;
  text-align: left;
}

Popover reali: menu, tooltip, pannelli

I popover servono per interfacce leggere, temporanee e contestuali. Non devono diventare modali travestiti.

Differenze tra dialog e popover

I due strumenti finiscono entrambi sopra la pagina, ma risolvono problemi diversi. dialog nasce per finestre di dialogo strutturate; popover aggiunge un comportamento di apertura e chiusura a qualunque elemento.

Quando usare <dialog>

Usate <dialog> quando serve una vera finestra di dialogo: l'utente deve leggere, scegliere o completare qualcosa in un contesto separato dal resto della pagina.

Serve modalità, cioè bloccare il resto della pagina

• Conferme per azioni critiche o irreversibili.
• Form di login o registrazione che devono essere completati.
• Avvisi importanti che l'utente deve vedere.
• Wizard o processi guidati multi-step.

Serve semantica da finestra di dialogo

• Finestre di impostazioni o preferenze.
• Pannelli informativi strutturati.
• Qualunque "finestra nella finestra".

method="dialog" è utile quando

• Il form deve solo chiudere il dialog.
• Volete leggere una scelta tramite returnValue.

HTML

<dialog id="conferma-eliminazione" class="lesson-dialog rendered-choice-dialog" open>
  <h3>Conferma eliminazione</h3>
  <p>Questa azione non può essere annullata. Tutti i dati saranno persi definitivamente.</p>
  <form method="dialog">
    <button value="annulla">Annulla</button>
    <button value="elimina" class="danger">Sì, elimina tutto</button>
  </form>
</dialog>

La preview lo mostra aperto per leggere la struttura. In una UI reale, un dialog che deve bloccare la pagina si apre con showModal().

Quando usare popover

Usate popover per contenuti non-modali e temporanei: compaiono sopra la pagina, ma non devono bloccare il lavoro dell'utente.

Casi tipici

• Menu contestuali e dropdown.
• Tooltip e suggerimenti informativi.
• Pannelli di filtri o opzioni.
• Notifiche temporanee.
• Selettori custom, per esempio date picker o color picker.

È una buona scelta quando volete il light dismiss

• L'utente deve poter chiudere facilmente.
• Click fuori significa chiudi.
• Non è critico se il pannello viene chiuso per sbaglio.

Riduce JavaScript perché: apertura, chiusura e comportamento standard possono essere gestiti direttamente da HTML.

HTML

<button popovertarget="filtri-prodotti" class="demo-action">Filtri</button>

<aside id="filtri-prodotti" popover class="lesson-popover filter-popover">
  <h3>Filtra risultati</h3>
  <label><input type="checkbox"> Solo disponibili</label>
  <label><input type="checkbox"> Spedizione gratuita</label>
</aside>

Il pulsante apre un pannello non-modale; Esc o click fuori lo chiudono automaticamente.

Quando usarli...insieme?!

La combinazione <dialog popover> unisce il meglio dei due mondi: mantiene la semantica corretta di una finestra di dialogo, ma usa il comportamento leggero e non-modale dei popover.

Cosa ottenete

• Semantica corretta da finestra di dialogo.
• Light dismiss, quindi click fuori per chiudere.
• Controllo senza JavaScript con popovertarget.
• Top layer automatico.
• Chiusura con Esc.
• Sempre non-modale: non blocca la pagina.

Quando usarlo: per la maggior parte dei dialog informativi non critici, come dettagli prodotto, informazioni di servizio, note estese o contenuti strutturati che l'utente può chiudere senza conseguenze.

HTML

<button popovertarget="info-prodotto-combo" class="demo-action">Dettagli prodotto</button>

<dialog id="info-prodotto-combo" popover class="lesson-dialog popover-dialog">
  <h3>Informazioni dettagliate</h3>
  <p>Materiale: 100% cotone biologico.</p>
  <p>Produzione: commercio equo certificato.</p>
  <p>Manutenzione: lavabile a 30°.</p>
  <button popovertarget="info-prodotto-combo" popovertargetaction="hide">Chiudi</button>
</dialog>

Sembra una finestra di dialogo, ma resta non-modale e si apre senza JavaScript.