Këshillat e veglave ndihen si problemi më i vogël i ndërfaqes së përdoruesit që mund të keni. Ato janë të vogla dhe zakonisht të fshehura. Kur dikush pyet se si të ndërtohet një, përgjigja tradicionale pothuajse gjithmonë kthehet duke përdorur një bibliotekë JavaScript. Dhe për një kohë të gjatë, kjo ishte këshilla e arsyeshme. Edhe unë e ndoqa. Në sipërfaqe, një këshillë mjeti është e thjeshtë. Rri pezull ose fokusohu në një element, shfaq një kuti të vogël me tekst dhe më pas fshihe kur përdoruesi largohet. Por sapo të dërgoni një te përdoruesit e vërtetë, skajet fillojnë të shfaqen. Përdoruesit e tastierës futeni në këmbëzën, por kurrë nuk e shihni këshillën e veglave. Lexuesit e ekranit e shpallin dy herë, ose aspak. Këshilla e veglave dridhet kur lëvizni mausin shumë shpejt. Mbivendos përmbajtjen në ekranet më të vogla. Shtypja e Esc nuk e mbyll atë. Fokusi humbet. Me kalimin e kohës, kodi im i këshillës së veglave u rrit në diçka që nuk doja ta kisha më. Dëgjuesit e ngjarjeve u grumbulluan. Hover dhe fokusi duhej të trajtoheshin veçmas. Klikimet e jashtme duheshin raste të veçanta. Atributet ARIA duhej të mbaheshin të sinkronizuara me dorë. Çdo rregullim i vogël shtonte një shtresë tjetër logjike. Bibliotekat ndihmuan, por ato ishin gjithashtu më shumë si kuti të zeza ku punoja përreth në vend që të kuptoja plotësisht atë që po ndodhte prapa skenave. Kjo ishte ajo që më shtyu të shikoja API-në më të re Popover. Doja të shihja se çfarë do të ndodhte nëse do të rindërtoja një këshillë të vetme mjeti duke përdorur modelin origjinal të shfletuesit pa ndihmën e një biblioteke. Ndërsa fillojmë, vlen të përmendet se, si me çdo veçori të re, ka disa gjëra me të që janë ende duke u hekurosur. Thënë kështu, aktualisht gëzon mbështetje të shkëlqyeshme të shfletuesit, megjithëse ka disa pjesë në API të përgjithshme që janë në fluks. Ndërkohë ia vlen t'i kushtoni vëmendje Caniuse. Këshilla e veglave "e vjetër". Përpara API-së Popover, përdorimi i bibliotekës së këshillave të veglave nuk ishte një shkurtore. Ishte parazgjedhja. Shfletuesit nuk kishin një koncept origjinal të një këshille mjeti që funksiononte në të gjithë miun, tastierën dhe teknologjinë ndihmëse. Nëse kujdeseshit për korrektësinë, opsioni juaj i vetëm ishte të përdorni një bibliotekë, dhe kjo është pikërisht ajo që bëra. Në një nivel të lartë, modeli ishte gjithmonë i njëjtë: një element nxitës, një element i fshehtë i këshillës së veglave dhe JavaScript për të koordinuar të dyja.
Biblioteka trajtoi instalimet elektrike që lejonin elementin të shfaqej në lëvizje ose fokusim, të fshihej në turbullim ose të largohej nga miu dhe të rivendosej/ndryshonte madhësinë në lëvizje.
Me kalimin e kohës, pjesa e mjetit mund të bëhet e brishtë. Ndryshimet e vogla mbartnin rrezik. Rregullime të vogla shkaktuan regresione. Më keq, shtimi i këshillave të reja të veglave trashëgoi të njëjtin kompleksitet. Gjërat funksionuan teknikisht, por kurrë nuk u ndjenë të rregulluara apo të plota. Kjo ishte gjendja e gjërave kur vendosa të rindërtoj udhëzuesin duke përdorur API-në vendase Popover të shfletuesit. Momenti që provova API-në Popover Nuk kalova në përdorimin e Popover API sepse doja të eksperimentoja me diçka të re. E ndërrova sepse isha lodhur duke mbajtur sjelljen e këshillave të veglave që besoja se shfletuesi duhet ta kishte kuptuar tashmë. Në fillim isha skeptik. Shumica e API-ve të reja të uebit premtojnë thjeshtësi, por gjithsesi kërkojnë ngjitës, trajtim të rastit të skajshëm ose logjikë të kthimit që rikrijon në heshtje të njëjtin kompleksitet nga i cili po përpiqeshit të shpëtonit. Pra, provova Popover API në mënyrën më të vogël të mundshme. Ja si dukej:
1. Tastiera "Vetëm funksionon" Mbështetja e tastierës varej nga shtresa të shumta të rreshtuara në mënyrë korrekte: fokusi duhej të aktivizonte këshillën e veglave, turbullimi duhej ta fshihte atë, Esc duhej të lidhej manualisht dhe koha kishte rëndësi. Nëse keni humbur një rast, këshilla e veglave ose do të qëndronte e hapur shumë gjatë ose do të zhdukej para se të mund të lexohej. Me atributin popover të vendosur në automatik ose manual, shfletuesi merr përsipër bazat: Tab dhe Shift+Tab sillen normalisht, Esc mbyll këshillën e veglave çdo herë dhe nuk kërkohen dëgjues shtesë.
Ajo që u zhduk nga baza ime e kodeve ishin mbajtësit global të tastierës, logjika e pastrimit specifike për Esc dhe kontrollet e gjendjes gjatë navigimit me tastierë. Përvoja e tastierës pushoi së qeni diçka që duhej ta ruaja dhe u bë një garanci e shfletuesit. 2. Parashikueshmëria e lexuesit të ekranit Kjo ishtepërmirësimi më i madh. Edhe me punën e kujdesshme të ARIA-s, sjellja ndryshonte, siç e theksova më herët. Çdo ndryshim i vogël ndihej i rrezikshëm. Përdorimi i një popover me një rol të duhur duket dhe ndihet shumë më i qëndrueshëm dhe i parashikueshëm për sa i përket asaj që do të ndodhë:
Dhe këtu është një tjetër fitore: Pas ndërrimit, Lighthouse ndaloi së raportuari paralajmërimet e pasakta të gjendjes ARIA për ndërveprimin, kryesisht sepse nuk ka më gjendje ARIA të personalizuara që unë të gaboj aksidentalisht.
3. Menaxhimi i fokusit Fokusi dikur ishte i brishtë. Më parë, kisha rregulla të tilla si: lëreni aktivizimin e fokusit të tregojë këshillën e veglave, zhvendosni fokusin në këshillën e veglave dhe mos e mbyllni, turbulloni aktivizimin kur është shumë afër dhe mbyllni këshillën e veglave dhe rivendosni fokusin manualisht. Kjo funksionoi derisa nuk funksionoi. Me Popover API, shfletuesi zbaton një model më të thjeshtë ku fokusi mund të zhvendoset natyrshëm në popover. Mbyllja e popover-it e kthen fokusin në këmbëz dhe nuk ka kurthe të padukshme të fokusit ose momente të humbura të fokusit. Dhe nuk shtova kodin e rivendosjes së fokusit; e hoqa.
konkluzioni Popover API do të thotë që këshillat e veglave nuk janë më diçka që ju simuloni. Ato janë diçka që shfletuesi e kupton. Hapja, mbyllja, sjellja e tastierës, trajtimi i Escape dhe një pjesë e madhe e aksesit tani vijnë nga vetë platforma, jo nga JavaScript ad-hoc. Kjo nuk do të thotë se bibliotekat e këshillave të veglave janë të vjetruara, sepse ato ende kanë kuptim për sistemet komplekse të projektimit, personalizimin e rëndë ose kufizimet e trashëgimisë, por parazgjedhja është zhvendosur. Për herë të parë, këshilla më e thjeshtë e veglave mund të jetë edhe më e sakta. Nëse jeni kurioz, provoni këtë eksperiment: Thjesht zëvendësoni vetëm një këshillë mjeti në produktin tuaj me Popover API, mos rishkruani gjithçka, mos migroni një sistem të tërë dhe thjesht zgjidhni një dhe shikoni se çfarë zhduket nga kodi juaj. Kur platforma ju jep një primitiv më të mirë, fitimi nuk është vetëm më pak rreshta JavaScript, por janë më pak gjëra për të cilat duhet të shqetësoheni fare. Shikoni kodin e plotë burimor në depon time të GitHub. Lexim i mëtejshëm Për zhytje më të thella në popovers dhe API-të përkatëse:
"Poppin' In", Geoff Graham "Sqarimi i marrëdhënies midis popovers dhe dialogëve", Zell Liew “Çfarë është popover=hint?”, Una Kravets "Komandat e thirrësit", Daniel Schwarz "Krijimi i një njoftimi për mbyllje automatike me një HTML Popover", Preethi Hapni UI Popover API Explainer "Pop(mbi) balonat", John Rhea “CSS Anchor Positioning”, Juan Diego Rodríguez
MDN ofron gjithashtu dokumentacion teknik gjithëpërfshirës për Popover API.
