Mae cynghorion offer yn teimlo fel y broblem UI leiaf y gallwch ei chael. Maent yn fach iawn ac yn gudd fel arfer. Pan fydd rhywun yn gofyn sut i adeiladu un, mae'r ateb traddodiadol bron bob amser yn dod yn ôl gan ddefnyddio rhywfaint o lyfrgell JavaScript. Ac am amser hir, dyna oedd y cyngor call. Dilynais ef, hefyd. Ar yr wyneb, mae tip offer yn syml. Hofran neu ganolbwyntio ar elfen, dangoswch flwch bach gyda rhywfaint o destun, yna ei guddio pan fydd y defnyddiwr yn symud i ffwrdd. Ond ar ôl i chi anfon un i ddefnyddwyr go iawn, mae'r ymylon yn dechrau dangos. Defnyddwyr bysellfwrdd Tab i mewn i'r sbardun, ond byth yn gweld y cyngor. Mae darllenwyr sgrin yn ei gyhoeddi ddwywaith, neu ddim o gwbl. Mae'r cyngor yn crynu pan fyddwch chi'n symud y llygoden yn rhy gyflym. Mae'n gorgyffwrdd cynnwys ar sgriniau llai. Nid yw pwyso Esc yn ei gau. Ffocws yn mynd ar goll. Dros amser, tyfodd fy nghod cyngor offer yn rhywbeth nad oeddwn wir eisiau bod yn berchen arno mwyach. Pentyrrodd gwrandawyr y digwyddiad. Roedd yn rhaid ymdrin â hofran a ffocws ar wahân. Roedd angen achosion arbennig ar gliciau allanol. Roedd yn rhaid cysoni priodoleddau ARIA â llaw. Ychwanegodd pob atgyweiriad bach haen arall o resymeg. Roedd llyfrgelloedd yn helpu, ond roedden nhw hefyd yn debycach i focsys du roeddwn i'n gweithio o gwmpas yn lle deall yn iawn beth oedd yn digwydd y tu ôl i'r llenni. Dyna wnaeth fy ngwthio i edrych ar yr API Popover mwy newydd. Roeddwn i eisiau gweld beth fyddai'n digwydd pe bawn i'n ailadeiladu un cyngor gan ddefnyddio model brodorol y porwr heb gymorth llyfrgell. Wrth i ni ddechrau, mae'n werth nodi, fel gydag unrhyw nodwedd newydd, bod rhai pethau gydag ef sy'n dal i gael eu datrys. Wedi dweud hynny, ar hyn o bryd mae'n mwynhau cefnogaeth porwr gwych, er bod yna sawl darn i'r API cyffredinol sydd mewn fflwcs. Mae’n werth cadw llygad ar Caniuse yn y cyfamser. Yr “Hen” Awgrym Offer Cyn yr API Popover, nid oedd defnyddio llyfrgell cyngor offer yn llwybr byr. Hwn oedd y rhagosodiad. Nid oedd gan borwyr gysyniad brodorol o gyngor a oedd yn gweithio ar draws llygoden, bysellfwrdd a thechnoleg gynorthwyol. Os oeddech chi'n poeni am gywirdeb, eich unig opsiwn oedd defnyddio llyfrgell, a dyna'n union wnes i. Ar lefel uchel, roedd y patrwm bob amser yr un peth: elfen sbardun, elfen cyngor offer cudd, a JavaScript i gydlynu'r ddau.
Ymdriniodd y llyfrgell â'r gwifrau a oedd yn caniatáu i'r elfen ddangos ar hofran neu ffocws, cuddio ar aneglurder neu adael llygoden, ac ailosod / newid maint ar sgrôl.
Dros amser, gallai'r cyngor ddod yn fregus. Roedd newidiadau bach yn cario risg. Achosodd mân atgyweiriadau atchweliadau. Yn waeth, fe etifeddodd ychwanegu awgrymiadau newydd yr un cymhlethdod. Gweithiodd pethau'n dechnegol, ond ni theimlwyd erioed wedi setlo nac yn gyflawn. Dyna oedd cyflwr pethau pan benderfynais ailadeiladu’r cyngor gan ddefnyddio API Popover brodorol y porwr. Yr Moment y Ceisiais API Popover Wnes i ddim newid i ddefnyddio API Popover oherwydd roeddwn i eisiau arbrofi gyda rhywbeth newydd. Fe wnes i newid oherwydd fy mod wedi blino ar gynnal ymddygiad tip offer yr oeddwn yn credu y dylai'r porwr fod wedi'i ddeall eisoes. Roeddwn yn amheus ar y dechrau. Mae'r rhan fwyaf o APIs gwe newydd yn addo symlrwydd, ond yn dal i fod angen glud, trin achosion ymyl, neu resymeg wrth gefn sy'n ail-greu'n dawel yr un cymhlethdod ag yr oeddech yn ceisio dianc ohono. Felly, rhoddais gynnig ar API Popover yn y ffordd leiaf bosibl. Dyma sut olwg oedd ar hwnnw:
1. Mae'r Bysellfwrdd “Just Works” Roedd cefnogaeth bysellfwrdd yn dibynnu ar haenau lluosog yn leinio'n gywir: roedd yn rhaid i'r ffocws sbarduno'r cyngor, roedd yn rhaid i niwlio ei guddio, roedd yn rhaid i Esc gael ei wifro â llaw, ac roedd amseriad yn bwysig. Pe baech yn methu un cas ymyl, byddai'r cyngor naill ai'n aros ar agor yn rhy hir neu'n diflannu cyn y gellid ei ddarllen. Gyda'r priodoledd popover wedi'i osod i auto neu â llaw, mae'r porwr yn cymryd drosodd y pethau sylfaenol: Mae Tab a Shift+Tab yn ymddwyn yn normal, mae Esc yn cau'r cyngor bob tro, ac nid oes angen unrhyw wrandawyr ychwanegol.
Yr hyn a ddiflannodd o fy nghronfa godau oedd trinwyr bysellfyrddau byd-eang, rhesymeg glanhau penodol Esc, a gwiriadau cyflwr yn ystod llywio bysellfwrdd. Daeth y profiad bysellfwrdd i ben yn rhywbeth yr oedd yn rhaid i mi ei gynnal, a daeth yn warant porwr. 2. Darllenydd Sgrin Rhagweld Hwn oedd ygwelliant mwyaf. Hyd yn oed gyda gwaith ARIA gofalus, roedd yr ymddygiad yn amrywio, fel yr amlinellais yn gynharach. Roedd pob newid bach yn teimlo'n beryglus. Mae defnyddio popover gyda rôl iawn yn edrych ac yn teimlo'n llawer mwy sefydlog a rhagweladwy o ran yr hyn sy'n mynd i ddigwydd:
A dyma fuddugoliaeth arall: Ar ôl y newid, rhoddodd Lighthouse y gorau i dynnu sylw at rybuddion cyflwr ARIA anghywir ar gyfer y rhyngweithio, yn bennaf oherwydd nad oes bellach yn daleithiau ARIA arferol i mi fynd yn anghywir yn ddamweiniol.
3. Rheoli Ffocws Roedd ffocws yn arfer bod yn fregus. O'r blaen, roedd gen i reolau fel: gadewch i'r sbardun ffocws ddangos y cyngor, symudwch y ffocws i'r cyngor a pheidiwch â chau, niwlio'r sbardun pan fydd yn rhy agos, a chau'r cyngor ac adfer y ffocws â llaw. Gweithiodd hyn nes na wnaeth. Gyda'r API Popover, mae'r porwr yn gorfodi model symlach lle gall ffocws symud yn fwy naturiol i'r popover. Mae cau'r popover yn dychwelyd ffocws i'r sbardun, ac nid oes unrhyw drapiau ffocws anweledig nac eiliadau ffocws coll. Ac ni wnes i ychwanegu cod adfer ffocws; Yr wyf yn ei ddileu.
Casgliad Mae API Popover yn golygu nad yw awgrymiadau offer bellach yn rhywbeth rydych chi'n ei efelychu. Maen nhw'n rhywbeth mae'r porwr yn ei ddeall. Mae agor, cau, ymddygiad bysellfwrdd, trin Dianc, a thalp mawr o hygyrchedd bellach yn dod o'r platfform ei hun, nid o JavaScript ad-hoc. Nid yw hynny'n golygu bod llyfrgelloedd cynghorion offer wedi darfod oherwydd eu bod yn dal i wneud synnwyr ar gyfer systemau dylunio cymhleth, addasu trwm, neu gyfyngiadau etifeddiaeth, ond mae'r rhagosodiad wedi newid. Am y tro cyntaf, gall y cyngor cymorth symlaf fod yr un mwyaf cywir hefyd. Os ydych chi'n chwilfrydig, rhowch gynnig ar yr arbrawf hwn: Yn syml, disodli un tip offer yn eich cynnyrch gyda'r API Popover, peidiwch ag ailysgrifennu popeth, peidiwch â mudo system gyfan, a dewiswch un a gweld beth sy'n diflannu o'ch cod. Pan fydd y platfform yn rhoi gwell cyntefig i chi, nid dim ond llai o linellau o JavaScript yw'r fuddugoliaeth, ond mae'n llai o bethau y mae'n rhaid i chi boeni amdanynt o gwbl. Edrychwch ar y cod ffynhonnell llawn yn fy repo GitHub. Darllen Pellach Ar gyfer plymio'n ddyfnach i mewn i bopovers ac APIs cysylltiedig:
“Poppin’ In”, Geoff Graham “Egluro’r Berthynas Rhwng Popovers a Dialogs”, Zell Liew “Beth yw popover = awgrym?”, Una Kravets “Gorchmynion Invoker”, Daniel Schwarz “Creu Hysbysiad Cau Awtomatig gyda Popover HTML”, Preethi Agor UI Popover API Esboniwr “Pop(over) the Balloons”, John Rhea “Swyddfa Angor CSS”, Juan Diego Rodríguez
Mae MDN hefyd yn cynnig dogfennaeth dechnegol gynhwysfawr ar gyfer API Popover.
