Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 4. April 2018

Das neue Dialog-Element von HTML 5.2

Der neue Standard HTML 5.2 bringt uns ein neu­es Element namens <dia­log>. Damit las­sen sich moda­le Dialogboxen erstel­len, denen du mit etwas JavaScript zu Interaktivität ver­hel­fen kannst.

Die Verwendung des Elements ist sehr ein­fach und sieht in sei­ner Grundform so aus:

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

Das zusätz­li­che Attribut “open” sorgt dafür, dass die Dialogbox auch tat­säch­lich ange­zeigt 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 ziem­lich unat­trak­tiv aus.

Sie über­la­gert den kom­plet­ten Seiteninhalt, posi­tio­niert sich mit­tig auf dem Bildschirm und wird von einer Art Trauerrand gerahmt, des­sen Größe durch den Inhalt der Box deter­mi­niert wird. Die Überlagerung legt einen soge­nann­ten Backdrop über die Seite und sorgt dafür, dass kei­ne Interaktion mit den Inhalten außer­halb der Box mög­lich ist.

Backdrop ist eben­falls neu und der Name des ent­spre­chen­den Pseudo-Elements ::back­drop, dass du mit CSS sty­len kannst, um es etwa trans­pa­rent, far­big oder sonst­wie zu gestal­ten. Dialog sel­ber gestal­test du ganz nor­mal via CSS, wie jedes ande­re Element auch.
Innerhalb des Dialog-Elements ver­wen­dest du ande­re HTML-Elemente, um dei­ne Dialogbox zu struk­tu­rie­ren und nach dei­nen Erfordernissen auf­zu­bau­en. Da sind dei­ner Fantasie prin­zi­pi­ell kei­ne Grenzen gesetzt.

Ohne JavaScript nutzt uns das Element aller­dings recht wenig, denn nur ein sta­tisch offe­nes oder geschlos­se­nes Dialogfenster anzu­zei­gen, ist nicht so wirk­lich sinn­voll. Die JavaScript-Methoden showModal() und clo­se() erlau­ben dir die Steuerung des bereits erwähn­ten Attributs open.

Die ers­te Methode fügt das Attribut hin­zu, öff­net also die Dialogbox. Die zwei­te Methode ent­fernt das Attribut wie­der, schließt also die Dialogbox. Mehr Flexibilität brau­chen wir an der Stelle ja auch gar nicht.

Apropos neu…

Das ist doch gar nicht neu, magst du jetzt ein­wen­den. Und du hast natür­lich Recht. Im Chrome etwa wird genau die­se Implementierung schon seit 2014 unter­stützt. Im Firefox kannst du die Unterstützung ein­schal­ten. Microsoft über­legt noch, zumin­dest im Edge. Andere machen gar nicht mit. Mit die­sem JavaScript-Polyfill zwingst du auch die­se Unwilligen zur Kooperation.

Zur Ehrenrettung sei gesagt, dass das Dialog-Element ledig­lich unter Accessibility-Gesichtspunkten einen Sinn ergibt. Screenreader kön­nen die­se Elemente nun ein­deu­ti­ger iden­ti­fi­zie­ren. Für den tat­säch­li­chen Funktionsfall, also das Anzeigen von Dialogboxen gibt es diver­se Lösungen, deren bekann­tes­te wohl die Implementation in Bootstrap sein dürf­te, die sich sogar eben­falls zugäng­lich umset­zen lässt.

Neu im Wortsinne ist das Element also nicht. Es ist aber neu in den Standard auf­ge­nom­men und somit Teil von HTML 5.2 gewor­den.

(Dieser Beitrag erschien zuerst im Dr. Web-Newsletter #328, erschie­nen am 30.01.2018. Wenn du dir eben­falls exklu­si­ve Inhalte zeit­lich deut­lich vor den übri­gen Leserinnen und Lesern sichern willst, kannst du dich hier kos­ten­los und unver­bind­lich für den Newsletter anmel­den.)

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.

Schreibe einen Kommentar

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