Några praktiska Dialogrutan HTML-Element

0
10

Det här är jag, titta på den HTML <dialogrutan> – element för första gången. Jag har varit medveten om det för ett tag, men har inte tagit det för en provtur ännu. Det har ganska cool och spännande funktioner. Jag kan inte bestämma dig om du ska använda det i produktionen på dina webbplatser, men jag tror att det börjar vara möjligt.

Det är inte bara en semantisk faktor, det har Api: er och speciell CSS.

Vi kommer att få till det där i en stund, men det är anmärkningsvärt, eftersom det gör att webbläsaren stöd saker betydande.

När vi först fick HTML5-element som <artikel> det ganska mycket inte fråga om webbläsare som stöds den eller inte, eftersom ingenting var sämre av i de scenarier om du använt det. Kan du göra det blockera-nivå och det var precis som en meningslös div du skulle ha använt ändå.

Som sagt, jag skulle inte bara använda <dialogrutan> som en “mer semantisk <div> ersättare.” Det blev för mycket funktionalitet för att.

Låt oss göra den webbläsare som stöder sak.

Som jag skriver:

  • Chrome har det (37+), så Edge är på väg att få det.
  • Firefox har User-Agent (UA) stilar på plats (69+), men funktionaliteten är bakom en dom.dialog_element.aktiverad flaggan. Även med flagga, det ser inte ut som att vi får CSS grejer ännu.
  • Inget stöd från Safari.

Det är polyfillable.

Det är säkert mer övertygande för att använda funktioner med ett bättre stöd än det här, men jag skulle säga att det är nära och det kan bara gå över gränsen om du är polyfilling typ i alla fall.

På de saftiga saker.

En dialogruta är öppen eller inte.

<dialogrutan>
Jag är stängt.
</dialog>

<dialogrutan öppna>
Jag är öppen.
</dialog>

Det är några UA styling till dem.

Det verkar stämma i Chrome och Firefox. UA stylesheet har det centrerad med auto marginaler, tjocka svarta linjer, medelstora till innehållet.

Se Pennan
Grundläggande Öppna Dialogrutan genom att Chris Coyier (@chriscoyier)
på CodePen.

Precis som alla UA stilar, du kommer nästan säkert att åsidosätta dem med din egen fantasi dialogrutan stilar — skuggor och typografi och allt annat som matchar din webbplats stil.

Det är ett JavaScript-API för att öppna och stänga dem.

Säg att du har en referens till elementet som heter dialogrutan:

dialogrutan.visa();
dialogrutan.dölja();

Se Pennan
Grundläggande Togglable Dialogrutan av Chris Coyier (@chriscoyier)
på CodePen.

Du bör nog använda detta mer explicit kommando om:

dialogrutan.showModal();

Det är det som gör den bakgrunden arbete (och vi återkommer till det snart). Jag är inte säker på att jag ganska grok det, men spec talar om ett “pågående dialog stack” och detta API kommer att öppna den modala i avvaktan på att stapla. Här är en modal som kan öppna en andra stapling modal:

Se Pennan
Grundläggande Öppna Dialogrutan genom att Chris Coyier (@chriscoyier)
på CodePen.

Det finns också ett HTML-baserat sätt att stänga dem.

Om du sätter en speciell typ av form i det, skicka formuläret kommer att stänga modal.

<form method=”dialogrutan”>
<knappen>Stäng</button>
</form>

Se Pennan
Dialog med Form som Stänger Dialogrutan genom att Chris Coyier (@chriscoyier)
på CodePen.

Observera att om du programmatiskt öppna dialogrutan får du en bakgrund täcka.

Detta har alltid varit en av de mer petiga saker om att bygga din egen dator. En gemensam UI mönster är mörkare bakgrunden bakom dialogrutan för att fokusera på dialogen.

Vi få det gratis med <dialogrutan>, förutsatt att du öppnar det via JavaScript. Du styr utseendet på det med ::bakgrund pseudo-element. I stället för att den med låg opacitet svart standard, låt oss göra rött med ränder:

Se Pennan
Anpassad Dialogruta Bakgrund av Chris Coyier (@chriscoyier)
på CodePen.

Cool bonus: du kan använda bakgrund-filter för att göra saker som oskärpa på bakgrunden.

Se Pennan
Native Dialogrutan av Chris Coyier (@chriscoyier)
på CodePen.

Det flyttar fokus för dig

Jag vet inte mycket om det här, men jag kan skjuta upp VoiceOver på min Mac och se dialogrutan komma i fokus och se att när jag utlösa knappen som öppnar modal.

Det behöver inte fälla fokus där, och jag hör det är perfekt för modals. Vi har en smart idé för att utnyttja CSS-du kan utforska.

Rob Dodson sade: “modals är faktiskt boss kamp i slutet av tillgänglighet på webben.” Ganska skönt att den inbyggda webbläsaren versionen hjälper till med en hel del av den. Du även automatiskt få Escape-tangenten för att stänga funktionalitet, vilket är bra. Det finns inga klicka utanför för att stänga, men. Kanske en dag i avvaktan på feedback från användarna.

Ire: s artikel är ett gå till resurs för att skapa din egen dialogrutor och en ton av tillgänglighet överväganden när du använder dem.