Een Hands-On met de HTML-Dialoogvenster Element

0
22

Dit ben ik op zoek naar de HTML <dialoogvenster> element voor de eerste keer. Ik heb bewust voor een tijdje, maar nog niet voor een spin nog. Het heeft sommige vrij koel en boeiende functies. Ik kan niet voor jou beslissen als je het zou moeten gebruiken in de productie op uw sites, maar ik zou denken dat het begint te lukken.

Het is niet alleen een semantisch element heeft Api ‘ s en speciale CSS.

We krijgen om dat spul in een moment, maar het is opvallend want het maakt de browser ondersteuning dingen belangrijk.

Toen we voor het eerst kreeg HTML5 elementen zoals <article>, het maakte niet uit of de browser ondersteund of niet omdat er niets is erger-off in die scenario ‘ s als je het gebruikt. Je zou kunnen maken van het blok-niveau en het was gewoon een betekenisloze div u zou hebben gebruikt.

Dat gezegd hebbende, ik zou het niet gewoon gebruik maken van <dialoogvenster> als een “meer semantische <div> vervangen.” Het is te veel functionaliteit voor die.

Laten we de browser ondersteuning ding.

Als ik schrijf:

  • Chrome heeft het (37+), zodat Rand over om het te krijgen.
  • Firefox is de User-Agent (UA) stijlen in de plaats (69+), maar de functionaliteit is achter een dom.dialog_element.ingeschakeld vlag. Zelfs met de vlag, het maakt niet uit als we de CSS spullen nog.
  • Geen steun van Safari.

Het is polyfillable.

Het is zeker meer aantrekkelijke functies te kunnen gebruiken met een betere ondersteuning dan dit, maar ik zou zeggen: het is in de buurt en is het misschien gewoon over de lijn als je de polyfilling type toch.

Op de sappige dingen.

Een dialoog is open of niet.

<dialoogvenster>
Ben ik gesloten.
</dialog ->

<dialoogvenster openen>
Ik ben open.
</dialog ->

Er is een aantal UA styling aan hen.

Het lijkt te passen in Chrome en Firefox. De UA-stylesheet heeft in het midden met de automatische marges, dikke zwarte lijnen, de grootte van de inhoud.

Zie de Pen
Basic Open Dialoog door Chris Coyier (@chriscoyier)
op CodePen.

Zoals elke UA stijlen, zult u bijna zeker overschrijven met uw eigen zin in het dialoogvenster stijlen — de schaduw en de typografie en alles wat met uw website ‘ s stijl.

Er is een JavaScript-API voor het openen en sluiten hen.

Stel dat u een verwijzing naar het element met de naam dialoog:

dialoog.toon();
dialoog.hide();

Zie de Pen
Basic Togglable Dialoog door Chris Coyier (@chriscoyier)
op CodePen.

Je moet waarschijnlijk gebruik maken van dit meer expliciete opdracht al:

dialoog.showModal();

Dat maakt de achtergrond van het werk (en we krijgen om dat snel). Ik weet niet of ik heel grok, maar de spec spreekt over een ‘in afwachting van de dialoog stack” en met deze API opent de modal-in afwachting van die stapel. Hier is een modale die open kunnen een tweede stapelen modale:

Zie de Pen
Basic Open Dialoog door Chris Coyier (@chriscoyier)
op CodePen.

Er is ook een HTML-gebaseerde manier af te sluiten.

Als u een speciale vorm er, met het verzenden van het formulier zullen sluiten van de modal.

<form method=”dialoog”>
<toets>Sluiten</button>
</form>

Zie de Pen
Dialoog met de Vorm, die Sluit het Dialoogvenster door Chris Coyier (@chriscoyier)
op CodePen.

Merk op dat als u via het dialoogvenster openen, krijg je een achtergrond te dekken.

Dit is altijd al een van de meer pietluttige dingen over het bouwen van uw eigen dialoogvensters. Een gemeenschappelijke UI patroon is te donkerder de achtergrond achter het dialoogvenster om de aandacht te richten op de dialoog.

Die krijgen We gratis met <dialoogvenster>, er van uitgaande dat u opent via JavaScript. U bepalen de uitstraling van de met de ::achtergrond pseudo-element. In plaats van de lage-dekking zwarte standaard, let ‘ s do rood met strepen:

Zie de Pen
Aangepast Dialoogvenster Achtergrond van Chris Coyier (@chriscoyier)
op CodePen.

Koele bonus van de storting: u kunt gebruik maken van de achtergrond-filter om dingen te doen, zoals de achtergrond te vervagen.

Zie de Pen
Native-Dialoogvenster door Chris Coyier (@chriscoyier)
op CodePen.

Het verplaatst de focus voor u

Ik weet niet veel over dit soort dingen, maar ik kan het vuur van VoiceOver op mijn Mac en zie het dialoogvenster in beeld, zie dat wanneer ik voor het activeren van de knop weergegeven waarmee de modal.

Het maakt niet val focus daar, en ik hoor die ideaal is voor modals. We hebben een slim idee om die gebruik te maken van CSS die u zou kunnen ontdekken.

Rob Dodson zei: “modals zijn eigenlijk de baas strijd aan het eind van de toegankelijkheid van websites.” Wel leuk dat de native versie van de browser helpt met veel van. U ook automatisch op de Escape-toets sluiten van functionaliteit, dat is geweldig. Er is geen klik buiten te sluiten, dat wel. Misschien ooit in afwachting van de feedback van de gebruikers.

Ire artikel is een go-to bron voor het bouwen van uw eigen dialoogvensters en een ton van de toegankelijkheid overwegingen bij het gebruik ervan.