Einige Hands-On mit dem HTML-Element Dialog

0
12

Das ist mir auf der Suche in den HTML – <dialog> – element für das erste mal. Ich habe bewusst eine Weile, aber noch nicht genommen, es für einen spin noch. Es hat einige ziemlich Coole und überzeugende features. Ich kann nicht für Sie entscheiden, wenn Sie sollten es verwenden, in der Produktion auf Ihre Websites, aber ich würde denken, es ist das starten möglich sein.

Es ist nicht nur ein semantisches element, es hat APIs und speziellen CSS.

Wir bekommen das Zeug im moment, aber es ist erwähnenswert, weil es lässt die browser-Unterstützung Zeug signifikant.

Als wir zum ersten mal HTML5-Elemente wie <article>, ist es so ziemlich egal, wenn der browser es unterstützt oder nicht, denn nichts war schlimmer-aus in solchen Szenarien, wenn man es verwendet. Man konnte es auf block-level und es war wie in einem bedeutungslosen div müssten Sie trotzdem verwendet.

Das heißt, ich würde nicht nur mit <dialog> als “semantischen <div> ersetzt werden kann.” Hat es zu viel Funktionalität für, die.

Lassen Sie uns tun, die browser-support-Sache.

Wie ich Schreibe:

  • Chrome hat es (37+), so-Rand ist über es zu bekommen.
  • Firefox hat den User-Agent (UA) – Stile-in-place (69+), aber die Funktionalität ist hinter einem dom.dialog_element.aktiviert-flag. Auch mit der Flagge, sieht es nicht wie bekommen wir die CSS-Sachen noch.
  • Keine Unterstützung von Safari.

Es ist polyfillable.

Es ist sicherlich überzeugender zu verwenden, bietet eine bessere Unterstützung als dieses, aber ich würde sagen, es ist in der Nähe und es könnte nur die Linie überqueren, wenn Sie die polyfilling Typ sowieso.

Auf der saftigen Sachen.

Ein dialog, der entweder offen ist oder nicht.

<dialog>
Ich bin geschlossen.
</dialog>

<dialog open>
Bin ich offen.
</dialog>

Es gibt einige UA styling zu Ihnen.

Es scheint übereinstimmung in Chrome und Firefox. Das UA-stylesheet hat es zentriert mit automatischer Ränder, Dicke schwarze Linien, angepasst an den Inhalt.

Siehe Stift
Basic-Öffnen-Dialog von Chris Coyier (@chriscoyier)
auf CodePen.

Wie jedes UA-Stile, werden Sie fast sicher überschreiben Sie Sie mit Ihrer eigenen Lust dialog Stilen — Schatten und Typografie und was sonst noch paßt Ihre Website-Stil.

Es ist eine JavaScript-API zum öffnen und schließen.

Angenommen Sie haben eine Referenz auf das element mit dem Namen dialog:

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

Siehe Stift
Basic Togglable Dialog von Chris Coyier (@chriscoyier)
auf CodePen.

Sie sollten wahrscheinlich verwenden Sie diese mehr den ausdrücklichen Befehl aber:

dialog.showModal();

Das macht den hintergrund der Arbeit (und dazu kommen wir gleich). Ich bin mir nicht sicher, dass ich durchaus verstehen, aber das die spec spricht von einem “ausstehend” dialog-Stapel” und diese API öffnet sich die modal-pending, stack. Hier ist ein modales können, öffnen Sie eine zweite stacking-modal:

Siehe Stift
Basic-Öffnen-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 gibt, übermitteln des Formulars schließen Sie den modal.

<form method=”dialog”>
<button>Schließen</button>
</form>

Siehe Stift
Dialog mit Form, Schließt Dialog von Chris Coyier (@chriscoyier)
auf CodePen.

Beachten Sie, dass wenn Sie programmgesteuert öffnen Sie den dialog, erhalten Sie einen hintergrund-Abdeckung.

Dies war schon immer eines der heikelsten Dinge über den Aufbau Ihrer eigenen Dialoge. Eine gemeinsame Benutzeroberfläche Muster verdunkeln Sie den hintergrund hinter dem Dialogfeld, um die Aufmerksamkeit auf den dialog.

Wir bekommen Sie kostenlos mit <dialog>, vorausgesetzt, Sie öffnen es über JavaScript. Sie Steuern das Aussehen der es mit dem :: – hintergrund-pseudo-element. Statt die niedrige Opazität, schwarz Standard, lassen Sie uns tun, rot mit Streifen:

Siehe Stift
Eigenes Dialogfeld Hintergrund von Chris Coyier (@chriscoyier)
auf CodePen.

Cool-bonus nutzen: Sie können das hintergrund-filter, um Dinge zu tun wie den hintergrund Weichzeichnen.

Siehe Stift
Native Dialog von Chris Coyier (@chriscoyier)
auf CodePen.

Es verschiebt den Fokus für Sie

Ich weiß nicht viel über dieses Zeug, aber ich kann Feuer bis VoiceOver auf meinem Mac und sehen Sie den dialog in den Fokus gerückt sehen, dass ich beim auslösen der Schaltfläche, öffnet sich die modal.

Es spielt keine trap Fokus da, und ich höre, das ist ideal für modals. Wir haben eine clevere Idee für die Verwendung von CSS, die Sie erforschen könnten.

Rob Dodson sagte: “modals sind eigentlich der boss Kampf am Ende von web accessibility.” Irgendwie schön, dass der native browser-version hilft, davon eine Menge. Sie selbst bekommen automatisch die Escape-Taste schließen-Funktionalität, das ist toll. Es gibt keine klicken Sie außerhalb, um zu schließen, wenn. Vielleicht eines Tages angemeldete Benutzer-feedback.

Ire-der Artikel ist ein go-to-Ressource für den Aufbau Ihrer eigenen Dialoge und eine Tonne von accessibility Aspekten bei der Verwendung von Ihnen.