Konsiletoj sentas kiel la plej malgranda UI-problemo, kiun vi povas havi. Ili estas etaj kaj kutime kaŝitaj. Kiam iu demandas kiel konstrui unu, la tradicia respondo preskaŭ ĉiam revenas uzante iun JavaScript-bibliotekon. Kaj dum longa tempo, tio estis la prudenta konsilo. Ankaŭ mi sekvis ĝin. Sur la surfaco, konsileto estas simpla. Ŝvebi aŭ fokusigi elementon, montru skatolon kun iom da teksto, poste kaŝu ĝin kiam la uzanto malproksimiĝas. Sed post kiam vi sendas unu al realaj uzantoj, la randoj komencas montriĝi. Uzantoj de klavaro Alklaku la ellasilon, sed neniam vidu la konsileton. Ekranlegiloj anoncas ĝin dufoje, aŭ tute ne. La konsileto flagras kiam vi movas la muson tro rapide. Ĝi interkovras enhavon sur pli malgrandaj ekranoj. Premante Esc ne fermas ĝin. Fokuso perdiĝas. Kun la tempo, mia konsila kodo kreskis al io, kion mi vere ne volis posedi plu. Eventaj aŭskultantoj amasiĝis. Ŝvebi kaj fokuso devis esti pritraktitaj aparte. Eksteraj klakoj bezonis specialajn kazojn. ARIA-atributoj devis esti sinkronigitaj permane. Ĉiu eta riparo aldonis alian tavolon de logiko. Bibliotekoj helpis, sed ili estis ankaŭ pli kiel nigraj skatoloj, kiujn mi prilaboris, anstataŭ plene kompreni, kio okazis malantaŭ la kulisoj. Tio estis kio puŝis min rigardi la pli novan Popover API. Mi volis vidi kio okazus se mi rekonstruus ununuran konsileton uzante la denaskan modelon de la retumilo sen la helpo de biblioteko. Dum ni komencas, indas noti, ke, kiel kun iu ajn nova funkcio, ekzistas iuj aferoj kun ĝi, kiuj ankoraŭ estas gladitaj. Dirite, ĝi nuntempe ĝuas bonegan retumilon, kvankam ekzistas pluraj pecoj al la ĝenerala API, kiuj fluas. Intertempe valoras rigardi Caniuse. La "Malnova" Konsileto Antaŭ la Popover API, uzado de konsileto-biblioteko ne estis ŝparvojo. Ĝi estis la defaŭlta. Retumiloj ne havis indiĝenan koncepton de konsileto kiu funkciis trans muso, klavaro kaj helpteknologio. Se vi zorgis pri ĝusteco, via sola eblo estis uzi bibliotekon, kaj ĝuste tion mi faris. Je alta nivelo, la ŝablono ĉiam estis la sama: ellasilelemento, kaŝita ilotipelemento, kaj JavaScript por kunordigi la du.
La biblioteko pritraktis la drataron kiu permesis al la elemento montri sur ŝvebado aŭ fokuso, kaŝi sur malklariĝo aŭ musforiro, kaj repoziciigi/regrandigi sur rullibro.
Kun la tempo, la konsileto povus fariĝi delikata. Malgrandaj ŝanĝoj portis riskon. Malgrandaj korektoj kaŭzis regresojn. Pli malbone, aldoni novajn konsiletojn heredis la saman kompleksecon. Aferoj teknike funkciis, sed neniam sentiĝis aranĝitaj aŭ kompletaj. Tio estis la stato kiam mi decidis rekonstrui la konsileton per la denaska Popover API de la retumilo. La Momento Mi Provis La Popover API Mi ne ŝanĝis al uzado de la Popover API ĉar mi volis eksperimenti kun io nova. Mi ŝanĝis ĉar mi estis laca de konservi konsilan konduton, kiun mi kredis, ke la retumilo jam devus kompreni. Mi estis skeptika komence. La plej multaj novaj TTT-API-oj promesas simplecon, sed tamen postulas gluon, rando-kazan uzadon aŭ logikon, kiu trankvile rekreas la saman kompleksecon, kiun vi provis eskapi. Do, mi provis la Popover API en la plej malgranda maniero ebla. Jen kiel tio aspektis:
1. La Klavaro "Nur Funkcias" Klavarsubteno dependis de pluraj tavoloj viciĝantaj ĝuste: fokuso devis ekigi la konsileton, malklarigi devis kaŝi ĝin, Esc devis esti kabligita permane, kaj tempo gravis. Se vi maltrafis unu randan kazon, la konsileto aŭ restus malfermita tro longe aŭ malaperus antaŭ ol ĝi povus esti legita. Kun la popover-atributo agordita al aŭtomata aŭ manlibro, la retumilo transprenas la bazaĵojn: Tab kaj Shift+Tab kondutas normale, Esc fermas la konsileton ĉiufoje, kaj neniuj kromaj aŭskultantoj estas bezonataj.
Kio malaperis de mia kodbazo estis tutmondaj klavsubtraktiloj, Esc-specifa puriglogiko, kaj ŝtatkontroloj dum klavarnavigado. La klavara sperto ĉesis esti io, kion mi devis konservi, kaj ĝi fariĝis retumila garantio. 2. Ekranlegilo Antaŭvidebleco Ĉi tio estis laplej granda plibonigo. Eĉ kun zorgema ARIA laboro, la konduto variis, kiel mi skizis antaŭe. Ĉiu eta ŝanĝo sentis riska. Uzi popover kun taŭga rolo aspektas kaj sentiĝas multe pli stabila kaj antaŭvidebla koncerne kio okazos: < div popover = " manlibro " rolo = " konsileto " > Helpema klarigo
