Gereedskapwenke voel soos die kleinste UI-probleem wat jy kan hê. Hulle is klein en gewoonlik weggesteek. Wanneer iemand vra hoe om een te bou, kom die tradisionele antwoord byna altyd terug met behulp van een of ander JavaScript-biblioteek. En vir lank was dit die sinvolle raad. Ek het dit ook gevolg. Op die oppervlak is 'n nutswenk eenvoudig. Beweeg of fokus op 'n element, wys 'n klein blokkie met 'n bietjie teks, en steek dit dan weg wanneer die gebruiker wegbeweeg. Maar sodra jy een aan regte gebruikers gestuur het, begin die rande wys. Sleutelbordgebruikers Tik in die sneller, maar sien nooit die nutswenk nie. Skermlesers kondig dit twee keer aan, of glad nie. Die nutswenk flikker wanneer jy die muis te vinnig beweeg. Dit oorvleuel inhoud op kleiner skerms. Deur Esc te druk maak dit nie toe nie. Fokus raak verlore. Met verloop van tyd het my tooltip-kode gegroei tot iets wat ek nie regtig meer wou besit nie. Gebeurtenisluisteraars het opgestapel. Hover en fokus moes apart hanteer word. Buite-klikke benodig spesiale gevalle. ARIA-kenmerke moes met die hand gesinchroniseer word. Elke klein regstelling het nog 'n laag logika bygevoeg. Biblioteke het gehelp, maar hulle was ook meer soos swart bokse waar ek rond gewerk het in plaas daarvan om ten volle te verstaan wat agter die skerms gebeur. Dit was wat my gedryf het om na die nuwer Popover API te kyk. Ek wou sien wat sou gebeur as ek 'n enkele nutswenk herbou met die blaaier se oorspronklike model sonder die hulp van 'n biblioteek. Soos ons begin, is dit opmerklik dat, soos met enige nuwe kenmerk, daar 'n paar dinge daarmee is wat nog uitgestryk word. Dit gesê, dit geniet tans uitstekende blaaierondersteuning, hoewel daar verskeie dele van die algehele API is wat aan die gang is. Dit is die moeite werd om Caniuse intussen dop te hou. Die "Ou" Nutswenk Voor die Popover API was die gebruik van 'n nutswenk-biblioteek nie 'n kortpad nie. Dit was die verstek. Blaaiers het nie 'n inheemse konsep van 'n nutswenk wat oor muis, sleutelbord en hulptegnologie gewerk het nie. As jy omgegee het vir korrektheid, was jou enigste opsie om 'n biblioteek te gebruik, en dit is presies wat ek gedoen het. Op 'n hoë vlak was die patroon altyd dieselfde: 'n snellerelement, 'n versteekte tooltip-element en JavaScript om die twee te koördineer.
Die biblioteek het die bedrading hanteer wat dit moontlik gemaak het om die element te wys wanneer jy sweef of fokus, wegkruip op vervaag of muisverlof, en herposisioneer/verander grootte op rol.
Met verloop van tyd kan die nutswenk broos word. Klein veranderinge het risiko ingehou. Geringe regstellings het regressies veroorsaak. Erger nog, die toevoeging van nuwe gereedskapwenke het dieselfde kompleksiteit geërf. Dinge het tegnies gewerk, maar het nooit afgehandel of voltooi gevoel nie. Dit was die stand van sake toe ek besluit het om die nutswenk te herbou met behulp van die blaaier se inheemse Popover API. Die oomblik toe ek die Popover API probeer het Ek het nie oorgeskakel na die gebruik van die Popover API nie, want ek wou met iets nuuts eksperimenteer. Ek het oorgeskakel omdat ek moeg was om nutswenk-gedrag te handhaaf wat ek geglo het die blaaier moes reeds verstaan het. Ek was eers skepties. Die meeste nuwe web-API's beloof eenvoud, maar vereis steeds gom, randdooshantering of terugvallogika wat stilweg dieselfde kompleksiteit herskep wat jy probeer ontsnap het. Dus, ek het die Popover API op die kleinste moontlike manier probeer. Hier is hoe dit gelyk het:
1. Die sleutelbord "werk net" Sleutelbordondersteuning was afhanklik van verskeie lae wat korrek in lyn was: fokus moes die nutswenk aktiveer, vervaging moes dit versteek, Esc moes met die hand bedraad word, en tydsberekening het saak gemaak. As jy een randkas gemis het, sal die nutswenk óf te lank oop bly óf verdwyn voordat dit gelees kan word. Met die popover-kenmerk op outomaties of handmatig gestel, neem die blaaier die basiese beginsels oor: Tab en Shift+Tab tree normaal op, Esc maak die nutswenk elke keer toe, en geen ekstra luisteraars word benodig nie.
Wat van my kodebasis verdwyn het, was globale sleutelafhanteerders, Esc-spesifieke opruimingslogika en staatkontroles tydens sleutelbordnavigasie. Die sleutelbordervaring het opgehou om iets te wees wat ek moes onderhou, en dit het 'n blaaierwaarborg geword. 2. Skermleser Voorspelbaarheid Dit was diegrootste verbetering. Selfs met versigtige ARIA-werk het die gedrag gewissel, soos ek vroeër uiteengesit het. Elke klein verandering het riskant gevoel. Die gebruik van 'n popover met 'n behoorlike rol lyk en voel baie meer stabiel en voorspelbaar in soverre dit gaan gebeur:
En hier is nog 'n oorwinning: Na die oorskakeling het Lighthouse opgehou om verkeerde ARIA-staatwaarskuwings vir die interaksie te merk, grootliks omdat daar nie meer persoonlike ARIA-toestande vir my is om per ongeluk verkeerd te maak nie.
3. Fokusbestuur Fokus was vroeër broos. Voorheen het ek reëls gehad soos: laat fokussneller nutswenk wys, skuif fokus na nutswenk en moenie toemaak nie, vervaag sneller wanneer dit te naby is, en maak nutswenk toe en herstel fokus handmatig. Dit het gewerk totdat dit nie het nie. Met die Popover API dwing die blaaier 'n eenvoudiger model af waar fokus meer natuurlik na die popover kan beweeg. Deur die oorspringer toe te maak, word fokus na die sneller teruggekeer, en daar is geen onsigbare fokusvalle of verlore fokus-oomblikke nie. En ek het nie fokusherstelkode bygevoeg nie; Ek het dit verwyder.
Gevolgtrekking Die Popover API beteken dat gereedskapwenke nie meer iets is wat jy simuleer nie. Dit is iets wat die blaaier verstaan. Oopmaak, toemaak, sleutelbordgedrag, ontsnappingshantering en 'n groot deel van toeganklikheid kom nou van die platform self af, nie van ad-hoc JavaScript nie. Dit beteken nie dat tooltip-biblioteke verouderd is nie, want hulle maak steeds sin vir komplekse ontwerpstelsels, swaar aanpassing of nalatenskapbeperkings, maar die verstek het verskuif. Vir die eerste keer kan die eenvoudigste nutswenk ook die mees korrekte een wees. As jy nuuskierig is, probeer hierdie eksperiment: Vervang net een nutswenk in jou produk met die Popover API, moenie alles herskryf nie, moenie 'n hele stelsel migreer nie, en kies net een en kyk wat verdwyn uit jou kode. Wanneer die platform jou 'n beter primitief gee, is die oorwinning nie net minder lyne JavaScript nie, maar dit is minder dinge waaroor jy hoegenaamd hoef te bekommer. Kyk na die volledige bronkode in my GitHub-repo. Verdere lees Vir dieper duik in popovers en verwante API's:
"Poppin' In", Geoff Graham "Verklaar die verhouding tussen popovers en dialoogvensters", Zell Liew "Wat is popover=wenk?", Una Kravets "Oproepopdragte", Daniel Schwarz "Skep 'n outomatiese sluitingskennisgewing met 'n HTML-oorspring", Preethi Maak UI Popover API Explainer oop "Kop (oor) die ballonne", John Rhea “CSS-ankerposisionering”, Juan Diego Rodríguez
MDN bied ook omvattende tegniese dokumentasie vir die Popover API.
