Maslahatlar sizda bo'lishi mumkin bo'lgan eng kichik UI muammosi kabi ko'rinadi. Ular kichik va odatda yashirin. Kimdir qanday qilib qurishni so'rasa, an'anaviy javob deyarli har doim JavaScript kutubxonasi yordamida qaytib keladi. Va uzoq vaqt davomida bu oqilona maslahat edi. Men ham unga ergashdim. Tashqi tomondan, maslahat oddiy. Elementga kursorni olib keling yoki diqqatni qarating, matnli kichik qutini ko'rsating, so'ngra foydalanuvchi uzoqlashganda uni yashiring. Lekin haqiqiy foydalanuvchilarga bittasini jo'natganingizdan so'ng, qirralari ko'rina boshlaydi. Klaviatura foydalanuvchilari triggerga o'tishadi, lekin hech qachon asboblar maslahatini ko'rmaydilar. Ekranni o'qiydiganlar buni ikki marta e'lon qiladi yoki umuman e'lon qilmaydi. Sichqonchani juda tez harakatlantirganda asboblar paneli miltillaydi. U kichikroq ekranlardagi kontentni bir-biriga moslashtiradi. Esc tugmasini bosish uni yopmaydi. Fokus yo'qoladi. Vaqt o'tishi bilan mening ko'rsatmalarim kodi men egalik qilishni istamaydigan narsaga aylandi. Tadbir tinglovchilari to'planishdi. Hover va fokusni alohida ko'rib chiqish kerak edi. Tashqi kliklarga maxsus holatlar kerak edi. ARIA atributlarini qo'lda sinxronlashtirish kerak edi. Har bir kichik tuzatish mantiqning yana bir qatlamini qo'shdi. Kutubxonalar yordam berdi, lekin ular sahna ortida nima sodir bo'layotganini to'liq tushunish o'rniga men ishlagan qora qutilarga o'xshardi. Bu meni yangi Popover API-ga qarashga undadi. Agar kutubxona yordamisiz brauzerning mahalliy modelidan foydalanib, bitta maslahatchini qayta qursam nima bo'lishini ko'rmoqchi edim. Boshlar ekanmiz, shuni ta'kidlash joizki, har qanday yangi funksiyada bo'lgani kabi, unda hali ham dazmollanayotgan ba'zi narsalar mavjud. Ya'ni, u hozirda ajoyib brauzer qo'llab-quvvatlamoqda, garchi umumiy API uchun bir nechta qismlar mavjud bo'lsa-da. Bu orada Caniuseni kuzatib borishga arziydi. "Eski" maslahat Popover API-dan oldin asboblar paneli kutubxonasidan foydalanish yorliq emas edi. Bu standart edi. Brauzerlarda sichqoncha, klaviatura va yordamchi texnologiyalarda ishlaydigan asboblar maslahati tushunchasi yo'q edi. Agar siz to'g'rilikka g'amxo'rlik qilsangiz, sizning yagona variantingiz kutubxonadan foydalanish edi va men aynan shunday qildim. Yuqori darajada, naqsh har doim bir xil edi: tetik elementi, yashirin maslahat elementi va ikkalasini muvofiqlashtirish uchun JavaScript.
Kutubxona elementni hover yoki fokusda ko'rsatish, xiralashganda yashirish yoki sichqonchani tark etish va aylantirishda o'zgartirish/o'lchamini o'zgartirish imkonini beruvchi simlarni boshqargan.
Vaqt o'tishi bilan asboblar paneli mo'rt bo'lib qolishi mumkin. Kichik o'zgarishlar xavf tug'dirdi. Kichik tuzatishlar regressiyaga olib keldi. Eng yomoni, yangi maslahatlar qo'shish bir xil murakkablikni meros qilib oldi. Ishlar texnik jihatdan ishladi, lekin hech qachon o'zini to'la yoki to'liq his qilmadi. Brauzerning Popover API-dan foydalanib, maslahatchini qayta tiklashga qaror qilganimda, vaziyat shunday edi. Popover API-ni sinab ko'rgan paytim Men Popover API-dan foydalanishga o'tmaganman, chunki men yangi narsalarni sinab ko'rmoqchi edim. Men o‘zgartirdim, chunki men brauzer allaqachon tushungan bo‘lishi kerak bo‘lgan asboblar maslahatini saqlashdan charchadim. Avvaliga shubha bilan qaradim. Ko'pgina yangi veb-API-lar soddalikni va'da qiladi, ammo baribir siz qochishga urinayotgan bir xil murakkablikni jimgina tiklaydigan elim, chekka ishni qayta ishlash yoki zaxira mantiqni talab qiladi. Shunday qilib, men Popover API-ni eng kichik usulda sinab ko'rdim. Bu qanday ko'rinishga ega edi:
ga ulanishni yaratadi
sifatida boshqaradi
1. Klaviatura “Faqat ishlaydi” Klaviaturani qo'llab-quvvatlash bir nechta qatlamlarning to'g'ri joylashishiga bog'liq edi: fokus asboblar maslahatini ishga tushirishi, loyqalikni yashirishi, Esc simini qo'lda ulash va vaqt muhimligi. Agar siz bitta chekka holatini o'tkazib yuborsangiz, maslahatchi juda uzoq vaqt ochiq qoladi yoki uni o'qishdan oldin yo'qoladi. Popover atributi avtomatik yoki qoʻlda oʻrnatilgan boʻlsa, brauzer asosiy maʼlumotlarni oʻz zimmasiga oladi: Tab va Shift+Tab odatdagidek ishlaydi, Esc har safar maslahatchini yopadi va qoʻshimcha tinglovchilar talab qilinmaydi.
Mening kodlar bazasidan g'oyib bo'lgan narsa global klaviatura ishlov beruvchilari, Esc-ga xos tozalash mantig'i va klaviatura navigatsiyasi paytida holatni tekshirish edi. Klaviatura tajribasi men saqlab qolishim kerak bo'lgan narsa bo'lishni to'xtatdi va bu brauzer kafolatiga aylandi. 2. Ekranni o'qiydiganlarni bashorat qilish qobiliyati Bu edieng katta yaxshilanish. Yuqorida aytib o'tganimdek, ARIA ehtiyotkorlik bilan ishlaganda ham, xatti-harakatlar har xil edi. Har bir kichik o'zgarish xavfli edi. Tegishli rolga ega popoverdan foydalanish ancha barqaror va nima sodir bo'lishini oldindan aytib bo'ladigan ko'rinadi va his qiladi:
Va yana bir g'alaba: o'tishdan so'ng, Lighthouse o'zaro ta'sir uchun noto'g'ri ARIA holati ogohlantirishlarini belgilashni to'xtatdi, chunki men tasodifan noto'g'ri bo'lishim uchun odatiy ARIA holatlari yo'q.
3. Fokusni boshqarish Ilgari fokus mo'rt edi. Ilgari menda shunday qoidalar bor edi: fokus triggeriga asboblar maslahatini ko‘rsatishga ruxsat bering, fokusni asboblar maslahatiga o‘tkazing va yopmang, juda yaqin bo‘lganda triggerni xiralashtiring va asboblar maslahatini yoping va fokusni qo‘lda tiklang. Bu ishlamaguncha ishladi. Popover API bilan brauzer oddiyroq modelni qo'llaydi, bunda fokus tabiiy ravishda popoverga o'tishi mumkin. Popoverni yopish fokusni tetikga qaytaradi va ko'rinmas fokus tuzoqlari yoki yo'qolgan fokus momentlari yo'q. Va men fokusni tiklash kodini qo'shmadim; Men uni olib tashladim.
Xulosa Popover API ko'rsatmalari endi siz simulyatsiya qiladigan narsa emasligini anglatadi. Ular brauzer tushunadigan narsadir. Ochish, yopish, klaviatura harakati, Escape-dan foydalanish va mavjud imkoniyatlarning katta qismi endi maxsus JavaScript-dan emas, balki platformaning o'zidan keladi. Bu asboblar paneli kutubxonalari eskirgan degani emas, chunki ular hali ham murakkab dizayn tizimlari, og'ir moslashtirish yoki eski cheklovlar uchun mantiqiy, lekin standart o'zgargan. Birinchi marta eng oddiy ko'rsatma ham eng to'g'ri bo'lishi mumkin. Agar qiziqsangiz, ushbu tajribani sinab ko'ring: mahsulotingizda faqat bitta maslahatchini Popover API bilan almashtiring, hamma narsani qayta yozmang, butun tizimni ko'chirmang va shunchaki birini tanlang va kodingizdan nima yo'qolishini ko'ring. Platforma sizga yaxshiroq ibtidoiylikni taqdim etganda, g'alaba JavaScript-ning kamroq satrlari emas, balki umuman tashvishlanishingiz kerak bo'lgan narsalar kamroq bo'ladi. GitHub repo-da to'liq manba kodini tekshiring. Qo'shimcha o'qish Popoverlar va tegishli API-larga chuqurroq kirish uchun:
"Poppin' In", Jeoff Graham "Popoverlar va dialoglar o'rtasidagi munosabatni aniqlashtirish", Zell Liew "Popover = maslahat nima?", Una Kravets "Invoker buyruqlari", Daniel Shvarts "HTML Popover bilan avtomatik yopilish bildirishnomasini yaratish", Preethi UI Popover API tushuntirish dasturini oching "Parlarni uchib tashlang", Jon Rhea "CSS Anchor Positioning", Xuan Diego Rodriges
MDN, shuningdek, Popover API uchun keng qamrovli texnik hujjatlarni taqdim etadi.
