Советите за алатки се чувствуваат како најмалиот проблем со интерфејсот што може да го имате. Тие се мали и обично скриени. Кога некој ќе праша како да се изгради, традиционалниот одговор речиси секогаш се враќа користејќи некоја JavaScript библиотека. И долго време, тоа беше разумниот совет. Го следев и јас. На површината, советот за алатка е едноставен. Лебдете или фокусирајте се на елемент, прикажете мало поле со текст, а потоа скријте го кога корисникот ќе се оддалечи. Но, штом ќе испратите еден до вистински корисници, рабовите почнуваат да се покажуваат. Корисници на тастатура внесете го во активирањето, но никогаш не го гледајте советот за алатката. Читателите на екранот го најавуваат двапати, или воопшто не. Советот за алатката трепери кога пребрзо го движите глувчето. Ја преклопува содржината на помалите екрани. Со притискање на Esc не се затвора. Фокусот се губи. Со текот на времето, мојот код за совети за алатки прерасна во нешто што навистина не сакав да го поседувам повеќе. Слушатели на настани се натрупаа. Лебдите и фокусот требаше да се постапуваат одделно. Надворешните кликови беа потребни посебни случаи. Атрибутите ARIA требаше да се чуваат во синхронизација со рака. Секој мал поправа додаваше уште еден слој на логика. Библиотеките помогнаа, но тие исто така беа повеќе како црни кутии околу кои работев наместо целосно да разберам што се случува зад сцената. Тоа беше она што ме поттикна да го погледнам поновиот Popover API. Сакав да видам што ќе се случи ако повторно изградам еден совет за алатка користејќи го мајчиниот модел на прелистувачот без помош од библиотека. Како што започнуваме, вреди да се напомене дека, како и со секоја нова функција, има некои работи со неа што сè уште се испеглаат. Тоа, рече, моментално ужива одлична поддршка на прелистувачот, иако има неколку делови од целокупниот API кои се во тек. Вреди да се внимава во меѓувреме на Каниус. „Стариот“ совет за алатки Пред Popover API, користењето на библиотека со совети за алатки не беше кратенка. Тоа беше стандардно. Прелистувачите немаа природен концепт на совет за алатка што функционираше преку глувчето, тастатурата и помошната технологија. Ако се грижевте за коректноста, вашата единствена опција беше да користите библиотека, а јас го направив токму тоа. На високо ниво, шемата беше секогаш иста: елемент за активирање, скриен елемент за совет за алатка и JavaScript за координирање на двете.
Библиотеката управуваше со жици што му овозможија на елементот да се прикаже при лебдење или фокусирање, да се крие при заматување или да остави глувчето и да ја смени позицијата/промената на големината при лизгање.
Со текот на времето, советот за алатка може да стане кревок. Малите промени носат ризик. Малите поправки предизвикаа регресии. Уште полошо, додавањето нови совети за алатки ја наследи истата сложеност. Работите технички функционираа, но никогаш не се чувствував решено или комплетно. Таква беше состојбата кога решив повторно да го изградам советот за алатка користејќи го мајчиниот Popover API на прелистувачот. Моментот кога го пробав The Popover API Не се префрлив на користење на Popover API затоа што сакав да експериментирам со нешто ново. Се префрлив затоа што бев уморен од одржување на однесувањето на советите за алатки за кое верував дека прелистувачот веќе требаше да го разбере. На почетокот бев скептичен. Повеќето нови веб API ветуваат едноставност, но сепак бараат лепак, ракување со рабовите или резервна логика што тивко ја пресоздава истата сложеност од која се обидувавте да избегате. Така, го пробав Popover API на најмал можен начин. Еве како изгледаше тоа:
1. Тастатурата „Само работи“ Поддршката за тастатурата зависеше од повеќе слоеви кои се правилно порамнети: фокусот мораше да го активира советот за алатката, заматувањето мораше да го скрие, Esc мораше да се поврзува рачно, а времето беше важно. Ако сте пропуштиле едно куќиште на рабовите, советот за алатка или ќе остане премногу долго отворен или ќе исчезне пред да може да се прочита. Со атрибутот поповер поставен на автоматски или рачно, прелистувачот ги презема основите: Tab и Shift+Tab се однесуваат нормално, Esc го затвора советот за алатка секој пат и не се потребни дополнителни слушатели.
Она што исчезна од мојата база на кодови беа глобалните управувачи со тастатурата, логиката за чистење специфична за Esc и проверките на состојбата за време на навигацијата со тастатурата. Искуството со тастатура престана да биде нешто што морав да го одржувам и стана гаранција за прелистувачот. 2. Предвидливост на читачот на екранот Ова бешенајголемо подобрување. Дури и со внимателна работа на ARIA, однесувањето се разликуваше, како што наведов претходно. Секоја мала промена се чувствуваше ризично. Користењето на поповер со соодветна улога изгледа и се чувствува многу постабилно и предвидливо колку што ќе се случи:
И еве уште една победа: по прекинувачот, Lighthouse престана да ги означува неточните предупредувања за состојбата на ARIA за интеракцијата, главно затоа што веќе нема прилагодени состојби на ARIA за случајно да погрешам.
3. Управување со фокус Фокусот порано беше кревок. Претходно, имав правила како: нека активирањето за фокусирање покажува совет за алатки, преместете го фокусот во советот за алатка и не затворајте, заматете го активирањето кога е премногу блиску и затворете го советот за алатка и вратете го фокусот рачно. Ова функционираше додека не се случи. Со Popover API, прелистувачот наметнува поедноставен модел каде што фокусот може поприродно да се пресели во поповерот. Затворањето на поповер го враќа фокусот на активирањето и нема невидливи замки за фокусирање или изгубени моменти на фокусирање. И не додадов код за враќање на фокусот; Го отстранив.
Заклучок Popover API значи дека советите за алатки веќе не се нешто што го симулирате. Тие се нешто што прелистувачот го разбира. Отворањето, затворањето, однесувањето на тастатурата, управувањето со Escape и голем дел од пристапноста сега доаѓаат од самата платформа, а не од ад-хок JavaScript. Тоа не значи дека библиотеките со совети за алатки се застарени затоа што сè уште имаат смисла за сложени системи за дизајн, тешки прилагодувања или ограничувања на наследството, но стандардното е поместено. За прв пат, наједноставниот совет за алатка може да биде и најправилен. Ако сте љубопитни, испробајте го овој експеримент: Едноставно заменете само еден совет за алатка во вашиот производ со Popover API, не препишувајте сè, не мигрирајте цел систем и само изберете еден и видете што ќе исчезне од вашиот код. Кога платформата ви дава подобар примитив, победата не е само помалку линии JavaScript, туку и помалку работи за кои воопшто треба да се грижите. Проверете го целосниот изворен код во моето складиште на GitHub. Понатамошно читање За подлабоко нурнувања во поповерите и поврзаните API-и:
„Попин ин“, Џеф Греам „Појаснување на врската помеѓу поповерите и дијалозите“, Зел Лив „Што е поповер=навестување?“, Уна Кравец „Команди на повикувачот“, Даниел Шварц „Креирање известување за автоматско затворање со HTML Popover“, Прети Отворете го UI Popover API Explainer „Поп (над) балоните“, Џон Реа „CSS Anchor Positioning“, Хуан Диего Родригез
MDN нуди и сеопфатна техничка документација за Popover API.
