HTML6: l’elemento dialog

Stando a quanto dichiarato dai componenti del WHATWG (Web Hypertext Application Technology Working Group), il rilascio di HTML6 avverrà con modalità differenti rispetto a quelle adottate per la precedente versione 5, in sostanza non verrà distribuito un aggiornamento cumulativo delle specifiche ma si opterà per un rilascio graduale in modo che i browser vendor possano integrare facilmente il supporto alle nuove feature.

Tra queste ultime alcune sono state già implementate nelle applicazioni più diffuse per la navigazione su Internet, altre arriveranno nel breve e medio periodo mentre ve ne sono alcune che, nel caso peggiore, potrebbero essere escluse dallo standard in extremis e rimandate a successivi minor update. In ogni caso una delle funzionalità più interessanti potrebbe essere l’introduzione di un supporto per i native modals. Si tratta di un’opzione ben conosciuta dagli utilizzatori di framework come React e le sue specifiche godono di una parziale implementazione già a partire da HTML 5.2.

Parliamo in sostanza di un elemento che equivale alle finestre modali di JavaScript, ne troviamo un esempio nell’elemento dialog che è stato già standardizzato da tempo. Nonostante ciò i browser che lo supportano pienamente sono ancora pochi (come per esempio Google Chrome) e molto dipende dal fatto che per il momento risulta molto più pratico ricorrere all’alternativa JavaScript based che oggi viene ampiamente utilizzata in siti Web e Web application.

A tal proposito un semplice esempio di apertura del metodo modale tramite JavaScript potrebbe essere il seguente:

<dialog>
  <form method="dialog">
    <input type="submit" value="Ok" />
    <input type="submit" value="Cancel" />
  </form>
</dialog>

Nel caso specifico di HTML il tag dialog ha il compito di definire un box di dialogo o una finestra di dialogo permettendo di creare pop-up modal in una pagina Web. L’argomento accettato è invece open grazie al quale è possibile specificare che l’elemento dialog è attivo e che l’utente può interagire liberamente con esso.

Analizzando il codice proposto in precedenza notiamo che in modalità predefinita l’elemento genera uno strato di background con al di sotto del contenuto non interattivo, associando un attributo al metodo si ha la possibilità di inviare un valore e passarlo all’oggetto del metodo. Un semplice esempio delle scenario appena descritto applicato ad HTML potrebbe essere il seguente:

<dialog open>
  <p>Una dialog box qualsiasi per l'interazione con l'utente.</p>
</dialog>

Quando utilizzato l’attributo open può quindi essere attivato alternativamente per aprire e chiudere la finestra di dialogo in un form.

Via Morioh