راهنمای ابزار کوچکترین مشکل رابط کاربری است که می توانید داشته باشید. آنها کوچک هستند و معمولاً پنهان هستند. وقتی کسی می پرسد که چگونه می توان یکی را ساخت، پاسخ سنتی تقریباً همیشه با استفاده از برخی از کتابخانه های جاوا اسکریپت برمی گردد. و برای مدت طولانی، این توصیه معقول بود. من هم دنبالش کردم در سطح، یک راهنمای ابزار ساده است. ماوس را نگه دارید یا روی یک عنصر فوکوس کنید، کادر کوچکی را با مقداری متن نشان دهید، سپس وقتی کاربر دور شد آن را پنهان کنید. اما وقتی یکی را برای کاربران واقعی ارسال کردید، لبهها ظاهر میشوند. کاربران صفحه کلید به ماشه وارد شوند، اما هرگز راهنمای ابزار را نمی بینند. صفحهخوانها آن را دو بار اعلام میکنند یا اصلاً نمیگویند. وقتی ماوس را خیلی سریع حرکت میدهید، راهنمای ابزار سوسو میزند. این محتوا روی صفحه نمایش های کوچکتر همپوشانی دارد. با فشردن Esc آن را نمی بندم. تمرکز از بین می رود با گذشت زمان، کد راهنمای ابزار من به چیزی تبدیل شد که واقعاً دیگر نمیخواستم آن را داشته باشم. شنوندگان رویداد انباشته شدند. شناور و فوکوس باید جداگانه انجام می شد. کلیک های بیرونی به موارد خاصی نیاز داشت. ویژگی های ARIA باید با دست همگام می شدند. هر اصلاح کوچک لایه دیگری از منطق اضافه می کرد. کتابخانهها کمک کردند، اما بیشتر شبیه جعبههای سیاه بودند که به جای درک کامل آنچه در پشت صحنه اتفاق میافتد، در اطراف آن کار میکردم. این چیزی بود که مرا وادار کرد تا به API جدیدتر Popover نگاه کنم. میخواستم ببینم اگر یک راهنمای ابزار واحد را با استفاده از مدل بومی مرورگر بدون کمک کتابخانه بازسازی کنم، چه اتفاقی میافتد. همانطور که شروع می کنیم، شایان ذکر است که مانند هر ویژگی جدید، مواردی در آن وجود دارد که هنوز در حال تکمیل شدن هستند. با این حال، در حال حاضر از پشتیبانی عالی مرورگر برخوردار است، اگرچه چندین بخش در API کلی وجود دارد که در جریان هستند. ارزش این را دارد که در این بین مراقب Caniuse باشید. راهنمای ابزار "قدیمی". قبل از Popover API، استفاده از یک کتابخانه راهنمای ابزار میانبر نبود. پیش فرض بود. مرورگرها مفهومی بومی از راهنمای ابزاری که روی ماوس، صفحه کلید و فناوری کمکی کار میکند نداشتند. اگر به صحت اهمیت می دادید، تنها گزینه شما استفاده از کتابخانه بود و این دقیقاً همان کاری است که من انجام دادم. در سطح بالا، الگو همیشه یکسان بود: یک عنصر ماشه، یک عنصر راهنمای پنهان و جاوا اسکریپت برای هماهنگ کردن این دو.
کتابخانه سیمکشیهایی را مدیریت میکرد که به عنصر اجازه میداد در حالت شناور یا فوکوس نشان داده شود، در حالت تاری یا رها کردن ماوس پنهان شود، و در اسکرول تغییر مکان/تغییر اندازه داد.
با گذشت زمان، راهنمای ابزار ممکن است شکننده شود. تغییرات کوچک خطراتی را به همراه داشت. اصلاحات جزئی باعث رگرسیون شد. بدتر از آن، افزودن نکات ابزار جدید همان پیچیدگی را به ارث برد. کارها از نظر فنی کار میکردند، اما هیچوقت احساس نمیشد که ثابت یا کامل باشد. این وضعیت زمانی بود که تصمیم گرفتم راهنمای ابزار را با استفاده از API بومی مرورگر Popover بازسازی کنم. لحظه ای که سعی کردم API Popover من به استفاده از Popover API تغییر ندادم زیرا میخواستم چیز جدیدی را آزمایش کنم. من تغییر کردم زیرا از حفظ رفتار راهنمای ابزار خسته شده بودم که معتقد بودم مرورگر باید قبلاً آن را درک می کرد. من اول شک داشتم. اکثر APIهای وب جدید نوید سادگی را می دهند، اما همچنان به چسب، مدیریت لبه یا منطق بازگشتی نیاز دارند که بی سر و صدا همان پیچیدگی را بازسازی می کند که شما سعی می کردید از آن فرار کنید. بنابراین، من Popover API را به کوچکترین روش ممکن امتحان کردم. در اینجا به نظر می رسد:
را ایجاد می کند
مدیریت می کند
1. صفحه کلید "فقط کار می کند" پشتیبانی از صفحهکلید به لایههای متعدد بستگی داشت که بهدرستی ردیف میشوند: فوکوس باید راهنمای ابزار را فعال میکرد، تاری باید آن را پنهان میکرد، Esc باید بهصورت دستی سیمکشی میشد، و زمانبندی اهمیت داشت. اگر یک مورد لبه را از دست داده باشید، راهنمای ابزار یا برای مدت طولانی باز می ماند یا قبل از خواندن ناپدید می شود. با تنظیم ویژگی popover روی خودکار یا دستی، مرورگر اصول اولیه را به عهده می گیرد: Tab و Shift+Tab به طور معمول رفتار می کنند، Esc هر بار راهنمای ابزار را می بندد و نیازی به شنونده اضافی نیست.
آنچه از پایگاه کد من ناپدید شد، کنترلکنندههای کلید جهانی، منطق پاکسازی ویژه Esc، و بررسی وضعیت در طول پیمایش صفحهکلید بود. تجربه صفحه کلید دیگر چیزی نبود که من مجبور بودم آن را حفظ کنم و به یک ضمانت مرورگر تبدیل شد. 2. قابل پیش بینی بودن صفحه نمایش این بودبزرگترین پیشرفت حتی با کار دقیق ARIA، رفتار متفاوت بود، همانطور که قبلاً توضیح دادم. هر تغییر کوچکی احساس خطر می کرد. استفاده از پاپاور با نقش مناسب بسیار پایدارتر و قابل پیش بینی تر به نظر می رسد تا جایی که قرار است اتفاق بیفتد:
و در اینجا یک پیروزی دیگر وجود دارد: پس از سوئیچ، Lighthouse از پرچم گذاری هشدارهای نادرست وضعیت ARIA برای تعامل متوقف شد، عمدتاً به این دلیل که دیگر حالت های ARIA سفارشی وجود ندارد که من به طور تصادفی اشتباه کنم.
3. مدیریت تمرکز تمرکز قبلا شکننده بود. قبلاً قوانینی داشتم مانند: اجازه دهید فوکوس باعث نمایش راهنمای ابزار شود، فوکوس را به راهنمای ابزار منتقل کنید و بسته نشود، ماشه را تار کنید وقتی خیلی نزدیک است، و راهنمای ابزار را ببندید و فوکوس را به صورت دستی بازیابی کنید. این کار تا زمانی که نشد. با Popover API، مرورگر مدل سادهتری را اعمال میکند که در آن تمرکز میتواند بهطور طبیعی به پاپاور منتقل شود. با بستن پاپاور، فوکوس به ماشه باز می گردد و هیچ تله فوکوس نامرئی یا لحظه های فوکوس از دست رفته وجود ندارد. و من کد بازیابی فوکوس را اضافه نکردم. حذفش کردم
نتیجه گیری Popover API به این معنی است که راهنمای ابزار دیگر چیزی نیست که شما شبیه سازی کنید. آنها چیزی هستند که مرورگر آن را درک می کند. باز کردن، بستن، رفتار صفحهکلید، مدیریت Escape و بخش بزرگی از دسترسی، اکنون از خود پلتفرم میآیند، نه از جاوا اسکریپت موقت. این بدان معنا نیست که کتابخانههای راهنمای ابزار منسوخ شدهاند زیرا هنوز برای سیستمهای طراحی پیچیده، سفارشیسازی سنگین یا محدودیتهای قدیمی منطقی هستند، اما پیشفرض تغییر کرده است. برای اولین بار، ساده ترین راهنمای ابزار می تواند صحیح ترین هم باشد. اگر کنجکاو هستید، این آزمایش را امتحان کنید: به سادگی فقط یک راهنمای ابزار را در محصول خود با Popover API جایگزین کنید، همه چیز را بازنویسی نکنید، کل سیستم را انتقال ندهید، و فقط یکی را انتخاب کنید و ببینید چه چیزی از کد شما ناپدید می شود. هنگامی که پلتفرم یک بدوی بهتر به شما می دهد، برد فقط خطوط کمتری از جاوا اسکریپت نیست، بلکه چیزهای کمتری است که اصلاً باید نگران آنها باشید. کد منبع کامل را در مخزن GitHub من بررسی کنید. ادامه مطلب برای بررسی عمیقتر پاپاورها و APIهای مرتبط:
«پاپین این»، جف گراهام "روشن کردن رابطه بین پاپاورها و دیالوگ ها"، زل لیو یونا کراوتس، "popoover=hint چیست؟" "فرمان های فراخوان"، دانیل شوارتز "ایجاد یک اعلان بسته شدن خودکار با یک HTML Popover"، Preethi UI Popover API Explainer را باز کنید «بالونها را پاپ بزن» جان رئا "موقعیت لنگر CSS"، خوان دیگو رودریگز
MDN همچنین مستندات فنی جامعی را برای Popover API ارائه می دهد.
