Einige praktische Erfahrungen mit dem HTML-Dialog Element

Dies ist mein erster Blick auf das HTML-Element <dialog>. Ich wusste schon länger davon, habe es aber noch nicht ausprobiert. Es hat einige ziemlich coole und überzeugende Funktionen. Ich kann nicht entscheiden, ob Sie es in der Produktion auf Ihren Websites verwenden sollten, aber ich denke, es beginnt möglich zu werden.

Es ist nicht nur ein semantisches Element, es hat APIs und spezielles CSS.

Wir werden uns das gleich ansehen, aber es ist bemerkenswert, weil es die Browserunterstützung wichtig macht.

Als wir zum ersten Mal HTML5-Elemente wie <article> erhielten, war es so ziemlich egal, ob der Browser es unterstützte oder nicht, denn nichts war schlechter, wenn Sie es verwendeten. Sie konnten es als Block-Element definieren, und es war einfach wie ein bedeutungsloses div, das Sie sowieso verwendet hätten.

Dennoch würde ich <dialog> nicht einfach als „semantischeren Ersatz für <div>“ verwenden. Es hat zu viel Funktionalität dafür.

Machen wir mal die Sache mit der Browserunterstützung.

Während ich schreibe

• Chrome hat es (37+), also wird Edge es bald haben.
• Firefox hat die User-Agent (UA) Stile implementiert (69+), aber die Funktionalität ist hinter einer dom.dialog_element.enabled Flagge verborgen. Selbst mit der Flagge erhalten wir anscheinend noch nicht die CSS-Funktionen.
• Keine Unterstützung von Safari.

Es ist polyfillbar.

Es ist sicherlich überzeugender, Funktionen mit besserer Unterstützung zu verwenden, aber ich würde sagen, es ist nah dran und könnte gerade noch die Linie überschreiten, wenn Sie sowieso ein Typ für Polyfills sind.

Weiter zu den saftigen Sachen.

Ein Dialog ist entweder open oder nicht.

<dialog>
  I'm closed.
</dialog>

<dialog open>
  I'm open.
</dialog>

Es gibt einige UA-Stile für sie.

Es scheint in Chrome und Firefox übereinzustimmen. Die UA-Stylesheet hat sie zentriert mit automatischen Rändern, dicken schwarzen Linien und auf Inhalt größenangepasst.

Siehe den Pen
Einfacher offener Dialog von Chris Coyier (@chriscoyier)
auf CodePen.

Wie bei allen UA-Stilen werden Sie diese fast sicher mit Ihren eigenen schicken Dialogstilen überschreiben – Schatten und Typografie und was auch immer zum Stil Ihrer Website passt.

Es gibt eine JavaScript-API zum Öffnen und Schließen.

Nehmen wir an, Sie haben eine Referenz auf das Element mit dem Namen dialog

dialog.show();
dialog.hide();

Siehe den Pen
Einfacher schaltbarer Dialog von Chris Coyier (@chriscoyier)
auf CodePen.

Sie sollten jedoch wahrscheinlich diesen expliziteren Befehl verwenden

dialog.showModal();

Das ist es, was den Hintergrund (Backdrop) zum Laufen bringt (und wir werden das bald behandeln). Ich bin mir nicht sicher, ob ich es ganz verstehe, aber die Spezifikation spricht von einem „pending dialog stack“ (wartende Dialog-Stapel) und diese API wird den modalen Dialog, der auf diesen Stapel wartet, öffnen. Hier ist ein modal, das einen zweiten stapelbaren modal öffnen kann

Siehe den Pen
Einfacher offener Dialog von Chris Coyier (@chriscoyier)
auf CodePen.

Es gibt auch eine HTML-basierte Methode, sie zu schließen.

Wenn Sie eine spezielle Art von Formular darin einfügen, schließt das Absenden des Formulars das Modal.

<form method="dialog">
  <button>Close</button>
</form>

Siehe den Pen
Dialog mit Formular, das Dialog schließt von Chris Coyier (@chriscoyier)
auf CodePen.

Beachten Sie, dass Sie eine Hintergrundabdeckung erhalten, wenn Sie den Dialog programmatisch öffnen.

Dies war schon immer eine der kniffligsten Dinge beim Erstellen eigener Dialoge. Ein gängiges UI-Muster ist es, den Hintergrund hinter dem Dialog abzudunkeln, um die Aufmerksamkeit auf den Dialog zu lenken.

Das erhalten wir kostenlos mit <dialog>, vorausgesetzt, Sie öffnen ihn über JavaScript. Sie steuern das Aussehen mit dem ::backdrop Pseudo-Element. Anstelle des standardmäßigen Schwarz mit geringer Deckkraft machen wir es rot mit Streifen

Siehe den Pen
Benutzerdefinierter Dialog-Hintergrund von Chris Coyier (@chriscoyier)
auf CodePen.

Cooler Bonus: Sie können backdrop-filter verwenden, um Dinge wie das Weichzeichnen des Hintergrunds zu tun.

Siehe den Pen
Nativer Dialog von Chris Coyier (@chriscoyier)
auf CodePen.

Er verschiebt den Fokus für Sie

Ich weiß nicht viel über diese Dinge, aber ich kann VoiceOver auf meinem Mac aktivieren und sehen, wie der Dialog in den Fokus rückt, wenn ich den Button auslöse, der das Modal öffnet.

Er sperrt den Fokus dort nicht, und ich höre, das ist ideal für Modale. Wir haben einen cleveren Trick dafür, der CSS verwendet, den Sie untersuchen könnten.

Rob Dodson sagte: „Modale sind eigentlich der Endgegner bei der Web-Barrierefreiheit.“ Es ist ziemlich gut, dass die native Browserversion bei vielem hilft. Sie erhalten sogar automatisch die Funktionalität zum Schließen mit der Escape-Taste, was großartig ist. Es gibt jedoch kein Schließen durch Klick außerhalb. Vielleicht eines Tages, je nach Benutzerfeedback.

Ires Artikel ist eine Go-to-Ressource zum Erstellen eigener Dialoge und enthält viele Überlegungen zur Barrierefreiheit bei deren Verwendung.