Einige praktisch mit dem HTML-Dialogelement

Dies ist mein erster Blick auf die HTML<dialog></dialog> Element. Ich habe es schon eine Weile gewusst, aber bis jetzt nicht benutzt. Es bietet einige beeindruckende Funktionen. Ich kann zwar nicht definitiv sagen, ob Sie es in der Produktion verwenden sollten, aber es wird immer wieder lebensfähig.

Jenseits der Semantik: APIs und spezialisiertes CSS

Der<dialog></dialog> Das Element sticht auf, weil seine Browser -Unterstützung den Nutzen erheblich beeinflusst. Im Gegensatz zu früheren HTML5 -Elementen wird seine Funktionalität nicht einfach mit grundlegenden Alternativen repliziert. Sie können es nicht einfach als semantisch verbessert behandeln<div> . Seine Fähigkeiten erstrecken sich weit darüber hinaus.<h3 id="Browserunterstützung-Die-aktuelle-Landschaft"> Browserunterstützung: Die aktuelle Landschaft</h3> <p> Zum Zeitpunkt des Schreibens:</p> <ul> <li> Chrome unterstützt es (Version 37). Die Unterstützung von Edge steht unmittelbar bevor.</li> <li> Firefox hat die UA-Agent (UA) -Stile (Version 69), aber die volle Funktionalität erfordert das Flag <code>dom.dialog_element.enabled . Selbst dann erscheint die CSS -Unterstützung unvollständig.

Safari hat keine Unterstützung.

Polyfills sind verfügbar. Während eine breitere Unterstützung vorzuziehen ist, macht die vorhandene Unterstützung in Verbindung mit Polyfilling<dialog></dialog> Eine überzeugende Option für viele Entwickler.

Offen oder geschlossen: der grundlegende Zustand

<dialog>
  Ich bin geschlossen.
</dialog>
<dialog open="">
  Ich bin offen.
</dialog>

Benutzer-Agent-Styling: eine Grundlage

Chrome und Firefox zeigen ein ähnliches Standardstyling aus dem UA Stylesheet: zentriert mit automatischen Margen, einer dicken schwarzen Rand und inhaltsbasierter Größe. Diese Stile können mit benutzerdefiniertem CSS leicht überschrieben, um das Design Ihrer Website zu entsprechen.

JavaScript -API: Programmatische Kontrolle

Bei einem dialog -Referenz: Referenz:

 Dialog.Show ();
Dialog.hide ();

Verwenden Sie für modales Verhalten:

 Dialog.ShowModal ();

showModal() verwaltet den Hintergrund und interagiert mit einem "ausstehenden Dialogstapel", wodurch verschachtelte Modale ermöglicht werden.

HTML-basierter Schließung: Formulareingabe

Das Schließen eines Dialogs kann erreicht werden, indem ein Formular darin eingereicht wird:

Schließen

Der Hintergrund: ein visueller Hinweis

Programmatisch öffnen a<dialog></dialog> Bietet automatisch einen Hintergrund. Das Erscheinungsbild ist mit dem ::backdrop Pseudo-Element anpassbar. Zum Beispiel, um den Standard-halbtransparenten schwarzen Hintergrund durch rote Streifen zu ersetzen:

Cool Bonus: backdrop-filter ermöglicht Effekte wie Hintergrundverschwamm.

Fokusmanagement: Überlegungen zur Zugänglichkeit

Der<dialog></dialog> Das Element verschiebt automatisch den Fokus auf sich selbst, wenn er geöffnet wird (getestet mit Voice -Over auf macOS). Obwohl es nicht von Natur aus fällt (idealerweise für Modale geeignet ist), können CSS -Techniken dies erreichen.

Rob Dodson beschrieb Modals treffend als "den Boss -Kampf am Ende der Web -Barrierefreiheit". Der Eingeborene<dialog></dialog> Das Element vereinfacht diese Herausforderung erheblich, einschließlich der automatischen <kbd>Escape</kbd> der Key -Key. Wenn Sie nach draußen klicken, um zu schließen, wird noch nicht unterstützt, aber zukünftige Updates können dies basierend auf dem Feedback der Benutzer beheben. Der Artikel von IRE bietet wertvolle Einblicke in den Aufbau von zugänglichen benutzerdefinierten Dialogen.