Verkfæraleiðbeiningar líða eins og minnsta UI vandamálið sem þú getur lent í. Þau eru pínulítil og venjulega falin. Þegar einhver spyr hvernig eigi að smíða einn kemur hefðbundna svarið næstum alltaf aftur með því að nota eitthvað JavaScript bókasafn. Og lengi vel var það skynsamlega ráðið. Ég fylgdi því líka. Á yfirborðinu er ábending einföld. Snúðu eða einbeittu þér að þætti, sýndu lítinn kassa með texta og feldu hann svo þegar notandinn fjarlægist. En þegar þú sendir einn til raunverulegra notenda byrja brúnirnar að sjást. Lyklaborðsnotendur Flippa í kveikjuna, en sjá aldrei tólabendinguna. Skjálesendur tilkynna það tvisvar, eða alls ekki. Ábendingin flöktir þegar þú hreyfir músina of hratt. Það skarast efni á smærri skjám. Með því að ýta á Esc lokar það ekki. Einbeitingin glatast. Með tímanum stækkaði tólavísakóðinn minn í eitthvað sem ég vildi ekki eiga lengur. Hlustendur viðburða hrannast upp. Sveima og fókus þurfti að meðhöndla sérstaklega. Utan smellir þurftu sérstök tilvik. Halda þurfti ARIA eiginleikum í höndunum. Sérhver lítil lagfæring bætti við öðru lagi af rökfræði. Bókasöfn hjálpuðu til en þau voru líka meira eins og svartir kassar sem ég vann í stað þess að skilja til fulls hvað var að gerast á bakvið tjöldin. Það var það sem ýtti mér til að skoða nýrra Popover API. Mig langaði að sjá hvað myndi gerast ef ég endurbyggti eina tólgápu með því að nota innfædda líkan vafrans án þess að nota bókasafn. Þegar við byrjum er rétt að hafa í huga að eins og með alla nýja eiginleika eru nokkrir hlutir við hann sem enn er verið að strauja út. Sem sagt, það nýtur eins og er mikils vafrastuðnings, þó að það séu nokkrir hlutir í heildar API sem eru í gangi. Það er þess virði að fylgjast með Caniuse á meðan. „Gamla“ verkfæraráðið Fyrir Popover API var það ekki flýtileið að nota verkfærabókasafn. Það var sjálfgefið. Vafrar höfðu ekki innfædda hugmynd um verkfæraábendingu sem virkaði á mús, lyklaborð og hjálpartækni. Ef þér var sama um réttmæti, þá var eini möguleikinn þinn að nota bókasafn, og það er nákvæmlega það sem ég gerði. Á háu stigi var mynstrið alltaf það sama: kveikjuþáttur, falinn verkfæraþáttur og JavaScript til að samræma þetta tvennt.
Bókasafnið sá um raflögnina sem leyfði frumefninu að birtast á sveimi eða fókus, fela sig á óskýrleika eða músarleyfi og breyta staðsetningu/breyta stærð á skrun.
Með tímanum gæti ábendingin orðið viðkvæm. Litlar breytingar fylgdu áhættu. Smá lagfæringar ollu afturförum. Það sem verra er, að bæta við nýjum verkfærum erfði sama flókið. Hlutirnir virkuðu tæknilega, en þóttu aldrei upprættir eða fullkomnir. Það var staðan þegar ég ákvað að endurbyggja tólið með því að nota innfædda Popover API vafrans. Augnablikið sem ég prófaði Popover API Ég skipti ekki yfir í að nota Popover API vegna þess að ég vildi gera tilraunir með eitthvað nýtt. Ég skipti vegna þess að ég var orðinn þreyttur á að viðhalda hegðun á tólum sem ég hélt að vafrinn ætti að hafa þegar skilið. Ég var efins í fyrstu. Flest ný forritaskil á vefnum lofa einfaldleika, en krefjast samt líms, meðhöndlunar á brúnum málum eða fallafla sem endurskapar hljóðlega sama flókið og þú varst að reyna að komast undan. Svo ég prófaði Popover API á minnsta mögulega hátt. Svona leit þetta út:
1. Lyklaborðið „virkar bara“ Stuðningur lyklaborðs var háður því að mörg lög væru rétt í röð: fókus þurfti að kveikja á tóli, óskýra þurfti að fela það, Esc þurfti að tengja handvirkt og tímasetning skipti máli. Ef þú misstir af einu kantmáli myndi tólabendingin annað hvort vera opin of lengi eða hverfa áður en hægt væri að lesa hana. Með popover eigindina stillt á sjálfvirkt eða handvirkt, tekur vafrinn yfir grunnatriðin: Tab og Shift+Tab hegða sér eðlilega, Esc lokar tóli í hvert skipti og engir auka hlustendur eru nauðsynlegir.
Það sem hvarf úr kóðagrunninum mínum voru alþjóðlegir lyklameðferðaraðilar, Esc-sérstök hreinsunarrökfræði og ástandsskoðun á lyklaborðsleiðsögn. Lyklaborðsupplifunin hætti að vera eitthvað sem ég þurfti að viðhalda og hún varð vafraábyrgð. 2. Skjálesari Fyrirsjáanleiki Þetta varstærsta framför. Jafnvel með vandlega ARIA vinnu var hegðunin mismunandi eins og ég rakti áðan. Sérhver lítil breyting þótti áhættusöm. Að nota popover með viðeigandi hlutverki lítur út og líður miklu stöðugra og fyrirsjáanlegra hvað mun gerast:
Og hér er annar sigur: Eftir skiptinguna hætti Lighthouse að flagga rangar ARIA-ríkisviðvaranir fyrir samskiptin, aðallega vegna þess að það eru ekki lengur sérsniðin ARIA-ríki fyrir mig til að misskilja óvart.
3. Fókusstjórnun Einbeitingin var áður viðkvæm. Áður hafði ég reglur eins og: láta fókus kveikja sýna verkfæralýsingu, færa fókus inn í verkfæralýsingu og loka ekki, óskýra kveikju þegar hann er of nálægt og loka verkfæralýsingu og endurheimta fókus handvirkt. Þetta virkaði þar til það gerði það ekki. Með Popover API framfylgir vafrinn einfaldara líkani þar sem fókus getur á eðlilegri hátt færst inn í popover. Með því að loka sprettiglugganum kemur fókus aftur í kveikjuna og það eru engar ósýnilegar fókusgildrur eða týnd fókus augnablik. Og ég bætti ekki við fókusendurreisnarkóða; Ég fjarlægði það.
Niðurstaða Popover API þýðir að verkfæraábendingar eru ekki lengur eitthvað sem þú líkir eftir. Þetta er eitthvað sem vafrinn skilur. Opnun, lokun, hegðun lyklaborðs, Escape meðhöndlun og stór hluti af aðgengi kemur nú frá pallinum sjálfum, ekki frá ad-hoc JavaScript. Það þýðir ekki að verkfærasöfn séu úrelt vegna þess að þau eru enn skynsamleg fyrir flókin hönnunarkerfi, mikla aðlögun eða eldri takmarkanir, en sjálfgefið hefur breyst. Í fyrsta skipti getur einfaldasta verkfæraráðið líka verið það réttasta. Ef þú ert forvitinn, prófaðu þessa tilraun: Skiptu bara út einum tóli í vörunni þinni fyrir Popover API, ekki endurskrifa allt, ekki flytja heilt kerfi, og veldu bara eitt og sjáðu hvað hverfur úr kóðanum þínum. Þegar pallurinn gefur þér betri frumstæðu er vinningurinn ekki bara færri línur af JavaScript, heldur eru það færri hlutir sem þú þarft að hafa áhyggjur af. Skoðaðu allan frumkóðann í GitHub versluninni minni. Frekari lestur Fyrir dýpri kafa í popovers og tengd API:
"Poppin' In", Geoff Graham "Að skýra sambandið milli popovers og samræðna", Zell Liew "Hvað er popover=vísbending?", Una Kravets „Invoker Commands“, Daniel Schwarz „Búa til tilkynningu um sjálfvirka lokun með HTML sprettiglugga“, Preethi Opnaðu UI Popover API útskýringu "Poppaðu (yfir) blöðrurnar", John Rhea „CSS akkerisstaða“, Juan Diego Rodriguez
MDN býður einnig upp á alhliða tækniskjöl fyrir Popover API.
