Mazingira karibu kila mara ni sawa, ambayo ni jedwali la data ndani ya kontena inayoweza kusongeshwa. Kila safu mlalo ina menyu ya vitendo, menyu kunjuzi ndogo iliyo na baadhi ya chaguo, kama vile Hariri, Rudufu na Futa. Unaijenga, inaonekana kufanya kazi kikamilifu katika kutengwa, na kisha mtu huiweka ndani ya div hiyo inayoweza kusongeshwa na mambo husambaratika. Nimeona mdudu huyu katika misingi tatu tofauti: kontena, safu, na mfumo, zote tofauti. mdudu, ingawa, ni sawa kabisa. Kunjuzi hukatwa kwenye ukingo wa chombo. Au inaonekana nyuma ya maudhui ambayo kimantiki yanapaswa kuwa chini yake. Au inafanya kazi vizuri hadi mtumiaji anasonga, na kisha inateleza. Unafikia z-index: 9999. Wakati mwingine inasaidia, lakini nyakati zingine haifanyi chochote. Ukosefu huo ni kidokezo cha kwanza kwamba kitu cha kina kinatokea. Sababu inayofanya iendelee kurudi ni kwamba mifumo mitatu tofauti ya kivinjari inahusika, na watengenezaji wengi wanaelewa kila moja kivyake lakini hawafikirii kinachotokea wakati zote tatu zinapogongana: kufurika, miktadha ya kutundika, na iliyo na vizuizi.
Mara tu unapoelewa jinsi zote tatu zinavyoingiliana, njia za kutofaulu huacha kuhisi bila mpangilio. Kwa kweli, huwa zinatabirika. Mambo Matatu Halisi Yanayosababisha Hili Hebu tuangalie kila moja ya vitu hivyo kwa undani. Tatizo la Kufurika Unapoweka kufurika: kufichwa, kufurika: kusogeza, au kufurika: kiotomatiki kwenye kipengele, kivinjari kitanakili chochote kinachovuka mipaka yake, ikijumuisha vizazi vilivyowekwa kabisa. .chombo cha kusogeza { kufurika: auto; urefu: 300px; /* Hii itapunguza kushuka, kuacha kamili */ }
.kunjuzi { nafasi: kabisa; /* Haijalishi -- bado imekatwa na .scroll-container */ }
Hilo lilinishangaza kwa mara ya kwanza nilipokutana nalo. Ningechukua msimamo: kabisa ingeruhusu kitu kiepuke kukatwa kwa kontena. Haifai. Kwa mazoezi, hiyo inamaanisha kuwa menyu iliyowekwa kabisa inaweza kukatwa na babu yoyote ambayo ina thamani isiyoonekana ya kufurika, hata kama babu huyo si menyu iliyo na kizuizi. Kukata na kuweka ni mifumo tofauti. Zinatokea tu kugongana kwa njia ambazo zinaonekana nasibu hadi uelewe zote mbili.
Hapa kuna mfano wa React kwa kutumia createPortal:
agiza { createPortal } kutoka 'react-dom'; agiza {useState, useEffect, useRef } kutoka 'react';
kazi Kunjuzi ({ anchorRef, isOpen, watoto }) { const [position, setPosition] = useState({juu: 0, kushoto: 0});
useEffect(() => { ikiwa (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); kuwekaPosition({ juu: rect.bottom + window.scrollY, kushoto: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ikiwa (!isOpen) inarudi null;
rudisha undaPortal(
Na, bila shaka, hatuwezi kupuuza upatikanaji. Vipengele visivyobadilika vinavyoonekana juu ya maudhui lazima bado viweze kufikiwa na kibodi. Ikiwa mpangilio wa kuangazia hausogei kwenye menyu kunjuzi isiyobadilika, utahitaji kulidhibiti kwa kutumia msimbo. Inafaa pia kuangalia kuwa haikai juu ya maudhui mengine ya mwingiliano bila njia ya kuiondoa. Huyo anakuuma katika majaribio ya kibodi. Nafasi ya Anchor ya CSS: Ambapo Nadhani Hii Inaelekea CSS Anchor Positioning ndio mwelekeo ninaovutiwa nao zaidi sasa hivi. Sikuwa na uhakika ni kiasi gani cha kielelezo kilichoweza kutumika nilipoiangalia mara ya kwanza. Inakuruhusu kutangaza uhusiano kati ya menyu kunjuzi na kichochezi chake moja kwa moja kwenye CSS, na kivinjari hushughulikia kuratibu. .anzisha { nanga-jina: --my-trigger; }
. menyu kunjuzi { nafasi: kabisa; nafasi-nanga: --my-trigger; juu: nanga (chini); kushoto: nanga (kushoto); nafasi-jaribu-fallbacks: flip-block, flip-inline; }
Sifa ya-jaribu-fallbacks ndiyo inayofanya hii kustahili kutumia kwa kukokotoa mwenyewe. Kivinjari hujaribu uwekaji mbadala kabla ya kukata tamaa, kwa hivyo menyu kunjuzi iliyo chini ya kituo cha kutazama hupinduka kiotomatiki juu badala ya kukatwa. Usaidizi wa kivinjari ni thabiti katika vivinjari vinavyotegemea Chromium na unakua katika Safari. Firefox inahitaji polyfill. Kifurushi cha @oddbird/css-anchor-positioning kinashughulikia sifa kuu. Nimeigusa kesi za upangaji ambazo zilihitaji makosa ambayo sikutarajia, kwa hivyo ichukue kama kiboreshaji kinachoendelea au ioanishe naNjia mbadala ya JavaScript kwa Firefox. Kwa kifupi, inaahidi lakini sio ya ulimwengu wote bado. Jaribu katika vivinjari unavyolenga. Na kuhusu ufikivu unaohusika, kutangaza uhusiano wa kuona katika CSS hauambii mti wa ufikivu chochote. aria-controls, aria-expanded, aria-haspopup - sehemu hiyo bado iko juu yako. Wakati mwingine Marekebisho Ni Kusonga Kipengele Tu Kabla ya kufikia lango au kufanya hesabu za kuratibu, mimi huuliza swali moja kwanza: Je, kushuka huku kunahitaji kuishi ndani ya kontena la kusogeza? Ikiwa haifanyi hivyo, kuhamisha alama hadi kwa kanga ya kiwango cha juu huondoa shida kabisa, bila JavaScript na hakuna hesabu za kuratibu. Hili haliwezekani kila wakati. Ikiwa kitufe na menyu kunjuzi zimewekwa katika sehemu moja, kusonga moja bila nyingine inamaanisha kufikiria upya API nzima. Lakini unapoweza kuifanya, hakuna kitu cha kurekebisha. Tatizo halipo tu. Nini CSS ya Kisasa Bado Haijatatua CSS imetoka mbali sana hapa, lakini bado kuna sehemu inakuacha. Msimamo: masuala yaliyorekebishwa na kubadilisha bado yapo. Iko kwenye kielelezo kwa makusudi, ambayo inamaanisha hakuna suluhisho la CSS lililopo. Ikiwa unatumia maktaba ya uhuishaji ambayo hufunika mpangilio wako katika kipengele kilichobadilishwa, umerejea kwenye kuhitaji lango au uwekaji nanga. CSS Anchor Positioning inatia matumaini, lakini mpya. Kama ilivyotajwa hapo awali, Firefox bado inahitaji kujaza wakati ninaandika hii. Nimegonga kesi za upangaji nayo ambazo zilihitaji makosa ambayo sikutarajia. Ikiwa unahitaji tabia thabiti kwenye vivinjari vyote leo, bado unatafuta JavaScript ili kupata sehemu gumu. Nyongeza ambayo nimebadilisha mtiririko wa kazi yangu ni API ya HTML Popover, ambayo sasa inapatikana katika vivinjari vyote vya kisasa. Vipengele vilivyo na sifa ya popover hutoa katika safu ya juu ya kivinjari, juu ya kila kitu, bila nafasi ya JavaScript inahitajika.
Ushughulikiaji wa Escape, ondoa-bofya-nje, na semantiki thabiti za ufikivu huja bila malipo kwa vitu kama vile vidokezo, wijeti za ufichuzi, na uwekaji rahisi. Ni zana ya kwanza ninayofikia kwa sasa. Hiyo ilisema, haisuluhishi nafasi. Inasuluhisha safu. Bado unahitaji nafasi ya nanga au JavaScript ili kupanga popover kwa kichochezi chake. API ya Popover inashughulikia uwekaji tabaka. Msimamo wa nanga hushughulikia uwekaji. Yakitumiwa pamoja, yanashughulikia mengi ya yale ambayo ungefikia hapo awali ili maktaba ifanye. Mwongozo wa Maamuzi kwa Hali yako Baada ya kupitia haya yote kwa njia ngumu, hivi ndivyo ninavyofikiria juu ya chaguo sasa.
Tumia lango. Ningetumia hii wakati kichochezi kinaishi ndani kabisa ya vyombo vya kusogeza vilivyowekwa. Nilitumia muundo huu kwa menyu za vitendo vya jedwali na kuoanisha na urejeshaji wa umakini na ukaguzi wa ufikivu. Ni chaguo la kuaminika zaidi, lakini wakati wa bajeti kwa wiring ya ziada. Tumia nafasi isiyobadilika. Hii ni ya ukiwa katika JavaScript ya vanilla au mfumo mwepesi na inaweza kuthibitisha hakuna toleo la awali linalotumika kubadilisha au vichujio. Ni rahisi kusanidi na rahisi kutatua, mradi tu kizuizi kimoja kinashikilia. Tumia CSS Anchor Positioning.Reach kwa hili wakati usaidizi wa kivinjari chako unaruhusu. Ikiwa usaidizi wa Firefox unahitajika, unganisha na @oddbird polyfill. Hapa ndipo jukwaa linapoelekea na hatimaye litakuwa mbinu yako ya kwenda. Rekebisha DOM.Tumia hii wakati usanifu unairuhusu, na unataka ugumu sifuri wa wakati wa utekelezaji. Ninaamini kuwa kuna uwezekano kuwa chaguo la chini zaidi. Unganisha ruwaza.Fanya hivi unapotaka kuweka nanga kama mbinu yako kuu, iliyooanishwa na njia mbadala ya JavaScript kwa vivinjari visivyotumika. Au lango la uwekaji wa DOM lililooanishwa na getBundingClientRect() kwa usahihi wa kuratibu.
Hitimisho Nilikuwa nikichukulia mdudu huyu kama suala la mara moja - kitu cha kurekebisha na kuendelea. Lakini mara nilipokaa nayo kwa muda wa kutosha kuelewa mifumo yote mitatu inayohusika - upunguzaji wa ziada, miktadha ya kuweka, na iliyo na vizuizi - iliacha kuhisi bila mpangilio. Niliweza kutazama kushuka kwa kasi na mara moja kufuatilia ni babu gani aliyehusika. Mabadiliko hayo ya jinsi nilivyosoma DOM ndio ilikuwa njia ya kuchukua. Hakuna jibu moja sahihi. Nilichofikia kilitegemea kile ningeweza kudhibiti katika msingi wa msimbo: milango wakati mti wa babu ulikuwa hautabiriki; nafasi ya kudumu wakati ilikuwa safi na rahisi; kusonga kipengele wakati hakuna kitu kilikuwa kinanizuia; na kuweka nanga sasa,ambapo naweza. Chochote unachomaliza kuchagua, usichukulie ufikiaji kama hatua ya mwisho. Kwa uzoefu wangu, hapo ndipo inaporukwa. Mahusiano ya ARIA, usimamizi wa umakini, tabia ya kibodi - hizo si za kung'aa. Wao ni sehemu ya kile kinachofanya jambo hilo lifanye kazi. Angalia msimbo kamili wa chanzo kwenye repo langu la GitHub. Kusoma Zaidi Haya ndio marejeleo ambayo niliendelea kurudi wakati nikifanya kazi kupitia hii:
Muktadha wa Kurundika (MDN) "Mwongozo wa Nafasi ya Anchor ya CSS", Juan Diego Rodriguez "Kuanza na API ya Popover", Godstime Aburu UI inayoelea (floating-ui.com) CSS Overflow (MDN)
