Vidokezo vya zana vinahisi kama shida ndogo zaidi ya UI unayoweza kuwa nayo. Wao ni vidogo na kawaida hufichwa. Mtu anapouliza jinsi ya kuunda moja, jibu la jadi karibu kila wakati hurudi kwa kutumia maktaba fulani ya JavaScript. Na kwa muda mrefu, huo ulikuwa ushauri wa busara. Niliifuata, pia. Juu ya uso, ncha ya zana ni rahisi. Elea au uzingatia kipengele, onyesha kisanduku kidogo kilicho na maandishi, kisha uifiche mtumiaji anapohama. Lakini mara tu unaposafirisha moja kwa watumiaji halisi, kingo huanza kuonekana. Watumiaji wa kibodi Weka kwenye kichochezi, lakini usione kidokezo cha zana. Visoma skrini vinatangaza mara mbili, au la kabisa. Ncha ya zana humeta unaposogeza kipanya haraka sana. Inapishana maudhui kwenye skrini ndogo. Kubonyeza Esc hakufungi. Kuzingatia hupotea. Baada ya muda, msimbo wangu wa kidokezo ulikua kitu ambacho sikutaka kumiliki tena. Wasikilizaji wa tukio walikusanyika. Kuelea na umakini ilibidi kushughulikiwa kando. Mibofyo ya nje ilihitaji visa maalum. Sifa za ARIA zilibidi kusawazishwa kwa mkono. Kila kurekebisha ndogo aliongeza safu nyingine ya mantiki. Maktaba zilisaidia, lakini pia zilikuwa kama visanduku vyeusi ambavyo nilifanya kazi karibu badala ya kuelewa kikamilifu kile kilichokuwa kikiendelea nyuma ya pazia. Hiyo ndiyo ilinisukuma kutazama API mpya ya Popover. Nilitaka kuona kitakachotokea ikiwa ningeunda upya kidokezo kimoja kwa kutumia modeli asilia ya kivinjari bila usaidizi wa maktaba. Tunapoanza, ni muhimu kuzingatia kwamba, kama ilivyo kwa kipengele chochote kipya, kuna baadhi ya mambo ambayo bado yanatatuliwa. Hiyo ilisema, kwa sasa inafurahia usaidizi mkubwa wa kivinjari, ingawa kuna vipande kadhaa kwa API ya jumla ambayo inabadilika. Inastahili kuweka jicho kwenye Caniuse wakati huo huo. Kidokezo cha "Kale". Kabla ya API ya Popover, kutumia maktaba ya vidokezo haikuwa njia ya mkato. Ilikuwa chaguo-msingi. Vivinjari havikuwa na dhana asilia ya kidokezo ambacho kilifanya kazi kwenye kipanya, kibodi na teknolojia ya usaidizi. Ikiwa ulijali juu ya usahihi, chaguo lako pekee lilikuwa kutumia maktaba, na ndivyo nilivyofanya. Katika kiwango cha juu, muundo ulikuwa sawa kila wakati: kipengee cha trigger, kipengee cha vidokezo kilichofichwa, na JavaScript ya kuratibu hizo mbili.
Maktaba ilishughulikia uunganisho wa nyaya ambao uliruhusu kipengee kuonekana kwenye kuelea au kulenga, kujificha kwenye ukungu au kuondoka kwa kipanya, na kuweka upya/kubadilisha ukubwa kwenye kusogeza.
Baada ya muda, ncha ya zana inaweza kuwa dhaifu. Mabadiliko madogo yalibeba hatari. Marekebisho madogo yalisababisha kurudi nyuma. Mbaya zaidi, kuongeza vidokezo vipya kulirithi ugumu sawa. Mambo yalifanya kazi kitaalam, lakini hayakuwahi kuhisi kuwa yametulia au kukamilika. Hiyo ndiyo ilikuwa hali ya mambo nilipoamua kuunda tena kidokezo kwa kutumia API asili ya Popover ya kivinjari. Wakati Nilijaribu API ya Popover Sikubadilika kutumia API ya Popover kwa sababu nilitaka kujaribu kitu kipya. Nilibadilisha kwa sababu nilikuwa nimechoka kudumisha tabia ya vidokezo ambayo niliamini kuwa kivinjari kinapaswa kuwa tayari kimeelewa. Nilikuwa na shaka mwanzoni. API nyingi mpya za wavuti huahidi urahisi, lakini bado zinahitaji gundi, ushughulikiaji wa kingo, au mantiki mbadala ambayo huunda tena kwa utulivu ugumu ule ule uliokuwa ukijaribu kutoroka. Kwa hivyo, nilijaribu API ya Popover kwa njia ndogo iwezekanavyo. Hii ndio ilionekana:
1. Kibodi "Inafanya Kazi Tu" Usaidizi wa kibodi ulitegemea safu nyingi zinazopangwa kwa usahihi: lengo lilibidi lianzishe kidokezo, ukungu ilibidi kufiche, Esc ilibidi iwekewe waya, na saa ikawa muhimu. Ikiwa ulikosa kipochi kimoja, kidokezo kingekaa wazi kwa muda mrefu sana au kutoweka kabla ya kusomeka. Na sifa ya popover iliyowekwa kuwa kiotomatiki au mwongozo, kivinjari huchukua mambo ya msingi: Kichupo na Shift+Tab hufanya kazi kama kawaida, Esc hufunga kidokezo cha zana kila wakati, na hakuna wasikilizaji wa ziada wanaohitajika.
Kilichotoweka kutoka kwa msingi wangu wa msimbo ni vidhibiti vitufe vya kimataifa, mantiki ya kusafisha mahususi ya Esc, na ukaguzi wa hali wakati wa urambazaji wa kibodi. Uzoefu wa kibodi uliacha kuwa kitu nilichohitaji kudumisha, na ikawa dhamana ya kivinjari. 2. Utabiri wa Kisoma skrini Hii ilikuwauboreshaji mkubwa zaidi. Hata kwa kazi ya uangalifu ya ARIA, tabia ilitofautiana, kama nilivyoelezea hapo awali. Kila badiliko dogo lilihisi hatari. Kutumia popover na jukumu linalofaa kunaonekana na kunahisi kuwa thabiti zaidi na kutabirika kwa kile kitakachotokea:
Na hapa kuna ushindi mwingine: Baada ya swichi, Lighthouse iliacha kuripoti maonyo yasiyo sahihi ya hali ya ARIA kwa mwingiliano, kwa sababu hakuna tena majimbo maalum ya ARIA ili nifanye makosa kimakosa.
3. Kuzingatia Usimamizi Focus iliwahi kuwa tete. Hapo awali, nilikuwa na sheria kama vile: acha lengwa lianzishe kidokezo cha kuonyesha, sogeza umakini kwenye kidokezo na usifunge, tia ukungu kikiwa karibu sana, na funga kidokezo na urejeshe umakini mwenyewe. Hii ilifanya kazi hadi haikufanya hivyo. Kwa API ya Popover, kivinjari hutekeleza muundo rahisi zaidi ambapo umakini unaweza kuhamia kwenye popover. Kufunga popover hurejesha lengo kwenye kichochezi, na hakuna mitego ya kuzingatia isiyoonekana au dakika za umakini zilizopotea. Na sikuongeza msimbo wa urejesho wa kuzingatia; Niliiondoa.
Hitimisho API ya Popover inamaanisha kuwa vidokezo vya zana si kitu unachoiga tena. Ni kitu ambacho kivinjari kinaelewa. Ufunguzi, kufunga, tabia ya kibodi, Ushughulikiaji wa Escape, na sehemu kubwa ya ufikivu sasa hutoka kwa jukwaa lenyewe, si kutoka kwa JavaScript ya ad-hoc. Hiyo haimaanishi kuwa maktaba za vidokezo zimepitwa na wakati kwa sababu bado zinaeleweka kwa mifumo changamano ya muundo, ubinafsishaji mzito, au vikwazo vya urithi, lakini chaguo-msingi imebadilika. Kwa mara ya kwanza, kidokezo rahisi zaidi kinaweza pia kuwa sahihi zaidi. Ikiwa una hamu ya kutaka kujua, jaribu jaribio hili: Badilisha kwa urahisi kidokezo kimoja cha zana katika bidhaa yako na API ya Popover, usiandike upya kila kitu, usihamishe mfumo mzima, na chagua moja tu na uone kinachotoweka kwenye msimbo wako. Wakati jukwaa linakupa primitive bora, ushindi sio tu mistari michache ya JavaScript, lakini ni mambo machache ambayo unapaswa kuwa na wasiwasi kuhusu wakati wote. Angalia msimbo kamili wa chanzo kwenye repo langu la GitHub. Kusoma Zaidi Kwa kupiga mbizi zaidi kwenye popover na API zinazohusiana:
"Poppin' In", Geoff Graham "Kufafanua Uhusiano Kati ya Popovers na Dialogs", Zell Liew "popover=dokezo ni nini?", Una Kravets "Amri za Wachochezi", Daniel Schwarz "Kuunda Arifa ya Kufunga Kiotomatiki kwa Popover ya HTML", Preethi Fungua Kifafanuzi cha UI Popover API "Pop (juu) Puto", John Rhea "CSS Anchor Positioning", Juan Diego Rodríguez
MDN pia inatoa nyaraka za kiufundi za kina kwa API ya Popover.
Enjoyed This Article?
Get weekly tips on growing your audience and monetizing your content — straight to your inbox.
No spam. Join 138,000+ creators. Unsubscribe anytime.