Popisy sa javia ako najmenší problém s používateľským rozhraním, ktorý môžete mať. Sú malé a zvyčajne skryté. Keď sa niekto spýta, ako ho vytvoriť, tradičná odpoveď sa takmer vždy vráti pomocou nejakej knižnice JavaScript. A na dlhú dobu to bola tá rozumná rada. Sledoval som to aj ja. Na prvý pohľad je popis jednoduchý. Umiestnite kurzor myši alebo zaostrite na prvok, zobrazte malý rámček s textom a potom ho skryte, keď sa používateľ vzdiali. Keď ho však odošlete skutočným používateľom, začnú sa prejavovať okraje. Používatelia klávesnice Tab do spúšťača, ale nikdy sa im nezobrazí popis. Čítačky obrazovky to oznamujú dvakrát alebo vôbec. Popis bliká, keď pohybujete myšou príliš rýchlo. Prekrýva obsah na menších obrazovkách. Stlačením Esc sa nezatvorí. Zameranie sa stráca. Postupom času sa môj kód popisu rozrástol na niečo, čo som už naozaj nechcel vlastniť. Poslucháči udalostí sa hromadili. Vznášanie a zaostrovanie bolo potrebné riešiť samostatne. Vonkajšie kliknutia si vyžadovali špeciálne prípady. Atribúty ARIA museli byť synchronizované ručne. Každá malá oprava pridala ďalšiu vrstvu logiky. Knižnice pomohli, ale boli to skôr čierne skrinky, okolo ktorých som pracoval namiesto toho, aby som plne chápal, čo sa deje v zákulisí. To ma prinútilo pozrieť sa na novšie Popover API. Chcel som vidieť, čo by sa stalo, keby som prestavil jeden popis pomocou natívneho modelu prehliadača bez pomoci knižnice. Ako začíname, stojí za zmienku, že ako pri každej novej funkcii aj tu sú niektoré veci, ktoré sa stále riešia. To znamená, že v súčasnosti má skvelú podporu prehliadača, aj keď existuje niekoľko častí celkového API, ktoré sú v pohybe. Medzitým sa oplatí sledovať Caniuse. „Starý“ popis Pred Popover API nebolo používanie knižnice popisov skratkou. Bolo to predvolené. Prehliadače nemali natívny koncept popisku, ktorý by fungoval s myšou, klávesnicou a asistenčnou technológiou. Ak vám záležalo na korektnosti, vašou jedinou možnosťou bolo použiť knižnicu a presne to som urobil. Na vysokej úrovni bol vzor vždy rovnaký: spúšťací prvok, skrytý prvok popisku a JavaScript na koordináciu oboch.
Knižnica sa postarala o zapojenie, ktoré umožňovalo, aby sa prvok zobrazoval pri umiestnení kurzora myši alebo zaostrení, skryl sa pri rozmazaní alebo opustení myšou a zmenil polohu alebo veľkosť pri posúvaní.
Postupom času by sa popis mohol stať krehkým. Malé zmeny niesli riziko. Menšie opravy spôsobili regresiu. Horšie je, že pridávanie nových popisov zdedilo rovnakú zložitosť. Veci technicky fungovali, ale nikdy sa necítili ustálené alebo úplné. To bol stav vecí, keď som sa rozhodol prebudovať popis pomocou natívneho rozhrania Popover API prehliadača. Moment, keď som vyskúšal Popover API Neprešiel som na používanie Popover API, pretože som chcel experimentovať s niečím novým. Prešiel som, pretože som bol unavený z udržiavania správania popisku, o ktorom som si myslel, že prehliadač by mu už mal rozumieť. Najprv som bol skeptický. Väčšina nových webových rozhraní API sľubuje jednoduchosť, ale stále vyžaduje lepidlo, spracovanie okrajových prípadov alebo záložnú logiku, ktorá potichu obnovuje rovnakú zložitosť, ktorej ste sa snažili uniknúť. Skúsil som teda Popover API tým najmenším možným spôsobom. Takto to vyzeralo:
1. Klávesnica „Jednoducho funguje“ Podpora klávesnice závisela od správneho usporiadania viacerých vrstiev: zaostrenie muselo spustiť popis nástroja, rozmazanie ho muselo skryť, Esc musel byť zapojený manuálne a na načasovaní záležalo. Ak ste vynechali jeden prípad okraja, popis nástroja zostane otvorený príliš dlho alebo zmizne skôr, ako ho bude možné prečítať. S atribútom popover nastaveným na auto alebo manual preberá prehliadač základy: Tab a Shift+Tab sa správajú normálne, Esc zakaždým zatvorí popis a nie sú potrebné žiadne ďalšie poslucháče.
Z mojej kódovej základne zmizli globálne obslužné nástroje stlačenia klávesov, logika čistenia špecifická pre Esc a kontroly stavu počas navigácie pomocou klávesnice. Zážitok z klávesnice prestal byť niečím, čo som musel udržiavať, a stal sa zárukou prehliadača. 2. Predvídateľnosť čítačky obrazovky Toto bolonajväčšie zlepšenie. Aj pri starostlivej práci ARIA sa správanie líšilo, ako som už načrtol. Každá malá zmena bola riskantná. Používanie kontextového okna so správnou úlohou vyzerá a pôsobí oveľa stabilnejšie a predvídateľnejšie, pokiaľ ide o to, čo sa stane:
A tu je ďalšia výhra: Po prepnutí Lighthouse prestal označovať nesprávne upozornenia na stav ARIA pre interakciu, najmä preto, že už neexistujú vlastné stavy ARIA, aby som sa náhodou pomýlil.
3. Riadenie zamerania Zaostrenie bývalo krehké. Predtým som mal pravidlá ako: nechať spúšťač zaostrenia zobrazovať popis, presunúť zameranie do popisku a nezavrieť, rozmazať spúšť, keď je príliš blízko, zavrieť popis a obnoviť zaostrenie manuálne. Toto fungovalo, kým nie. S Popover API prehliadač presadzuje jednoduchší model, kde sa zameranie môže prirodzenejšie presunúť do popoveru. Zatvorením vyskakovacieho okna sa zaostrenie vráti na spúšť a nie sú tu žiadne neviditeľné pasce zaostrenia ani momenty strateného zaostrenia. A nepridal som kód na obnovenie zaostrenia; Odstránil som to.
Záver Popover API znamená, že popisky už nie sú niečím, čo simulujete. Je to niečo, čomu prehliadač rozumie. Otváranie, zatváranie, správanie klávesnice, Escape manipulácia a veľká časť dostupnosti teraz pochádzajú zo samotnej platformy, nie z ad-hoc JavaScriptu. To neznamená, že knižnice popisov sú zastarané, pretože stále majú zmysel pre zložité dizajnové systémy, náročné prispôsobenia alebo staršie obmedzenia, ale predvolené nastavenie sa zmenilo. Po prvýkrát môže byť najjednoduchší popis aj ten najsprávnejší. Ak ste zvedaví, vyskúšajte tento experiment: Jednoducho nahraďte iba jeden tooltip vo vašom produkte Popover API, neprepisujte všetko, nemigrujte celý systém a jednoducho si vyberte jeden a uvidíte, čo zmizne z vášho kódu. Keď vám platforma poskytne lepšie primitíva, výhrou nie je len menej riadkov JavaScriptu, ale je to menej vecí, o ktoré sa musíte vôbec starať. Pozrite si celý zdrojový kód v mojom úložisku GitHub. Ďalšie čítanie Pre hlbšie ponory do kontextových okien a súvisiacich rozhraní API:
"Poppin' In", Geoff Graham „Objasnenie vzťahu medzi vyskakovacími oknami a dialógmi“, Zell Liew "Čo je popover=náznak?", Una Kravets "Príkazy vyvolávača", Daniel Schwarz „Vytvorenie upozornenia na automatické zatvorenie pomocou kontextového okna HTML“, Preethi Otvorte UI Popover API Explainer "Vypnite balóniky", John Rhea „Polohovanie kotvy CSS“, Juan Diego Rodríguez
MDN tiež ponúka komplexnú technickú dokumentáciu pre Popover API.
