Eszenatokia ia beti berdina da, hau da, korritu daitekeen edukiontzi baten barruan dagoen datu-taula bat da. Errenkada bakoitzak ekintza-menu bat du, goitibeherako menu txiki bat aukera batzuekin, hala nola Editatu, Bikoiztu eta Ezabatu. Eraikitzen duzu, badirudi ezin hobeto funtzionatzen duela isolatuta, eta gero norbaitek div korrigarri horren barruan sartzen du eta gauzak puskatu egiten dira. Akats zehatz hau hiru kode-oinarri ezberdinetan ikusi dut: edukiontzia, pila eta markoa, guztiak desberdinak. Akatsa, ordea, guztiz berdina da.
Goitibehitza edukiontziaren ertzean mozten da. Edo logikoki azpian egon beharko lukeen edukiaren atzean agertzen da. Edo ondo funtzionatzen du erabiltzaileak korritu arte, eta gero noraezean doa.
Z-indizera iristen zara: 9999. Batzuetan laguntzen du, baina beste batzuetan ez du ezer egiten. Inkoherentzia hori da zerbait sakonagoa gertatzen ari den lehen arrastoa.
Itzultzen jarraitzen duen arrazoia da hiru arakatzaile-sistema bereizi parte hartzen dutela eta garatzaile gehienek bakoitza bere kabuz ulertzen dutela, baina ez dute inoiz pentsatu hirurak talka egiten dutenean zer gertatzen den: gainezka egitea, testuinguruak pilatzea eta blokeak edukitzea.
Hirurak nola elkarreragiten duten ulertzen duzunean, hutsegite moduek ausazko sentitzeari uzten diote. Izan ere, aurreikusgarri bihurtzen dira.
Hau benetan eragiten duten hiru gauzak
Ikus ditzagun elementu horietako bakoitza zehatz-mehatz.
Gainezka Arazoa
Gainetik: ezkutuan, gainezka: korritu edo gainezkatu: elementu batean automatikoki ezartzen duzunean, arakatzaileak bere mugetatik haratago doan edozer moztuko du, erabat kokatutako ondorengoak barne.
.scroll-container {
gainezka: auto;
altuera: 300px;
/* Honek goitibeherako zerrenda moztuko du, puntu osoa */
}
goitibeherako {
postua: absolutua;
/* Ez du axola -- oraindik .scroll-container-ek moztuta */
}
Horrek harritu ninduen harekin topo egin nuen lehen aldian. Posizioa suposatu nuen: absolutuak elementu bati edukiontzi baten mozketatik ihes egingo luke. Ez du.
Praktikan, horrek esan nahi du erabat kokatutako menua gainezkatze-balioa ikusten ez den edozein arbaso batek moztu dezakeela, nahiz eta arbaso hori ez izan menuaren blokea. Mozketa eta kokatzea sistema bereiziak dira. Guztiz ausazko itxura duten moduetan talka egiten dute, biak ulertu arte.
Hona hemen React adibide bat createPortal erabiliz:
erabiliEfektua(() => {
if (Ireki da && anchorRef.current) {
const rect = anchorRef.current.getBoundingClientRect ();
ezarriPosizioa({
goiko: rect.bottom + window.scrollY,
ezkerrera: rect.left + window.scrollX,
});
}
}, [isOpen, anchorRef]);
if (!isOpen) itzuli null;
itzuli sortu Ataria(
{haurrak}
,
dokumentua.gorputza
);
}
Eta, noski, ezin dugu irisgarritasuna alde batera utzi. Edukien gainean agertzen diren elementu finkoek oraindik teklatu bidez eskura daitezke. Foku-ordena ez bada berez mugitzen goitibeherako finkora, kodea erabiliz kudeatu beharko duzu. Gainera, merezi du egiaztatzea ez dela beste eduki interaktiboen gainean esertzen, baztertzeko modurik gabe. Horrek hozka egiten zaitu teklatuaren probetan.
CSS aingura-kokatzea: hau norantz doala uste dut
CSS Anchor Positioning da orain gehien interesatzen zaidan norabidea. Ez nengoen ziur zenbat zehaztapena benetan erabilgarri zen lehen aldiz begiratu nuenean. Goitibeherako eta abiarazlearen arteko erlazioa zuzenean CSS-n deklaratzeko aukera ematen dizu, eta arakatzaileak koordenatuak kudeatzen ditu.
.trigger {
aingura-izena: --nire-trigger;
}
Posizio-saiatu-fallbacks propietatea da hau eskuzko kalkulu baten gainean erabiltzea merezi duena. Arakatzaileak kokapen alternatiboak saiatzen ditu amore eman baino lehen, beraz, bistaren behealdean dagoen goitibeherako goitibehitza automatikoki gora iraultzen da moztu beharrean.
Arakatzailearen laguntza sendoa da Chromium-en oinarritutako arakatzaileetan eta hazten ari da Safari-n. Firefoxek polyfill bat behar du. @oddbird/css-anchor-positioning paketeak oinarrizko zehaztapenak estaltzen ditu. Aurreikusi ez nituen aldaerak behar zituzten diseinu ertzeko kasuak jo ditut, beraz, trata ezazu hobekuntza progresibo gisa edo parekatu batekinJavaScript-en ordezko Firefoxerako.
Laburbilduz, itxaropentsua baina oraindik ez unibertsala. Probatu zure xede arakatzaileetan.
Eta irisgarritasunari dagokionez, CSS-n ikusizko erlazio bat deklaratzeak ez dio ezer esaten irisgarritasun-zuhaitzari. aria-controls, aria-expanded, aria-haspopup — zati hori zure esku dago oraindik.
Batzuetan konponketa elementua mugitzea besterik ez da
Atari batera heldu edo koordenatuen kalkuluak egin aurretik, beti galdera bat egiten dut lehenik: goitibeherako zerrenda honek korritu-edukiontziaren barruan bizi behar al du?
Hala egiten ez bada, marka goi-mailako bilgarri batera eramateak arazoa erabat ezabatzen du, JavaScript gabe eta koordenatu-kalkulurik gabe.
Hau ez da beti posible. Botoia eta goitibehitza osagai berean kapsulatzen badira, bata bestea gabe mugitzeak API osoa birplanteatzea esan nahi du. Baina egin dezakezunean, ez dago ezer arazketarik. Arazoa ez da existitzen.
CSS modernoak oraindik konpontzen ez duena
CSS-k bide luzea egin du hona, baina oraindik ere uzten zaituen lekuak daude.
Posizioa: konpondu eta eraldatzeko arazoak hor daude oraindik. Zehaztapenetan nahita dago, eta horrek esan nahi du ez dagoela CSS konponbiderik. Zure diseinua eraldatutako elementu batean biltzen duen animazio liburutegi bat erabiltzen ari bazara, atariak edo aingura-kokapenera behartzera itzuli zara.
CSS Anchor Positioning itxaropentsua da, baina berria. Lehen esan bezala, Firefox-ek oraindik polyfill bat behar du hau idazten ari naizen unean. Aurreikusten ez nituen errekurtsoak behar zituzten diseinuaren ertzeko kasuak jo ditut. Gaur egun arakatzaile guztietan portaera koherentea behar baduzu, oraindik JavaScript eskuratzen ari zara zati delikatuenetarako.
Nire lan-fluxua aldatu dudan gehigarria HTML Popover APIa da, orain nabigatzaile moderno guztietan eskuragarri. Popover atributua duten elementuak nabigatzailearen goiko geruzan errendatzen dira, batez ere, JavaScript kokatzea beharrik gabe.
Popover edukia
Ihes-kudeaketa, kanpoan klik egitean baztertzea eta erabilerraztasun-semantika sendoa doakoak dira tresna-informazioetarako, dibulgaziorako widget-ak eta gainjartze sinpleetarako. Oraingoz iristen naizen lehen tresna da.
Hori bai, ez du posizionamendua konpontzen. Geruzak konpontzen ditu. Oraindik aingura-kokatzea edo JavaScript behar duzu popover bat bere abiarazlearekin lerrokatzeko. Popover APIak geruzak kudeatzen ditu. Aingura-kokatzeak kokatzea kudeatzen du. Elkarrekin erabilita, liburutegi batek egin nahi zenuenaren zatirik handiena estaltzen dute.
Zure Egoerarako Erabaki Gida
Hau guztia bide gogorrean igaro ondoren, hona hemen nola pentsatzen dudan aukeraketa orain.
Erabili atari bat. Hau erabiliko nuke abiarazlea habiaraturiko korritze-edukiontzietan sakonean bizi denean. Eredu hau mahai-ekintzen menuetarako erabili nuen eta fokua berreskuratzeko eta irisgarritasun-kontrolekin parekatu nuen. Aukera fidagarriena da, baina aparteko kableatuaren denbora aurrekontua.
Erabili kokapen finkoa. Hau JavaScript banilla edo esparru arin batean zaudenean eta arbasoek ezein eraldaketarik edo iragazkirik aplikatzen ez duten egiaztatu ahal izango duzu. Erraza da konfiguratzea eta arazteko erraza da, muga hori betetzen duen bitartean.
Erabili CSS aingura-kokatzea. Iritsi honetarako arakatzailearen laguntzak ahalbidetzen duenean. Firefox laguntza behar bada, parekatu @oddbird polyfill-ekin. Hau da plataforma azken finean norantz doa eta azkenean zure hurbilketa bihurtuko da.
Berregituratu DOM. Erabili hau arkitekturak ahalbidetzen duenean, eta zero exekuzio-denbora konplexutasuna nahi duzu. Uste dut litekeena dela aukerarik gutxietsiena.
Konbinatu ereduak. Egin hau zure ikuspegi nagusi gisa aingura-kokatzea nahi duzunean, onartzen ez diren arakatzaileentzako JavaScript-erabaki batekin konbinatuta. Edo DOM kokatzeko atari bat getBoundingClientRect()-rekin parekatuta koordenatuen zehaztasunerako.
Ondorioa
Akats hau behin-behineko arazo gisa tratatzen nuen - adabakitzeko eta aurrera egiteko zerbait. Baina harekin eserita egon nintzenean inplikatutako hiru sistemak ulertzeko — gainezka egindako mozketa, testuinguruak pilatzea eta blokeak edukitzea — ausazko sentitzeari utzi zion. Hautsitako goitibehera begiratu eta berehala zein arbaso zen erantzulea ikusi ahal izan nuen. DOM irakurtzen nuen aldaketa hori izan zen benetako eramatea.
Ez dago erantzun zuzen bakarra. Heldu nintzena kode-oinarrian kontrolatu nezakeenaren araberakoa zen: arbasoen zuhaitza ezustekoa zen atariak; kokapen finkoa garbia eta sinplea zenean; elementua mugitzea ezerk geldiarazten ninduenean; eta aingura kokatzea orain,ahal dudan tokian.
Aukeratzen duzuna edozein dela ere, ez hartu irisgarritasuna azken urrats gisa. Nire esperientziaren arabera, orduantxe saltatzen da. ARIA harremanak, fokuaren kudeaketa, teklatuaren portaera - horiek ez dira polonikoak. Gauzak benetan funtzionatzen duenaren parte dira.
Begiratu iturburu-kode osoa nire GitHub-en.
Irakurketa gehiago
Hauek dira lanean ari naizen bitartean bueltatzen nituen erreferentziak:
Pilatzearen testuingurua (MDN)
“CSS Anchor Positioning Guide”, Juan Diego Rodriguez
“Getting With The Popover API”, Godstime Aburu
UI flotagarria (floating-ui.com)
CSS gainezka (MDN)
