Patarimai atrodo kaip mažiausia vartotojo sąsajos problema. Jie yra maži ir dažniausiai paslėpti. Kai kas nors klausia, kaip ją sukurti, tradicinis atsakymas beveik visada grįžta naudojant tam tikrą „JavaScript“ biblioteką. Ir ilgą laiką tai buvo protingas patarimas. Aš irgi juo sekiau. Iš pažiūros patarimas yra paprastas. Užveskite pelės žymeklį arba sufokusuokite elementą, parodykite mažą laukelį su tekstu, tada paslėpkite jį, kai vartotojas pasitraukia. Tačiau išsiuntus jį tikriems vartotojams, pradeda matytis kraštai. Klaviatūros naudotojai Paspauskite paleidimo mygtuką, bet niekada nemato patarimo. Ekrano skaitytuvai apie tai praneša du kartus arba iš viso. Patarimas mirksi, kai per greitai judinate pelę. Jis perdengia turinį mažesniuose ekranuose. Paspaudus Esc jis neuždaromas. Dėmesys dingsta. Laikui bėgant, mano patarimo kodas išaugo į kažką, ko nebenorėjau turėti. Renginio klausytojai susikaupė. Užvedimas ir fokusavimas turėjo būti tvarkomi atskirai. Išoriniams paspaudimams reikia specialių atvejų. ARIA atributai turėjo būti sinchronizuojami ranka. Kiekvienas mažas pataisymas pridėjo dar vieną logikos sluoksnį. Bibliotekos padėjo, bet jos taip pat buvo daugiau kaip juodosios dėžės, aplink kurias dirbau, o ne visiškai supratau, kas vyksta užkulisiuose. Būtent tai paskatino mane pažvelgti į naujesnę Popover API. Norėjau sužinoti, kas nutiktų, jei vieną patarimą atkurčiau naudodamas vietinį naršyklės modelį be bibliotekos pagalbos. Pradėdami verta paminėti, kad, kaip ir su bet kuria nauja funkcija, kai kurie dalykai vis dar yra išlyginami. Nepaisant to, šiuo metu ji turi puikų naršyklės palaikymą, nors yra keletas bendros API dalių, kurios keičiasi. Tuo tarpu verta stebėti Caniuse. „Senasis“ patarimas Prieš „Popover“ API patarimo bibliotekos naudojimas nebuvo spartusis klavišas. Tai buvo numatytasis. Naršyklės neturėjo savosios patarimo koncepcijos, kuri veiktų naudojant pelę, klaviatūrą ir pagalbines technologijas. Jei jums rūpėjo teisingumas, jūsų vienintelė galimybė buvo naudoti biblioteką, ir aš būtent tai padariau. Aukštu lygiu modelis visada buvo tas pats: paleidimo elementas, paslėptas patarimo elementas ir „JavaScript“, kad suderintų abu.
Biblioteka tvarkė laidus, leidžiančius elementą rodyti užvedus pelės žymeklį arba sufokusuoti, paslėpti suliejus arba palikti pelę ir pakeisti padėtį / keisti dydį slenkant.
Laikui bėgant patarimas gali tapti trapus. Maži pokyčiai kėlė riziką. Nedideli pataisymai sukėlė regresiją. Dar blogiau, įtraukus naujus patarimus paveldėtas toks pat sudėtingumas. Techniškai viskas pavyko, bet niekada nesijautė sutvarkyta ar baigta. Tokia buvo padėtis, kai nusprendžiau iš naujo sukurti patarimą naudodamas naršyklės savąją „Popover“ API. Akimirka, kai išbandžiau „Popover“ API Neperėjau prie Popover API, nes norėjau eksperimentuoti su kažkuo nauja. Perjungiau, nes pavargau nuo patarimo elgesio, kurį, mano manymu, naršyklė jau turėjo suprasti. Iš pradžių buvau skeptiškas. Dauguma naujų žiniatinklio API žada paprastumą, bet vis tiek reikalauja klijų, kraštinių dėklų tvarkymo arba atsarginės logikos, kuri tyliai atkuria tą patį sudėtingumą, kurio bandėte išvengti. Taigi, aš išbandžiau Popover API kuo mažiausiu būdu. Štai kaip tai atrodė:
1. Klaviatūra „Tiesiog veikia“ Klaviatūros palaikymas priklausė nuo kelių teisingai išdėstytų sluoksnių: fokusavimas turėjo suaktyvinti patarimą, suliejimas turėjo jį paslėpti, Esc turėjo būti prijungtas rankiniu būdu, o laikas buvo svarbus. Jei praleidote vieną kraštinį dėklą, patarimas liks atidarytas per ilgai arba išnyks, kol jį būtų galima nuskaityti. Kai iškylančiojo vaizdo atributas nustatytas kaip automatinis arba rankinis, naršyklė perima pagrindinius dalykus: Tab ir Shift+Tab veikia įprastai, Esc kiekvieną kartą uždaro patarimą ir nereikia papildomų klausytojų.
Iš mano kodų bazės dingo visuotinės klaviatūros tvarkyklės, specifinė Esc valymo logika ir būsenos patikrinimai naršant klaviatūra. Klaviatūros naudojimas nustojo būti tuo, ką turėjau prižiūrėti, ir tai tapo naršyklės garantija. 2. Ekrano skaitytuvo nuspėjamumas Tai buvodidžiausias patobulinimas. Net ir kruopščiai dirbant ARIA, elgesys skyrėsi, kaip minėjau anksčiau. Kiekvienas mažas pokytis atrodė rizikingas. Naudojant iššokantį ekraną su tinkamu vaidmeniu, atrodo ir jaučiasi daug stabiliau ir nuspėjamiau, kas nutiks:
Ir štai dar vienas laimėjimas: po perjungimo „Lighthouse“ nustojo žymėti neteisingus ARIA būsenos įspėjimus dėl sąveikos, daugiausia todėl, kad nebėra tinkintų ARIA būsenų, kad galėčiau netyčia suklysti.
3. Fokuso valdymas Anksčiau dėmesys buvo trapus. Anksčiau turėjau tokias taisykles: leisti fokusavimo aktyvikliui rodyti patarimą, perkelti fokusavimą į patarimą ir neuždaryti, suliejimo aktyviklį, kai jis per arti, ir uždaryti patarimą ir atkurti fokusavimą rankiniu būdu. Tai veikė tol, kol neveikė. Naudodama „Popover“ API, naršyklė įgyvendina paprastesnį modelį, kuriame dėmesys gali natūraliau pereiti į iššokantįjį vaizdą. Uždarius iššokantįjį langą, židinys grąžinamas į gaiduką ir nėra nematomų fokusavimo spąstų ar prarastų fokusavimo momentų. O židinio atkūrimo kodo nepridėjau; Aš jį pašalinau.
Išvada „Popover“ API reiškia, kad patarimai nebėra kažkas, ko jūs imituojate. Naršyklė juos supranta. Atidarymas, uždarymas, klaviatūros elgsena, pabėgimo tvarkymas ir didelė prieinamumo dalis dabar atsiranda iš pačios platformos, o ne iš ad hoc JavaScript. Tai nereiškia, kad patarimų bibliotekos yra pasenusios, nes jos vis dar yra prasmingos sudėtingoms projektavimo sistemoms, dideliems pritaikymams ar seniems apribojimams, tačiau numatytoji reikšmė pasikeitė. Pirmą kartą paprasčiausias patarimas gali būti ir pats teisingiausias. Jei jums įdomu, išbandykite šį eksperimentą: tiesiog pakeiskite tik vieną patarimą savo produkte Popover API, neperrašykite visko, neperkelkite visos sistemos ir tiesiog pasirinkite vieną ir pažiūrėkite, kas dingsta iš jūsų kodo. Kai platforma suteikia jums geresnį primityvumą, laimėjimas yra ne tik mažiau JavaScript eilučių, bet ir mažiau dalykų, dėl kurių turite nerimauti. Peržiūrėkite visą šaltinio kodą mano „GitHub“ repo. Tolesnis skaitymas Jei norite giliau pasinerti į iššokančius langus ir susijusias API:
„Poppin’ In“, Geoffas Grahamas „Santykio tarp iššokančių langų ir dialogų išaiškinimas“, Zell Liew „Kas yra popover = užuomina?“, Una Kravets „Kvietimo komandos“, Danielis Schwarzas „Automatinio uždarymo pranešimo sukūrimas naudojant HTML popover“, Preethi Atidarykite UI Popover API aiškintuvą „Pop(over) the Balloons“, Johnas Rhea „CSS inkaro padėties nustatymas“, Juanas Diego Rodríguezas
MDN taip pat siūlo išsamią techninę Popover API dokumentaciją.
