Кораллар сездә булган иң кечкенә UI проблемасы кебек тоела. Алар кечкенә һәм гадәттә яшерелгән. Кемдер ничек төзергә дип сорагач, традицион җавап һәрвакыт диярлек кайбер JavaScript китапханәсе ярдәмендә кайта. Озак вакыт бу акыллы киңәш иде. Мин дә аңа иярдем. Өстә, корал киңәше гади. Бер элементка күчегез яки игътибар итегез, ниндидер текст белән кечкенә тартма күрсәтегез, аннары кулланучы читкә киткәч яшерегез. Ләкин берсен реаль кулланучыларга җибәргәннән соң, кырлары күрсәтелә башлый. Клавиатура кулланучылары триггерга керегез, ләкин кораллар киңәшен беркайчан да күрмәгез. Экран укучылары аны ике тапкыр игълан итәләр, яки бөтенләй юк. Тычканны бик тиз күчергәндә, корал очлары ялтырый. Кечкенә экраннарда эчтәлекне каплый. Esc басу аны япмый. Фокус юкка чыга. Вакыт узу белән, минем инструментым коды мин инде булырга теләмәгән әйбергә әйләнде. Чараны тыңлаучылар җыелды. Говер һәм фокус аерым эшләнергә тиеш иде. Тыштан басу махсус очракларга мохтаҗ. ARIA атрибутлары синхрон рәвештә кул белән сакланырга тиеш иде. Smallәрбер кечкенә төзәтмә тагын бер кат логика өстәде. Китапханәләр ярдәм итте, ләкин алар шулай ук мин сәхнә артында нәрсә булганын тулысынча аңлау урынына эшләгән кара тартмаларга охшаш иде. Бу мине яңа Popover API карарга этәрде. Әгәр дә мин китапханә ярдәмендә браузерның туган моделен кулланып, бер коралны яңадан торгызсам, нәрсә булачагын күрәсем килде. Башлап җибәргәндә, шуны әйтергә кирәк, яңа функцияләр кебек, аның белән кайбер әйберләр бар, алар әле дә тимерләнә. Димәк, хәзерге вакытта ул браузерның зур ярдәменә ия, гомуми API өчен берничә кисәк булса да. Бу арада Каниусны күзәтергә кирәк. "Иске" корал Popover API алдыннан, кораллар китапханәсен куллану кыска юл түгел иде. Бу килешү иде. Браузерларда тычкан, клавиатура һәм ярдәмче технологияләр өстендә эшләгән кораллар турында туган төшенчәләр юк иде. Әгәр сез дөреслек турында кайгыртсагыз, сезнең бердәнбер вариантыгыз китапханә куллану иде, һәм мин нәкъ шулай эшләдем. Levelгары дәрәҗәдә, үрнәк һәрвакыт бер үк иде: триггер элементы, яшерен корал элементы һәм икесен координацияләү өчен JavaScript.
<төймә класс = "информация">?
Китапханә чыбык белән эшләде, бу элементны кадакка яки фокуска күрсәтергә, төссезлектә яки тычкан рөхсәтендә яшерергә, төргәккә күчерергә / размерны үзгәртергә мөмкинлек бирде.
Вакыт узу белән, кораллар зәгыйфь булырга мөмкин. Кечкенә үзгәрешләр куркыныч тудырды. Кечкенә төзәтмәләр регрессиягә китерде. Начары, яңа кораллар өстәү шул ук катлаулылыкны мирас итеп алды. Техник яктан эшләнде, ләкин беркайчан да хәл ителмәде. Бу браузерның туган Popover API ярдәмендә кораллар киңәшен яңадан торгызырга булгач, бу хәл иде. Мин поповер API сынап карадым Мин Popover API куллануга күчә алмадым, чөнки яңа нәрсә белән тәҗрибә ясарга теләдем. Мин күчтем, чөнки браузер инде аңларга тиеш дип саный торган корал тәртибен саклаудан арыдым. Мин башта шикләндем. Күпчелек яңа веб-API гадилекне вәгъдә итә, ләкин һаман да клей, кырый эшкәртү яки кире кайту логикасы таләп итә, ул тыныч кына сез качарга тырышкан катлаулылыкны торгыза. Шулай итеп, мин Popover API-ны мөмкин кадәр кечкенә итеп сынап карадым. Менә ул нинди булган:
белән бәйләнеш тудыра <төймә popovertarget = "tip-1">?
1. "Бары тик эшли" клавиатурасы. Клавиатура ярдәме дөрес тезелгән берничә катламга бәйле иде: фокус инструменты очкычын эшләтеп җибәрергә тиеш иде, төссезлек аны яшерергә тиеш иде, Esc кул белән чыбыклы булырга тиеш, һәм вакыт мөһим. Әгәр дә сез бер чит очракны сагынсагыз, кораллар киңәше бик озак торыр яки укылганчы юкка чыгар. Авто яки кулланмага куелган поповер атрибуты белән, браузер нигезләрне үз өстенә ала: Tab һәм Shift + Tab гадәти тәртиптә, Esc корал коралын һәрвакыт япа, һәм өстәмә тыңлаучылар кирәк түгел.
Минем код базамнан юкка чыккан нәрсә - глобаль ачкыч эшкәртүчеләре, Esc-махсус чистарту логикасы, һәм клавиатура навигациясе вакытында дәүләт тикшерүләре. Клавиатура тәҗрибәсе мин сакларга тиеш булган әйбер булудан туктады, һәм ул браузер гарантиясенә әверелде. 2. Экранны алдан әйтү Буиң зур камилләштерү. Игътибарлы ARIA эше белән дә, алда әйтеп үткәнемчә, тәртип төрле иде. Smallәрбер кечкенә үзгәреш куркыныч тоелды. Дөрес роль уйнаган поповерны куллану күпкә тотрыклырак һәм нәрсә булачагын алдан әйтеп була:
Менә тагын бер җиңү: Күчергечтән соң, Маяк үзара бәйләнеш өчен дөрес булмаган ARIA дәүләт кисәтүләрен игълан итүне туктатты, күбесенчә очраклы рәвештә ялгышу өчен ARIA дәүләтләре булмаганга.
3. Фокус белән идарә итү Фокус зәгыйфь иде. Моңа кадәр миндә мондый кагыйдәләр бар иде: фокус триггеры кораллар күрсәтүен күрсәтсен, фокусны кораллар очына күчерегез һәм ябылмагыз, бик якын булганда триггерны төссезләндерегез, инструментыгызны ябып, фокусны кул белән торгызыгыз. Бу булмаганга кадәр эшләде. Popover API ярдәмендә браузер гадирәк модельне куллана, анда фокус табигый рәвештә поповерга күчә ала. Поповерны ябу фокусны триггерга юнәлтә, һәм күзгә күренми торган фокус тозаклары яки югалган фокус мизгелләре юк. Фокусны торгызу коды өстәмәдем; Мин бетердем.
Йомгаклау Popover API дигән сүз, корал киңәшләре сез охшаган әйбер түгел. Алар браузер аңлаган нәрсә. Ачу, ябу, клавиатура тәртибе, Эштән качу, һәм мөмкинлекнең зур өлеше платформаның үзеннән, JavaScript'тан түгел. Бу кораллы китапханәләр искергән дигән сүз түгел, чөнки алар һаман да катлаулы дизайн системалары, авыр көйләү яки мирас чикләүләре өчен мәгънәле, ләкин килешү үзгәрде. Беренче тапкыр иң гади корал киңәше дә иң дөрес булырга мөмкин. Әгәр дә сез кызыксынсагыз, бу экспериментны сынап карагыз: продукттагы бер коралны Popover API белән алыштырыгыз, барысын яңадан язмагыз, бөтен системаны күчермәгез, һәм берсен сайлап алыгыз һәм кодыгызда нәрсә юкка чыкканын карагыз. Платформа сезгә яхшырак примитив биргәндә, җиңү JavaScript сызыклары гына түгел, ә сез бөтенләй борчылырга тиеш әйберләр азрак. Минем GitHub реподагы тулы чыганак кодын карагыз. Киләсе уку Поповерларга һәм аңа бәйле API-ларга тирәнрәк сикерү өчен:
"Поппин", Джефф Грэм "Поповерлар һәм диалоглар арасындагы бәйләнешне ачыклау", Зелл Лью "Поповер нәрсә ул?", Уна Кравец "Чакыручы командалар", Даниэль Шварц "HTML поповеры белән автоматик ябу турында хәбәр итү", Претти UI Popover API аңлатучысын ачу "Шарларны поп (өстә)", Джон Рия "CSS Анкор позициясе", Хуан Диего Родружес
MDN шулай ук Popover API өчен комплекслы техник документлар тәкъдим итә.
