Dieter Petereit 4. April 2018

Das neue Dialog-Element von HTML 5.2

Der neue Standard HTML 5.2 bringt uns ein neues Element namens <dialog>. Damit lassen sich modale Dialogboxen erstellen, denen du mit etwas JavaScript zu Interaktivität verhelfen kannst.

Die Verwendung des Elements ist sehr einfach und sieht in seiner Grundform so aus:

<dialog open="">
Das ist eine Dialogbox!
</dialog>

Das zusätzliche Attribut “open” sorgt dafür, dass die Dialogbox auch tatsächlich angezeigt wird. Ohne das Attribut bedarf es schon zur Öffnung der Box des Einsatzes von JavaScript. Im Standard, also ohne, dass du CSS zum Einsatz bringst, sieht die Dialogbox ziemlich unattraktiv aus.

Sie überlagert den kompletten Seiteninhalt, positioniert sich mittig auf dem Bildschirm und wird von einer Art Trauerrand gerahmt, dessen Größe durch den Inhalt der Box determiniert wird. Die Überlagerung legt einen sogenannten Backdrop über die Seite und sorgt dafür, dass keine Interaktion mit den Inhalten außerhalb der Box möglich ist.

Backdrop ist ebenfalls neu und der Name des entsprechenden Pseudo-Elements ::backdrop, dass du mit CSS stylen kannst, um es etwa transparent, farbig oder sonstwie zu gestalten. Dialog selber gestaltest du ganz normal via CSS, wie jedes andere Element auch.
Innerhalb des Dialog-Elements verwendest du andere HTML-Elemente, um deine Dialogbox zu strukturieren und nach deinen Erfordernissen aufzubauen. Da sind deiner Fantasie prinzipiell keine Grenzen gesetzt.

Ohne JavaScript nutzt uns das Element allerdings recht wenig, denn nur ein statisch offenes oder geschlossenes Dialogfenster anzuzeigen, ist nicht so wirklich sinnvoll. Die JavaScript-Methoden showModal() und close() erlauben dir die Steuerung des bereits erwähnten Attributs open.

Die erste Methode fügt das Attribut hinzu, öffnet also die Dialogbox. Die zweite Methode entfernt das Attribut wieder, schließt also die Dialogbox. Mehr Flexibilität brauchen wir an der Stelle ja auch gar nicht.

Apropos neu…

Das ist doch gar nicht neu, magst du jetzt einwenden. Und du hast natürlich Recht. Im Chrome etwa wird genau diese Implementierung schon seit 2014 unterstützt. Im Firefox kannst du die Unterstützung einschalten. Microsoft überlegt noch, zumindest im Edge. Andere machen gar nicht mit. Mit diesem JavaScript-Polyfill zwingst du auch diese Unwilligen zur Kooperation.

Zur Ehrenrettung sei gesagt, dass das Dialog-Element lediglich unter Accessibility-Gesichtspunkten einen Sinn ergibt. Screenreader können diese Elemente nun eindeutiger identifizieren. Für den tatsächlichen Funktionsfall, also das Anzeigen von Dialogboxen gibt es diverse Lösungen, deren bekannteste wohl die Implementation in Bootstrap sein dürfte, die sich sogar ebenfalls zugänglich umsetzen lässt.

Neu im Wortsinne ist das Element also nicht. Es ist aber neu in den Standard aufgenommen und somit Teil von HTML 5.2 geworden.

(Dieser Beitrag erschien zuerst im Dr. Web-Newsletter #328, erschienen am 30.01.2018. Wenn du dir ebenfalls exklusive Inhalte zeitlich deutlich vor den übrigen Leserinnen und Lesern sichern willst, kannst du dich hier kostenlos und unverbindlich für den Newsletter anmelden.)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück