Namigi orodij se zdijo najmanjša težava uporabniškega vmesnika, ki jo lahko imate. So majhne in običajno skrite. Ko nekdo vpraša, kako ga zgraditi, se tradicionalni odgovor skoraj vedno vrne z uporabo knjižnice JavaScript. In dolgo časa je bil to smiseln nasvet. Tudi jaz sem temu sledil. Na prvi pogled je opis orodja preprost. Premaknite miškin kazalec ali se osredotočite na element, pokažite majhno polje z besedilom in ga nato skrijte, ko se uporabnik odmakne. Toda ko ga pošljete pravim uporabnikom, se začnejo kazati robovi. Uporabniki tipkovnice Tab v sprožilec, vendar nikoli ne vidite namiga. Bralniki zaslona to objavijo dvakrat ali pa sploh ne. Ko prehitro premikate miško, tipka orodja utripa. Prekriva vsebino na manjših zaslonih. Če pritisnete tipko Esc, je ne zaprete. Osredotočenost se izgubi. Sčasoma je moja koda orodnih namigov prerasla v nekaj, česar pravzaprav nisem več želel imeti. Poslušalci dogodka so se kopičili. Lebdenje in fokus je bilo treba obravnavati ločeno. Zunanji kliki so potrebovali posebne primere. Atribute ARIA je bilo treba ročno sinhronizirati. Vsak majhen popravek je dodal še eno plast logike. Knjižnice so pomagale, vendar so bile tudi bolj kot črne skrinjice, okoli katerih sem delal, namesto da bi popolnoma razumel, kaj se dogaja v zakulisju. To me je spodbudilo k ogledu novejšega Popover API-ja. Želel sem videti, kaj bi se zgodilo, če bi obnovil en sam opis orodja z izvornim modelom brskalnika brez pomoči knjižnice. Ko začnemo, je vredno omeniti, da je, tako kot pri vsaki novi funkciji, nekatere stvari še vedno v fazi urejanja. Kljub temu trenutno uživa odlično podporo brskalnika, čeprav je več delov celotnega API-ja v teku. V tem času je vredno paziti na Caniusa. "Stari" opis orodja Pred API Popover uporaba knjižnice orodnih namigov ni bila bližnjica. To je bilo privzeto. Brskalniki niso imeli izvirnega koncepta namiga za orodje, ki bi deloval prek miške, tipkovnice in pomožne tehnologije. Če vas je skrbela pravilnost, je bila vaša edina možnost uporaba knjižnice, in prav to sem storil. Na visoki ravni je bil vzorec vedno enak: sprožilni element, skriti element namiga orodja in JavaScript za usklajevanje obeh.
Knjižnica je skrbela za napeljavo, ki je omogočala prikaz elementa pri lebdenju ali fokusu, skrivanje ob zameglitvi ali zapustitvi miške in spreminjanje položaja/spreminjanje velikosti pri drsenju.
Sčasoma lahko namig orodja postane krhek. Majhne spremembe so nosile tveganje. Manjši popravki so povzročili regresije. Še huje, dodajanje novih namigov orodij je podedovalo enako kompleksnost. Stvari so tehnično delovale, vendar se nikoli niso zdele urejene ali popolne. Tako je bilo, ko sem se odločil obnoviti opis orodja z izvornim API-jem brskalnika Popover. Trenutek, ko sem preizkusil Popover API Nisem preklopil na uporabo Popover API-ja, ker sem želel eksperimentirati z nečim novim. Zamenjal sem, ker sem bil utrujen od vzdrževanja vedenja orodnih namigov, za katerega sem verjel, da bi ga brskalnik že moral razumeti. Sprva sem bil skeptičen. Večina novih spletnih API-jev obljublja preprostost, vendar še vedno zahteva lepilo, obravnavo robnih primerov ali nadomestno logiko, ki tiho poustvari isto kompleksnost, ki ste se ji poskušali izogniti. Zato sem poskusil Popover API na najmanjši možni način. Takole je to izgledalo:
1. Tipkovnica »preprosto deluje« Podpora za tipkovnico je bila odvisna od pravilnega razvrščanja več plasti: fokus je moral sprožiti opis orodja, zameglitev ga je morala skriti, Esc je bilo treba povezati ročno in čas je bil pomemben. Če ste zgrešili en robni primer, bi opis orodja ostal predolgo odprt ali izginil, preden bi ga lahko prebrali. Če je atribut popover nastavljen na samodejno ali ročno, brskalnik prevzame osnove: Tab in Shift+Tab se obnašata normalno, Esc vsakič zapre opis orodja in dodatni poslušalci niso potrebni.
Kar je izginilo iz moje kodne zbirke, so bili globalni obdelovalci tipk, logika čiščenja, specifična za Esc, in preverjanja stanja med navigacijo s tipkovnico. Izkušnja s tipkovnico ni več nekaj, kar bi moral vzdrževati, in postala je garancija brskalnika. 2. Predvidljivost bralnika zaslona To je bilnajvečji napredek. Tudi ob skrbnem delu ARIA se je vedenje spreminjalo, kot sem omenil prej. Vsaka majhna sprememba se je zdela tvegana. Uporaba popoverja z ustrezno vlogo je videti in se zdi veliko bolj stabilna in predvidljiva glede tega, kaj se bo zgodilo:
In tukaj je še ena zmaga: po preklopu je Lighthouse prenehal označevati napačna opozorila o stanju ARIA za interakcijo, predvsem zato, ker ni več stanj ARIA po meri, pri katerih bi se pomotoma zmotil.
3. Upravljanje fokusa Fokus je bil včasih krhek. Prej sem imel pravila, kot so: naj sprožilec fokusa prikaže opis orodja, premakni fokus v opis orodja in se ne zapre, zamegli sprožilec, ko je preblizu, in zapri opis orodja in ročno obnovi fokus. To je delovalo, dokler ni. Z API-jem Popover brskalnik uveljavlja enostavnejši model, pri katerem se lahko fokus bolj naravno premakne v popover. Če zaprete popover, se fokus vrne na sprožilec in ni nevidnih pasti fokusa ali izgubljenih trenutkov fokusa. In nisem dodal kode za obnovitev fokusa; Odstranil sem ga.
Zaključek Popover API pomeni, da opisi orodij niso več nekaj, kar simulirate. So nekaj, kar brskalnik razume. Odpiranje, zapiranje, obnašanje tipkovnice, upravljanje Escape in velik del dostopnosti zdaj prihajajo iz same platforme, ne iz ad-hoc JavaScripta. To ne pomeni, da so knjižnice orodnih namigov zastarele, ker so še vedno smiselne za zapletene sisteme načrtovanja, veliko prilagajanje ali podedovane omejitve, vendar se je privzeta vrednost spremenila. Prvič je najpreprostejši orodni opis lahko tudi najbolj pravilen. Če ste radovedni, poskusite s tem poskusom: preprosto zamenjajte samo en namig za orodje v svojem izdelku z API-jem Popover, ne prepisujte vsega, ne selite celotnega sistema in samo izberite enega in poglejte, kaj izgine iz vaše kode. Ko vam platforma ponudi boljšo primitivo, zmaga ni le manj vrstic JavaScripta, ampak manj stvari, za katere morate sploh skrbeti. Oglejte si celotno izvorno kodo v mojem skladišču GitHub. Nadaljnje branje Za globlji potop v pojavna okna in povezane API-je:
"Poppin' In", Geoff Graham »Razjasnitev razmerja med popoverji in pogovornimi okni«, Zell Liew “Kaj je popover=namig?”, Una Kravets "Ukazi invokerja", Daniel Schwarz »Ustvarjanje obvestila o samodejnem zapiranju s popoverjem HTML«, Preethi Odprite UI Popover API Explainer "Pop(over) the Balloons", John Rhea »Pozicioniranje sidra CSS«, Juan Diego Rodríguez
MDN ponuja tudi obsežno tehnično dokumentacijo za Popover API.
