Alət məsləhətləri, qarşılaşa biləcəyiniz ən kiçik UI problemi kimi hiss olunur. Onlar kiçikdir və adətən gizlidirlər. Kimsə necə qurulacağını soruşduqda, ənənəvi cavab demək olar ki, həmişə JavaScript kitabxanasından istifadə edərək geri qayıdır. Və uzun müddət bu, məntiqli məsləhət idi. Mən də izlədim. Səthdə bir alət ipucu sadədir. Elementin üzərinə sürüşdürün və ya fokuslayın, mətnin olduğu kiçik bir qutu göstərin, sonra istifadəçi uzaqlaşdıqda onu gizləyin. Ancaq birini real istifadəçilərə göndərdikdən sonra kənarlar görünməyə başlayır. Klaviatura istifadəçiləri tetiğe daxil olurlar, lakin alət ipucunu heç vaxt görmürlər. Ekran oxuyanlar bunu iki dəfə elan edirlər, ya da heç elan etmirlər. Siçanı çox tez hərəkət etdirdiyiniz zaman alət ipucu titrəyir. Daha kiçik ekranlarda məzmun üst-üstə düşür. Esc düyməsini basmaq onu bağlamır. Fokus itir. Vaxt keçdikcə mənim alət kodum artıq sahib olmaq istəmədiyim bir şeyə çevrildi. Tədbiri dinləyənlər yığıldı. Hover və fokus ayrıca idarə edilməli idi. Xarici kliklərə xüsusi hallar lazım idi. ARIA atributları əl ilə sinxronlaşdırılmalı idi. Hər kiçik düzəliş başqa bir məntiq qatını əlavə etdi. Kitabxanalar kömək etdi, lakin onlar həm də pərdə arxasında nə baş verdiyini tam başa düşmək əvəzinə, işlədiyim qara qutulara bənzəyirdi. Bu məni daha yeni Popover API-yə baxmağa vadar etdi. Kitabxananın köməyi olmadan brauzerin yerli modelindən istifadə edərək tək alət ipucunu yenidən qursam nə olacağını görmək istədim. Başlayarkən qeyd etmək lazımdır ki, hər hansı yeni funksiyada olduğu kimi, hələ də ütülənən bəzi şeylər var. Bununla belə, o, hazırda əla brauzer dəstəyinə malikdir, baxmayaraq ki, ümumi API-də bir neçə hissə var. Bu vaxt Caniuseyə diqqət yetirməyə dəyər. "Köhnə" alət ipucu Popover API-dən əvvəl alət ipucu kitabxanasından istifadə qısa yol deyildi. Bu standart idi. Brauzerlərdə siçan, klaviatura və köməkçi texnologiya üzərində işləyən alət ipucu ilə bağlı yerli konsepsiya yox idi. Düzgünlük haqqında düşünürsünüzsə, yeganə seçiminiz kitabxanadan istifadə etmək idi və mən də bunu etdim. Yüksək səviyyədə nümunə həmişə eyni idi: tetik elementi, gizli alət ipucu elementi və hər ikisini əlaqələndirmək üçün JavaScript.
Kitabxana elementin hoverdə və ya fokusda göstərilməsinə, bulanıqlıqda və ya siçanın tərkində gizlənməsinə və sürüşdürmə zamanı yerini dəyişdirməyə/ölçünü dəyişdirməyə imkan verən naqilləri idarə etdi.
Zaman keçdikcə alət ipucu kövrək ola bilər. Kiçik dəyişikliklər risk daşıyırdı. Kiçik düzəlişlər reqressiyaya səbəb oldu. Daha da pisi, yeni alət ipuçlarının əlavə edilməsi eyni mürəkkəbliyi miras qoydu. İşlər texniki cəhətdən işləyirdi, lakin heç vaxt tam və ya tam hiss edilmədi. Brauzerin yerli Popover API-dən istifadə edərək alət ipucunu yenidən qurmaq qərarına gələndə vəziyyət belə idi. Popover API-ni sınadığım an Popover API istifadəsinə keçmədim, çünki yeni bir şeylə sınaqdan keçirmək istəyirdim. Brauzerin artıq başa düşdüyünə inandığım alət ipucu davranışını saxlamaqdan bezdiyim üçün dəyişdim. Əvvəlcə şübhə ilə yanaşdım. Əksər yeni veb API-lər sadəlik vəd edir, lakin yenə də qaçmağa çalışdığınız eyni mürəkkəbliyi sakitcə yenidən yaradan yapışqan, kənar işlərin idarə edilməsi və ya ehtiyat məntiq tələb edir. Beləliklə, mümkün olan ən kiçik şəkildə Popover API-ni sınadım. Bunun nə kimi göründüyü budur:
ilə əlaqə yaradır
kimi idarə edir
1. Klaviatura “Sadəcə işləyir” Klaviatura dəstəyi çoxsaylı təbəqələrin düzgün düzülməsindən asılı idi: fokus alət ipucunu işə salmalı, bulanıqlığı gizlətməli, Esc əl ilə simli bağlanmalı və vaxt vacib idi. Bir kənar vəziyyəti qaçırsanız, alət ipucu ya çox uzun müddət açıq qalacaq, ya da oxunmazdan əvvəl yox olacaq. Popover atributunun avtomatik və ya manual olaraq təyin edilməsi ilə brauzer əsasları qəbul edir: Tab və Shift+Tab normal davranır, Esc hər dəfə alət ipucunu bağlayır və əlavə dinləyici tələb olunmur.
Kod bazamdan yoxa çıxanlar qlobal klaviatura işləyiciləri, Esc-ə məxsus təmizləmə məntiqi və klaviatura naviqasiyası zamanı vəziyyət yoxlamaları idi. Klaviatura təcrübəsi saxlamalı olduğum bir şey olmağı dayandırdı və bu, brauzerin zəmanətinə çevrildi. 2. Ekran oxuyucunun proqnozlaşdırılması Bu idiən böyük irəliləyiş. Diqqətli ARIA işi ilə belə, davranış daha əvvəl qeyd etdiyim kimi müxtəlif idi. Hər kiçik dəyişiklik riskli idi. Müvafiq rolu olan bir popoverdən istifadə nə baş verəcəyinə qədər daha sabit və proqnozlaşdırıla bilən görünür və hiss edir:
Və burada başqa bir qələbə var: Keçiddən sonra, Mayak qarşılıqlı əlaqə üçün yanlış ARIA vəziyyəti xəbərdarlıqlarını qeyd etməyi dayandırdı, çünki mənim təsadüfən səhv etməm üçün artıq xüsusi ARIA dövlətləri yoxdur.
3. Fokusun idarə edilməsi Fokus əvvəllər kövrək idi. Əvvəllər belə qaydalarım var idi: fokus tetiğinin alət ipucunu göstərməsinə icazə verin, fokusu alət ipucuna köçürün və bağlamayın, çox yaxın olduqda tətiyi bulandırın və alət ipucunu bağlayın və fokusunu əl ilə bərpa edin. Bu, olmayana qədər işlədi. Popover API ilə brauzer diqqətin daha təbii şəkildə popoverə keçə biləcəyi daha sadə modeli tətbiq edir. Popoverin bağlanması diqqəti tətiyə qaytarır və görünməz fokus tələləri və ya itirilmiş fokus anları yoxdur. Mən fokus bərpa kodu əlavə etmədim; sildim.
Nəticə Popover API o deməkdir ki, göstərişlər artıq sizin simulyasiya etdiyiniz bir şey deyil. Bunlar brauzerin başa düşdüyü bir şeydir. Açılış, bağlanma, klaviatura davranışı, Escape ilə işləmə və əlçatanlığın böyük bir hissəsi indi ad-hoc JavaScript-dən deyil, platformanın özündən gəlir. Bu, alət tipli kitabxanaların köhnəlməsi demək deyil, çünki onlar hələ də mürəkkəb dizayn sistemləri, ağır fərdiləşdirmə və ya köhnə məhdudiyyətlər üçün məna kəsb edir, lakin defolt dəyişib. İlk dəfə olaraq ən sadə alət ipucu da ən doğrusu ola bilər. Əgər maraqlanırsınızsa, bu təcrübəni sınayın: Məhsulunuzda sadəcə bir alət ipucunu Popover API ilə əvəz edin, hər şeyi yenidən yazmayın, bütöv bir sistemi köçürməyin və sadəcə birini seçin və kodunuzdan nəyin itdiyinə baxın. Platforma sizə daha yaxşı primitiv təqdim etdikdə, qələbə yalnız JavaScript-in daha az sətirləri deyil, həm də ümumiyyətlə narahat olmanız lazım olan daha az şeydir. GitHub repomda tam mənbə kodunu yoxlayın. Əlavə Oxu Popoverlərə və əlaqəli API-lərə daha dərindən baxmaq üçün:
"Poppin' In", Geoff Graham "Popoverlər və dialoqlar arasındakı əlaqənin aydınlaşdırılması", Zell Liew "Popover = işarə nədir?", Una Kravets "İstifadəçi Əmrləri", Daniel Schwarz “HTML Popover ilə avtomatik bağlanma bildirişinin yaradılması”, Preethi UI Popover API izahedicisini açın "Balonları aç" John Rhea "CSS Anchor Positioning", Juan Diego Rodriguez
MDN həmçinin Popover API üçün hərtərəfli texniki sənədlər təklif edir.
