Tööriistavihjed tunduvad väikseima kasutajaliidese probleemina. Need on väikesed ja tavaliselt peidetud. Kui keegi küsib, kuidas seda luua, tuleb traditsiooniline vastus peaaegu alati tagasi, kasutades mõnda JavaScripti teeki. Ja pikka aega oli see mõistlik nõuanne. Jälgisin ka seda. Pealtnäha on tööriistavihje lihtne. Hõljutage kursorit elemendile või keskenduge sellele, kuvage väikese tekstiga kasti ja peitke see, kui kasutaja eemaldub. Kuid kui saadate selle tõelistele kasutajatele, hakkavad servad paistma. Klaviatuuri kasutajad Vajutage päästikule, kuid ärge kunagi vaadake kohtspikri. Ekraanilugejad teatavad sellest kaks korda või üldse mitte. Tööriistaspikker vilgub, kui liigutate hiirt liiga kiiresti. See kattub väiksemate ekraanide sisuga. Esc vajutamine seda ei sulge. Fookus kaob. Aja jooksul muutus mu tööriistaspikri kood millekski, mida ma tegelikult enam omada ei soovinud. Sündmuste kuulajaid kogunes. Hover ja teravustamine tuli käsitleda eraldi. Välised klõpsud vajasid erijuhtumeid. ARIA atribuute tuli käsitsi sünkroonis hoida. Iga väike parandus lisas veel ühe loogikakihi. Raamatukogud aitasid, kuid need olid ka pigem mustad kastid, mille ümber töötasin, selle asemel, et täielikult aru saada, mis kulisside taga toimub. See sundis mind vaatama uuemat Popover API-t. Tahtsin näha, mis juhtuks, kui ehitaksin uuesti ühe tööriistaspikri, kasutades brauseri algset mudelit ilma raamatukogu abita. Alustades väärib märkimist, et nagu iga uue funktsiooni puhul, on ka sellega mõned asjad, mida alles triigitakse. Sellegipoolest on sellel praegu suurepärane brauseri tugi, kuigi üldises API-s on mitu osa, mis on muutumas. Vahepeal tasub Caniusel silma peal hoida. "Vana" tööriistavihje Enne Popover API-t ei olnud kohtspikrite teegi kasutamine otsetee. See oli vaikimisi. Brauseritel ei olnud algset tööriistaspikri kontseptsiooni, mis töötaks hiire, klaviatuuri ja abitehnoloogiaga. Kui hoolisite korrektsusest, oli teie ainus võimalus kasutada raamatukogu ja täpselt seda ma ka tegin. Kõrgel tasemel oli muster alati sama: päästikuelement, peidetud tööriistavihje element ja JavaScript nende kahe koordineerimiseks.
Teek käsitles juhtmestikku, mis võimaldas elemendil hõljutada või teravustada, peita hägususe või hiirega lahkumise korral ning kerimisel ümber paigutada/suurust muuta.
Aja jooksul võib tööriistavihje muutuda hapraks. Väikeste muudatustega kaasnes risk. Väikesed parandused põhjustasid taandarengut. Mis veelgi hullem, uute tööriistavihjete lisamine pärandas sama keerukuse. Asjad tehniliselt toimisid, kuid ei tundunud kunagi lahendatud ega lõpetatud. See oli asjade seis, kui otsustasin tööriistaspikri brauseri loomuliku Popover API abil uuesti üles ehitada. Hetk, mil proovisin Popover API-d Ma ei hakanud kasutama Popover API-t, sest tahtsin katsetada midagi uut. Vahetasin, kuna olin väsinud kohtspikrite käitumisest, millest brauser oleks minu arvates pidanud juba aru saama. Olin alguses skeptiline. Enamik uusi veebi API-sid lubavad lihtsust, kuid nõuavad siiski liimi, ümbrise servade käsitlemist või varuloogikat, mis taastab vaikselt sama keerukuse, millest proovisite põgeneda. Niisiis, proovisin Popover API-d võimalikult väiksel viisil. See nägi välja järgmine:
-ga
1. Klaviatuur lihtsalt töötab Klaviatuuri tugi sõltus mitme kihi õigest reastusest: fookus pidi käivitama tööriistaspikri, hägusus pidi selle peitma, Esc pidi olema käsitsi ühendatud ja ajastus oli oluline. Kui jätate ühe servasuuruse vahele, jääb kohtspikker kas liiga kauaks avatuks või kaob enne lugemist. Kui hüpikaknaatribuudiks on seatud automaatne või käsitsi, võtab brauser üle põhitõed: Tab ja Shift+Tab käituvad normaalselt, Esc sulgeb kohtspikri iga kord ja lisakuulajaid pole vaja.
Minu koodibaasist kadusid globaalsed klahvivajutuste töötlejad, Esc-spetsiifiline puhastusloogika ja olekukontrollid klaviatuuriga navigeerimise ajal. Klaviatuuri kasutuskogemus ei olnud enam midagi, mida pidin hooldama, ja sellest sai brauseri garantii. 2. Ekraanilugeja ennustatavus See olisuurim edasiminek. Isegi hoolika ARIA-töö korral oli käitumine erinev, nagu ma varem kirjeldasin. Iga väiksemgi muutus tundus riskantne. Õige rolliga hüpikakna kasutamine tundub ja tundub palju stabiilsem ja etteaimatavam, kuivõrd see, mis juhtuma hakkab:
Ja siin on veel üks võit: pärast ümberlülitamist lõpetas Lighthouse interaktsiooni kohta valede ARIA olekuhoiatuste märgistamise, peamiselt seetõttu, et mul pole enam kohandatud ARIA olekuid, mille jaoks kogemata eksida.
3. Fookuse juhtimine Varem oli fookus habras. Varem olid mul sellised reeglid nagu: lase fookuse päästikul kuvada kohtspikker, liiguta fookus vihjesse ja ära sulgu, hägustab päästik, kui see on liiga lähedal, ning sulge tööriistaspikker ja taasta fookus käsitsi. See toimis seni, kuni seda ei tehtud. Popover API abil rakendab brauser lihtsamat mudelit, kus fookus saab loomulikumalt liikuda hüpikaknasse. Hüpikakna sulgemine tagastab fookuse päästikule ning puuduvad nähtamatud fookuslõksud ega kadunud fookushetked. Ja ma ei lisanud fookuse taastamise koodi; Ma eemaldasin selle.
Järeldus Popover API tähendab, et tööriistavihjeid ei simuleerita enam. Need on midagi, millest brauser aru saab. Avamine, sulgemine, klaviatuuri käitumine, põgenemiskäsitlus ja suur osa juurdepääsetavusest pärinevad nüüd platvormilt endalt, mitte ad-hoc JavaScriptilt. See ei tähenda, et tööriistavihjete teegid oleksid vananenud, kuna need on endiselt mõistlikud keerukate kujundussüsteemide, raske kohandamise või pärandpiirangute jaoks, kuid vaikeseade on nihkunud. Esmakordselt võib kõige lihtsam vihje olla ka kõige õigem. Kui olete uudishimulik, proovige seda katset: lihtsalt asendage oma toote üks kohtspikker Popover API-ga, ärge kirjutage kõike ümber, ärge migreerige tervet süsteemi ja valige lihtsalt üks ja vaadake, mis teie koodist kaob. Kui platvorm annab teile parema primitiivse lahenduse, ei võida mitte ainult JavaScripti ridade arv, vaid ka vähem asju, mille pärast peate üldse muretsema. Vaadake täielikku lähtekoodi minu GitHubi repost. Edasine Lugemine Sügavamaks sukeldumiseks hüpikaknadesse ja seotud API-desse tehke järgmist.
"Poppin' In", Geoff Graham "Hüpiku ja dialoogide vahelise seose selgitamine", Zell Liew “Mis on popover=vihje?”, Una Kravets "Kutsuja käsud", Daniel Schwarz "Automaatse sulgemise teatise loomine HTML-i hüpikaknaga", Preethi Avage UI Popover API Explainer "Pop(üle) õhupallid", John Rhea "CSS-i ankru positsioneerimine", Juan Diego Rodríguez
MDN pakub ka Popover API jaoks põhjalikku tehnilist dokumentatsiooni.
