Підказки здаються найменшою проблемою інтерфейсу користувача, яка може виникнути. Вони маленькі і зазвичай приховані. Коли хтось запитує, як його створити, традиційна відповідь майже завжди повертається за допомогою бібліотеки JavaScript. І тривалий час це була розумна порада. Я теж дотримувався цього. На перший погляд, підказка проста. Наведіть курсор або зосередьтеся на елементі, покажіть маленьку рамку з текстом, а потім сховайте її, коли користувач відійде. Але як тільки ви надішлете його реальним користувачам, переваги почнуть проявлятися. Користувачі клавіатури натискають на тригер, але не бачать підказки. Програми зчитування з екрана повідомляють про це двічі або взагалі не повідомляють. Спливаюча підказка мерехтить, коли ви занадто швидко рухаєте мишею. Він перекриває вміст на менших екранах. Натискання Esc не закриває його. Втрачається фокус. З часом мій код підказки перетворився на те, чим я справді більше не хотів володіти. Слухачі заходу звалилися. Наведення та фокус довелося обробляти окремо. Зовнішні кліки потребували особливих випадків. Атрибути ARIA потрібно було синхронізувати вручну. Кожне невелике виправлення додавало ще один рівень логіки. Бібліотеки допомогли, але вони були більше схожі на чорні скриньки, навколо яких я працював замість того, щоб повністю розуміти, що відбувається за лаштунками. Саме це підштовхнуло мене подивитися на новий Popover API. Я хотів побачити, що станеться, якщо я перебудую одну спливаючу підказку за допомогою рідної моделі браузера без допомоги бібліотеки. На початку варто зауважити, що, як і з будь-якою новою функцією, деякі речі все ще виправляються. Тим не менш, наразі він користується чудовою підтримкою браузера, хоча є кілька частин загального API, які постійно змінюються. Тим часом варто стежити за Каніусом. «Стара» підказка До Popover API використання бібліотеки підказок не було швидким способом. Це було за замовчуванням. Браузери не мали рідної концепції спливаючої підказки, яка працювала б із мишею, клавіатурою та допоміжними технологіями. Якщо ви дбали про коректність, вашим єдиним вибором було використовувати бібліотеку, і саме це я зробив. На високому рівні шаблон завжди був однаковим: тригерний елемент, прихований елемент підказки та JavaScript для координації обох.
Бібліотека обробляла підключення, яке дозволяло елементу відображатися під час наведення або фокусування, ховатися під час розмиття або відходу миші та змінювати положення/розмір під час прокручування.
З часом підказка може стати крихкою. Невеликі зміни несли ризик. Незначні виправлення викликали регресії. Гірше того, додавання нових підказок успадкувало ту саму складність. Технічно все працювало, але ніколи не здавалося, що вирішено чи завершено. Саме таким був стан речей, коли я вирішив перебудувати спливаючу підказку за допомогою рідного Popover API браузера. Момент, коли я спробував Popover API Я не перейшов на використання Popover API, тому що хотів поекспериментувати з чимось новим. Я перейшов, тому що мені набридло підтримувати поведінку спливаючої підказки, яку, як я вважав, браузер уже повинен був зрозуміти. Спочатку я був налаштований скептично. Більшість нових веб-інтерфейсів API обіцяють простоту, але все ще вимагають зв’язку, обробки країв або резервної логіки, яка тихо відтворює ту саму складність, від якої ви намагалися уникнути. Отже, я спробував Popover API у найменший спосіб. Ось як це виглядало:
1. Клавіатура просто працює Підтримка клавіатури залежала від правильного розташування кількох шарів: фокус мав викликати спливаючу підказку, розмиття — приховувати його, Esc потрібно було підключати вручну, а час мав значення. Якщо ви пропустили один регістр, спливаюча підказка або залишатиметься відкритою занадто довго, або зникне, перш ніж її можна буде прочитати. З атрибутом popover, встановленим на auto або manual, браузер бере на себе основні функції: Tab і Shift+Tab поводяться нормально, Esc щоразу закриває спливаючу підказку, і додаткові прослухувачі не потрібні.
З моєї кодової бази зникли глобальні обробники натискання клавіш, спеціальна логіка очищення Esc і перевірки стану під час навігації клавіатурою. Робота з клавіатурою перестала бути тим, що я мав підтримувати, і це стало гарантією браузера. 2. Передбачуваність програми зчитування з екрана Це булонайбільше покращення. Навіть при ретельній роботі ARIA поведінка змінювалася, як я описав раніше. Кожна маленька зміна була ризикованою. Використання поповеру з належною роллю виглядає і виглядає набагато стабільнішим і передбачуванішим щодо того, що станеться:
І ось ще одна перемога: після перемикання Lighthouse перестав позначати неправильні попередження про стан ARIA для взаємодії, здебільшого тому, що більше немає спеціальних станів ARIA, які я міг би випадково помилитися.
3. Управління фокусом Раніше фокус був крихким. Раніше я мав такі правила: дозволити тригеру фокуса показувати спливаючу підказку, перемістити фокус у спливаючу підказку та не закривати, розмити тригер, коли він надто близько, і закрити спливаючу підказку та відновити фокус вручну. Це працювало, поки не сталося. За допомогою Popover API веб-переглядач використовує простішу модель, де фокус може природніше переміщатися в спливне вікно. Закриття спливаючого вікна повертає фокус до тригера, і немає невидимих пасток фокусування чи втрачених моментів фокусування. І я не додав код відновлення фокусу; Я видалив його.
Висновок Popover API означає, що підказки більше не є чимось, що ви симулюєте. Це те, що браузер розуміє. Відкриття, закриття, поведінка клавіатури, обробка Escape і велика частина спеціальних можливостей тепер походять від самої платформи, а не від спеціального JavaScript. Це не означає, що бібліотеки підказок застаріли, оскільки вони все ще мають сенс для складних систем проектування, важких налаштувань або застарілих обмежень, але стандартне значення змінилося. Вперше найпростіша підказка може бути й найправильнішою. Якщо вам цікаво, спробуйте цей експеримент: просто замініть лише одну підказку у своєму продукті API Popover, не переписуйте все, не переносьте всю систему, а просто виберіть одну та подивіться, що зникне з вашого коду. Коли платформа дає вам кращий примітив, перевага полягає не лише в меншій кількості рядків JavaScript, а й у меншій кількості речей, про які вам взагалі доведеться турбуватися. Перегляньте повний вихідний код у моєму сховищі GitHub. Подальше читання Для глибшого занурення в спливаючих вікон і пов’язаних API:
«Poppin’ In», Джефф Грем «З’ясування зв’язку між спливаючими вікнами та діалогами», Зелл Лью «Що таке поповер=підказка?», Уна Кравець «Команди Invoker», Деніел Шварц «Створення сповіщення про автоматичне закриття за допомогою спливаючого вікна HTML», Preethi Відкрийте UI Popover API Explainer «Лопніть повітряні кулі», Джон Рі «Позиціонування CSS Anchor», Хуан Дієго Родрігес
MDN також пропонує повну технічну документацію для Popover API.
