Τα νέα HTML στοιχεία «dialog» και «details/summary»

Σε αυτό το άρθρο θα γνωρίσουμε τα HTML5 elements που μπορούμε να χρησιμοποιήσουμε για να ανοιγοκλείσουμε διαλόγους, καθώς και να εμφανίσουμε/αποκρύψουμε περισσότερες πληροφορίες μετά από αλληλεπίδραση του χρήστη.

Το στοιχείο <dialog> αντιπροσωπεύει ένα κουτί αναδυόμενου διαλόγου που συμπεριλαμβάνει την επιλογή να καθιστά την υπόλοιπη σελίδα ανενεργή κατά την διάρκεια χρήσης του. Αυτό μπορεί να φανεί χρήσιμο στο να εμποδίσει την αλληλεπίδραση του χρήστη μέχρι να μας δώσει μια απάντηση ή να επιβεβαιώσει μια ενέργεια.

Παράδειγμα:

<dialog>
  <p>Αυτός είναι ο διάλογος!</p>
  <button id="close">Κλείσιμο</button>
</dialog>
<button id="show">Άνοιγμα Διαλόγου!</button>
<script>
  var dialog = document.querySelector('dialog');
  document.querySelector('#show').onclick = () => dialog.show();
  document.querySelector('#close').onclick = () => dialog.close();
</script>

Η υποστήριξη από τους browsers δεν είναι ακόμα ευρεία όπως μπορείτε να δείτε στο caniuse, μπορείτε όμως να χρησιμοποιήσετε ένα polyfill για όσους browsers δεν το υποστηρίζουν ακόμα.

Τα <dialog> και <summary> tags δημιουργούν ένα γραφικό στοιχείο στο οποίο φαίνεται μόνο η περίληψη ενώ οι λεπτομέρειες είναι κρυμμένες και εμφανίζονται μετά από αίτημα του χρήστη.

Παράδειγμα:

<details>
  <summary>Περίληψη - Πατήστε εδώ</summary>
  <p>Λεπτομέρειες...</p>
</details>

Εδώ η υποστήριξη των browsers είναι καλύτερη με μόνο τον IE και Edge να μη τα έχουν υλοποιήσει ακόμα, μπορείτε όμως και πάλι να χρησιμοποιήσετε κάποιο polyfill για αυτούς τους browsers.