Усплывальныя падказкі выглядаюць як найменшая праблема карыстацкага інтэрфейсу, якую вы можаце мець. Яны маленькія і звычайна схаваныя. Калі нехта пытаецца, як яго стварыць, традыцыйны адказ амаль заўсёды вяртаецца з дапамогай бібліятэкі JavaScript. І доўгі час гэта была разумная парада. Я таксама сачыў за гэтым. На першы погляд, падказка простая. Навядзіце курсор або засяродзьцеся на элеменце, пакажыце маленькае поле з тэкстам, а потым схавайце яго, калі карыстальнік адыходзіць. Але як толькі вы адправіце яго рэальным карыстальнікам, перавагі пачнуць праяўляцца. Карыстальнікі клавіятуры Tab на трыгер, але ніколі не бачыць падказку. Праграмы чытання з экрана паведамляюць пра гэта двойчы або не паведамляюць увогуле. Усплывальная падказка міргае, калі вы рухаеце мышкай занадта хутка. Ён перакрывае кантэнт на меншых экранах. Націск Esc не закрывае яго. Фокус губляецца. З часам мой код падказкі ператварыўся ў тое, чым я насамрэч больш не хацеў валодаць. Слухачы мерапрыемства нагрувасціліся. Навядзенне і фокус трэба было апрацоўваць асобна. Знешнія пстрычкі патрабавалі асаблівых выпадкаў. Атрыбуты ARIA трэба было сінхранізаваць уручную. Кожнае дробнае выпраўленне дадавала яшчэ адзін пласт логікі. Бібліятэкі дапамагалі, але яны больш нагадвалі чорныя скрыні, вакол якіх я працаваў замест таго, каб цалкам разумець, што адбываецца за кадрам. Гэта было тое, што падштурхнула мяне паглядзець на новы Popover API. Я хацеў паглядзець, што адбудзецца, калі я перабудую адну ўсплывальную падказку з выкарыстаннем роднай мадэлі браўзера без дапамогі бібліятэкі. Калі мы пачынаем, варта адзначыць, што, як і ў любой новай функцыі, ёсць некаторыя рэчы, якія ўсё яшчэ выпраўляюцца. Тым не менш, у цяперашні час ён карыстаецца выдатнай падтрымкай браўзераў, хоць ёсць некалькі частак агульнага API, якія знаходзяцца ў стане зменлівасці. Тым часам варта сачыць за Каніюсам. «Старая» падказка Да API Popover выкарыстанне бібліятэкі падказак не было ярлыком. Гэта было па змаўчанні. Браўзеры не мелі ўласнай канцэпцыі ўсплываючай падказкі, якая працавала б з дапамогай мышы, клавіятуры і дапаможных тэхналогій. Калі вы клапаціліся аб правільнасці, ваш адзіны варыянт быў выкарыстоўваць бібліятэку, і гэта менавіта тое, што я зрабіў. На высокім узроўні шаблон заўсёды быў аднолькавым: трыгерны элемент, схаваны элемент падказкі і 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 і значная частка спецыяльных магчымасцей цяпер паходзяць ад самой платформы, а не ад ad-hoc JavaScript. Гэта не значыць, што бібліятэкі ўсплывальных падказак састарэлі, таму што яны па-ранейшаму маюць сэнс для складаных сістэм праектавання, цяжкіх налад або састарэлых абмежаванняў, але па змаўчанні змянілася. Упершыню самая простая падказка можа быць і самай правільнай. Калі вам цікава, паспрабуйце гэты эксперымент: проста заменіце толькі адну ўсплывальную падказку ў вашым прадукце API Popover, не перапісвайце ўсё, не пераносіце ўсю сістэму, а проста выберыце адну і паглядзіце, што знікае з вашага кода. Калі платформа дае вам лепшы прымітыў, выйгрыш заключаецца не толькі ў меншай колькасці радкоў JavaScript, але і ў меншай колькасці рэчаў, пра якія вам наогул трэба турбавацца. Праверце поўны зыходны код у маім сховішчы GitHub. Далейшае чытанне Для больш глыбокага апускання ва ўсплывальныя вобразы і звязаныя з імі API:
«Poppin’ In», Джэф Грэм «Удакладненне ўзаемасувязі паміж усплываючымі вокнамі і дыялогамі», Зел Ліў “Што такое поповер=падказка?”, Уна Кравец «Каманды Invoker», Дэніэл Шварц «Стварэнне апавяшчэння аб аўтаматычным закрыцці з усплывальным акном HTML», Прэты Адкрыйце UI Popover API Explainer Джон Ры "Лоп(над) паветранымі шарамі". «Якарнае пазіцыянаванне CSS», Хуан Дыега Радрыгес
MDN таксама прапануе поўную тэхнічную дакументацыю для Popover API.
