Serişteyên amûran wekî pirsgirêka herî piçûk a UI ya ku hûn dikarin hebin hîs dikin. Ew piçûk in û bi gelemperî veşartî ne. Gava ku kesek dipirse meriv çawa yek ava dike, bersiva kevneşopî hema hema her gav bi karanîna hin pirtûkxaneya JavaScript vedigere. Û ji bo demeke dirêj, ew şîreta maqûl bû. Min jî şopand. Li ser rû, a tooltip hêsan e. Li hêmanekê bizivirin an bala xwe bidin, qutiyek piçûk bi hin nivîsê re nîşan bidin, dûv re gava ku bikarhêner jê dûr dikeve wê veşêrin. Lê gava ku hûn yek ji bikarhênerên rastîn re bişînin, qerax dest pê dikin. Bikarhênerên klavyeyê têxin nav tetikê, lê tu carî şîreta amûrê nabînin. Xwendevanên ekranê wê du caran, an jî qet ranagihînin. Dema ku hûn mişkê bi lez tevdigerin, şîreta amûrê dihejîne. Ew naverokê li ser ekranên piçûktir dike. Pêlkirina Esc wê nagire. Focus winda dibe. Bi demê re, koda tooltip-a min bû tiştek ku ez bi rastî nexwest ku êdî bibim xwedî. Guhdarên bûyerê li hev kom kirin. Diviyabû ku hover û baldarî ji hev cuda bihata girtin. Ji klîkên derveyî rewşên taybetî hewce bûn. Taybetmendiyên ARIA diviyabû ku bi destan hevdeng werin girtin. Her sererastkirina piçûk qatek din a mantiqê zêde dikir. Pirtûkxane alîkarî kirin, lê ew di heman demê de bêtir mîna qutiyên reş bûn ku ez li dora xwe dixebitim li şûna ku ez bi tevahî fam bikim ka çi li paş perdeyê diqewime. Ya ku min hişt ku ez li Popover API-ya nûtir binihêrim. Min dixwest bibînim ka dê çi biqewime ger ez bi karanîna modela xwemalî ya gerokê bêyî arîkariya pirtûkxaneyek amûrek yekane ji nû ve ava bikim. Gava ku em dest pê dikin, hêjayî gotinê ye ku, wekî her taybetmendiyek nû, hin tişt bi wê re hene ku hîn jî têne derxistin. Wê got, ew naha ji piştgiriyek gerokê ya mezin kêfxweş dibe, her çend çend perçeyên API-ya giştî ya ku di herikandinê de ne jî hene. Hêja ye ku di vê navberê de çavê xwe li Caniuse bigire. Pêşniyara Amûra "Kevn". Berî Popover API-ê, karanîna pirtûkxaneyek tooltip ne kurtebir bû. Ew standard bû. Gerokan xwedan têgehek xwemal a amûrek ku li ser mişk, klavye, û teknolojiya arîkar dixebitî tune bû. Ger we bala rastdariyê dikişand, vebijarka we tenê karanîna pirtûkxaneyek bû, û tiştê ku min kir ev e. Di astek bilind de, nimûne her gav yek bû: hêmanek tetikê, hêmanek amûrek veşartî, û JavaScript ji bo hevrêzkirina herduyan.
Kitêbxaneyê têlên ku hişt ku hêman li ser hilavêtin an balkişandinê nîşan bide, li ser tavilê an hiştina mişkê veşêre, û li ser gerokê ji nû ve cih/mezinbûnê vegerîne dest pê kir.
Bi demê re, pêlava amûrê dikaribû şikestî bibe. Guhertinên piçûk metirsî hilgirtibûn. Serastkirinên piçûk bûn sedema paşveçûn. Ya xirabtir, lêzêdekirina şîretên nû yên amûrê heman tevliheviyê mîras girt. Tiştên teknîkî dixebitîn, lê tu carî xwe safî an temam nedikirin. Dema ku min biryar da ku bi karanîna API-ya xwemalî ya gerokê Popover-ê vesazkirina amûrê ji nû ve ava bikim ev rewş bû. Wexta ku min hewl da Popover API Min guh neda bikaranîna Popover API ji ber ku min dixwest ez bi tiştek nû biceribînim. Min veguherand ji ber ku ez ji domandina behremendiya tooltip ku min bawer dikir ku gerok divê jixwe fêm kiriba westiyayî bûm. Ez di destpêkê de bi guman bûm. Piraniya API-yên webê yên nû soza sadebûnê didin, lê dîsa jî pêdiviya zencîr, guheztina qeraxê, an mantiqa paşverû heye ku bi bêdengî heman tevliheviya ku we hewl dida birevin ji nû ve diafirîne. Ji ber vê yekê, min API-ya Popover bi awayê herî piçûk ceriband. Li vir çi xuya bû:
re çêdike
1. Klavyeya "Tenê dixebite" Piştgiriya klavyeyê bi gelek qatan ve girêdayî bû ku bi rêkûpêk hatine rêz kirin: diviyabû balê bikişîne ser şîreta amûrê, neçar bû ku wê veşêre, Esc diviyabû bi destan were girêdan, û dem girîng bû. Ger we yek qeraxek ji bîr kir, şîreta amûrê dê pir vekirî bimîne an jî berî ku were xwendin winda bibe. Digel ku taybetmendiya popover-ê wekî otomatîk an destan hatî danîn, gerok bingehên bingehîn digire: Tab û Shift+Tab bi gelemperî tevdigerin, Esc her carê şîreta amûrê digire, û guhdarên zêde ne hewce ne.
Tiştê ku ji bingeha koda min winda bû rêgirên klavyeya gerdûnî, mantiqa paqijkirina Esc-taybet, û kontrolên dewletê di dema navîgasyona klavyeyê de bûn. Tecrûbeya klavyeyê rawestiya ku ez tiştek bidomînim, û ew bû garantiyek gerokê. 2. Pêşbîniya Screenreader Ev bûpêşketina herî mezin. Tewra bi xebata baldar a ARIA-yê re, wekî ku min berê diyar kir, behre cûda bû. Her guhertinek piçûk xeternak hîs dikir. Bikaranîna popoverek bi rolek guncan bi qasî ku dê biqewime pir aramtir û pêşbîntir xuya dike û hîs dike:
Û li vir serkeftinek din heye: Piştî veguheztinê, Lighthouse ji bo danûstendinê hişyariyên xelet ên dewleta ARIA rawestand, bi piranî ji ber ku êdî dewletên ARIA-ya xwerû tune ku ez bi xeletî xelet bibim.
3. Rêveberiya Focus Focus berê şikestî bû. Berê, min qaîdeyên weha hebûn: bila balê bikişîne ser amûrê nîşan bide, balê bikişîne nav şîreta amûrê û negire, gava ku ew pir nêzîk be tetikê bişewitîne, û şîreta amûrê bigire û bi destan bala xwe vegerîne. Ev kar heta ku ew nekir. Bi Popover API-ê re, gerok modelek hêsantir pêk tîne ku li wir baldarî dikare bi rengek xwezayî veguhezîne popoverê. Girtina popoverê balê vedigerîne ser tetikê, û xefikên balê yên nedîtbar an kêliyên balê yên winda tune. Û min koda vegerandina fokusê lê zêde nekir; Min jê kir.
Encam Popover API tê vê wateyê ku serişteyên amûran êdî ne tiştek ku hûn simul dikin ne. Ew tiştek ku gerok fêm dike. Vekirin, girtin, reftarên klavyeyê, destwerdana revê, û perçeyek mezin a gihîştinê naha ji platformê bixwe tê, ne ji JavaScript ad-hoc. Ev nayê vê wateyê ku pirtûkxaneyên tooltip qedîm in ji ber ku ew hîn jî ji bo pergalên sêwirana tevlihev, xwerûkirina giran, an astengiyên mîrasê watedar in, lê xwerû guhertiye. Ji bo cara yekem, amûra herî hêsan jî dikare ya herî rast be. Heke hûn meraq dikin, vê ceribandinê biceribînin: Tenê di hilbera xwe de tenê yek amûrek bi API-ya Popover veguherînin, her tiştî ji nû ve nenivîsin, pergalek tevahî koç nekin, û tenê yek hilbijêrin û bibînin ka çi ji koda we winda dibe. Gava ku platform primitiveek çêtir dide we, serkeftin ne tenê kêm rêzikên JavaScript-ê ye, lê ew hindiktir tiştên ku hûn ji wan re bitirsin in. Koda çavkaniyê ya tevahî di depoya min a GitHub de binihêrin. Bêtir Xwendina Ji bo kûrtir di nav popover û API-yên têkildar de:
"Poppin' In", Geoff Graham "Raşkirina Têkiliya Di Navbera Popover û Diyalogan de", Zell Liew "Popover = hint çi ye?", Una Kravets "Fermanên Invoker", Daniel Schwarz "Afirandina Agahdariya Xweser-Girtinê bi HTML Popover", Preethi UI Popover API Explainer vekin "Pop (ser) Balonan", John Rhea "CSS Anchor Positioning", Juan Diego Rodríguez
MDN di heman demê de ji bo Popover API-ê belgeyên teknîkî yên berfireh pêşkêşî dike.
