Il tag *dialog* in HTML5: esempi e spiegazione su come generare finestre di dialogo

Introduzione

La gestione di popup e finestre modali è sempre stata una sfida per gli sviluppatori web. Tradizionalmente, questi elementi richiedevano combinazioni di HTML, CSS e JavaScript creati ad hoc dallo sviluppatore per funzionare correttamente. Con l'introduzione dell'elemento <dialog> in HTML5, questa complessità viene ridotta, offrendo una soluzione nativa e standard per creare finestre di dialogo accessibili e facili da gestire. In questo articolo esploreremo come utilizzare <dialog> e quali vantaggi offre.

Cos'è l'elemento <dialog>

L'elemento <dialog> è progettato per creare finestre di dialogo, sia modali che non modali. Si tratta di un elemento nativo che offre un supporto integrato per mostrare contenuti sopra il resto della pagina, bloccando l'interazione con gli elementi sottostanti nel caso di dialoghi modali.

I vantaggi principali dell'utilizzare questo tag HTML possono essere riassunti in una accessibilità migliorata grazie al focus gestito automaticamente; nella semplificazione del codice, che ora non necessita di librerie esterno o implementazioni ad-hoc e nel supporto di funzionalità native come il comportamento modale e non modale.

Come utilizzare il tag <dialog>: un esempio concreto

Ecco un esempio di base per creare una finestra di dialogo. Il codice è piuttosto conciso e semplice da comprendere anche se viene coinvolto sia codice HTML che JavaScript.

  <dialog id="myDialog">
  <p>Questo è un dialogo semplice.</p>
  <button id="closeDialog">Chiudi</button>
</dialog>
 
<button id="openDialog">Apri il dialogo</button>
 
<script>
  const dialog = document.getElementById('myDialog');
  const openButton = document.getElementById('openDialog');
  const closeButton = document.getElementById('closeDialog');
 
  openButton.addEventListener('click', () => dialog.showModal());
  closeButton.addEventListener('click', () => dialog.close());
</script>

La spiegazione è semplice: i metodi show() o showModal() (a seconda del caso si voglia un comportamento modale o no) si occupano di aprire la finestra di dialogo, mentre il metodo close() si occupa (guarda un po') di chiuderla.

Accessibilità e usabilità

L'elemento <dialog> è stato progettato con l'accessibilità in mente.

• Quando un dialogo è aperto, il focus è automaticamente spostato al suo interno.
• Gli utenti non possono interagire con gli elementi al di fuori di un dialogo modale.
• Per migliorare l'accessibilità, è possibile usare attributi aria, come aria-labelledby e aria-describedby.

Ecco un esempio di dialogo che utilizza attributi aria.

  <dialog aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
  <h2 id="dialogTitle">Titolo del dialogo</h2>
  <p id="dialogDesc">Descrizione del contenuto del dialogo.</p>
  <button>Chiudi</button>
</dialog>
 

Stile e personalizzazione con CSS

Ovviamente, anche lo stile dell'elemento <dialog> è personalizzabile attraverso il CSS, in tal senso è interessante lo pseudoelemento ::backdrop che permette di selezionare lo sfondo presente dietro il dialogo aperto. Qui di seguito un semplice codice CSS per personalizzare la resa grafica del nostro dialogo e il suo sfondo.

  dialog {
  border: none;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

Compatibilità tra browser

• Google Chrome ≥ 37
• Microsoft Edge ≥ 79
• Safari (macOS/iOS) ≥ 15
• Firefox ≥ 98
• Opera ≥ 24
• Internet Explorer - Non supportato

Al momento, <dialog> è supportato dalla maggior parte dei browser moderni, inclusi Chrome, Edge e Firefox. Tuttavia, per garantire il funzionamento su browser meno recenti, è possibile utilizzare un polyfill, come quello fornito da Google

Conclusione

Il nuovo elemento <dialog> di HTML5 semplifica notevolmente la gestione di popup e modali, migliorando l'accessibilità e riducendo la necessità di codice complesso. Con il supporto dei browser moderni e la possibilità di aggiungere polyfill, non ci sono scuse per non adottare questa nuova funzionalità nei tuoi progetti.