Ssenari demək olar ki, həmişə eynidir, bu, kaydırıla bilən konteynerin içərisindəki məlumat cədvəlidir. Hər sətirdə fəaliyyət menyusu, Redaktə, Dublikat və Sil kimi bəzi seçimləri olan kiçik açılan menyu var. Siz onu qurursunuz, o, təcrid olunmuş vəziyyətdə mükəmməl işləyir, sonra kimsə onu sürüşdürə bilən div-in içərisinə qoyur və əşyalar dağılır. Mən bu dəqiq səhvi üç fərqli kod bazasında görmüşəm: konteyner, yığın və çərçivə, hamısı fərqlidir. Səhv, baxmayaraq ki, tamamilə eynidır. Açılan menyu konteynerin kənarında kəsilir. Və ya məntiqi olaraq onun altında olması lazım olan məzmunun arxasında görünür. Və ya istifadəçi sürüşənə qədər yaxşı işləyir və sonra sürüşür. Siz z-index: 9999-a çatırsınız. Bəzən kömək edir, lakin bəzən heç bir şey etmir. Bu uyğunsuzluq daha dərin bir şeyin baş verdiyinə dair ilk ipucudur. Bunun davamlı olaraq geri dönməsinin səbəbi odur ki, üç ayrı brauzer sistemi iştirak edir və əksər tərtibatçılar hər birini öz-özünə başa düşürlər, lakin hər üçü toqquşduqda nə baş verəcəyini heç düşünmürlər: daşqın, yığılmış kontekstlər və bloklar.
Hər üçünün necə qarşılıqlı əlaqədə olduğunu başa düşdükdən sonra uğursuzluq rejimi təsadüfi hiss etməyi dayandırır. Əslində, onlar proqnozlaşdırıla bilən olurlar. Əslində buna səbəb olan üç şey Bu maddələrin hər birinə ətraflı nəzər salaq. Daşma Problemi Elementə daşqın: gizli, daşqın: sürüşdürün və ya daşqın: avtomatik təyin etdikdə, brauzer onun hüdudlarından kənara çıxan hər şeyi, o cümlədən tamamilə yerləşdirilmiş nəsilləri kəsəcək. .scroll-container { daşqın: avtomatik; hündürlük: 300px; /* Bu açılan menyunu kəsəcək, nöqtə nöqtəsi */ }
.açılan aşağı { mövqe: mütləq; /* Fərqi yoxdur -- hələ də .scroll-container tərəfindən kəsilib */ }
İlk dəfə rastlaşanda məni təəccübləndirdi. Mən mövqe tutmuşdum: mütləq elementin konteynerin kəsilməsindən qaçmasına imkan verərdi. Olmaz. Praktikada bu o deməkdir ki, tamamilə yerləşdirilmiş menyu görünməyən daşqın dəyəri olan hər hansı bir əcdad tərəfindən kəsilə bilər, hətta həmin əcdad menyunun bloku olmasa belə. Kəsmə və yerləşdirmə ayrı sistemlərdir. Siz hər ikisini başa düşənə qədər onlar tamamilə təsadüfi görünən şəkildə toqquşurlar.
CreatePortal istifadə edərək reaksiya nümunəsi:
'react-dom'dan { createPortal } idxal edin; 'reaksiyadan' import { useState, useEffect, useRef};
funksiyası açılan ({ anchorRef, isOpen, uşaqlar }) { const [mövqe, setPosition] = useState({ üst: 0, sol: 0 });
useEffect(() => { əgər (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); setMövqe({ yuxarı: düz.alt + pəncərə.scrollY, sol: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
əgər (!isOpen) null qaytarır;
CreatePortal (
Və əlbəttə ki, əlçatanlığı nəzərdən qaçıra bilmərik. Məzmun üzərində görünən sabit elementlər hələ də klaviatura ilə əlçatan olmalıdır. Fokus sırası təbii olaraq sabit açılan menyuya keçmirsə, koddan istifadə edərək onu idarə etməlisiniz. Onun digər interaktiv məzmunun üzərində dayanmadığını yoxlamağa dəyər, onu rədd etmək üçün heç bir yol yoxdur. Bu, klaviatura testində sizi dişləyir. CSS Ankraj Yerləşdirməsi: Məncə, bu, hara gedir CSS Anchor Positioning hazırda ən çox maraqlandığım istiqamətdir. Mən ilk dəfə baxdığım zaman spesifikasiyanın nə qədərinin həqiqətən istifadə oluna biləcəyinə əmin deyildim. Bu, açılan menyu ilə onun tətikçisi arasındakı əlaqəni birbaşa CSS-də elan etməyə imkan verir və brauzer koordinatları idarə edir. .trigger { anchor-name: --my-trigger; }
.açılan menyu { mövqe: mütləq; mövqe-lövbər: --my-trigger; üst: lövbər (aşağı); sol: lövbər (solda); mövqe-cəddi-fallbacks: flip-blok, flip-inline; }
Mövqe-cəddi-fallbacks xüsusiyyəti bunu əllə hesablama üzərində istifadə etməyə dəyər edən şeydir. Brauzer imtina etməzdən əvvəl alternativ yerləşdirmələri sınayır, beləliklə, görünüş pəncərəsinin altındakı açılan menyu kəsilmək əvəzinə avtomatik olaraq yuxarıya doğru çevrilir. Brauzer dəstəyi Chromium əsaslı brauzerlərdə möhkəmdir və Safari-də böyüyür. Firefox-a çoxlu doldurma lazımdır. @oddbird/css-anchor-positioning paketi əsas xüsusiyyəti əhatə edir. Onunla mən gözləmədiyim geri dönüşləri tələb edən layout edge keyslərini vurdum, ona görə də onu mütərəqqi təkmilləşdirmə kimi qəbul edin və ya onuFirefox üçün JavaScript bərpası. Bir sözlə, perspektivli, lakin hələ universal deyil. Hədəf brauzerlərinizdə test edin. Əlçatanlığa gəldikdə isə, CSS-də vizual əlaqənin elan edilməsi əlçatanlıq ağacına heç nə demir. aria-nəzarət, ariya-genişlənmiş, aria-haspopup — bu hissə hələ də sizin üzərinizdədir. Bəzən Düzəliş Sadəcə Elementi Hərəkət edir Portala çatmazdan və ya koordinat hesablamaları etməzdən əvvəl mən həmişə ilk olaraq bir sual verirəm: Bu açılan menyu həqiqətən sürüşdürmə konteynerinin içərisində yaşamalıdırmı? Əgər belə deyilsə, işarələmənin daha yüksək səviyyəli sarğıya köçürülməsi JavaScript və koordinat hesablamaları olmadan problemi tamamilə aradan qaldırır. Bu həmişə mümkün deyil. Düymə və açılan menyu eyni komponentdə əhatə olunubsa, birini digəri olmadan köçürmək bütün API-ni yenidən nəzərdən keçirmək deməkdir. Ancaq bunu edə bildiyiniz zaman, sazlamaq üçün heç bir şey yoxdur. Problem sadəcə mövcud deyil. Müasir CSS-in hələ də həll etmədiyi şeylər CSS burada uzun bir yol keçib, lakin hələ də sizi ruhdan salan yerlər var. Mövqe: sabit və transformasiya məsələləri hələ də mövcuddur. Bu, qəsdən spesifikasiyadadır, yəni heç bir CSS həlli yoxdur. Dizaynınızı dəyişdirilmiş elementə saran animasiya kitabxanasından istifadə edirsinizsə, portallara və ya lövbər yerləşdirməyə ehtiyacınız var. CSS Anchor Positioning perspektivlidir, lakin yenidir. Daha əvvəl qeyd edildiyi kimi, mən bunu yazarkən Firefox hələ də çoxlu doldurmağa ehtiyac duyur. Mən onunla gözləmədiyim geri dönüşləri tələb edən layout kənar vəziyyətlərini vurdum. Bu gün bütün brauzerlərdə ardıcıl davranışa ehtiyacınız varsa, hələ də çətin hissələr üçün JavaScript-ə müraciət edirsiniz. İş prosesimi həqiqətən dəyişdirdiyim əlavə HTML Popover API-dir, indi bütün müasir brauzerlərdə mövcuddur. Popover atributuna malik elementlər JavaScript yerləşdirmə tələb olunmadan brauzerin yuxarı qatında hər şeyin üstündə göstərilir.
İdarəetmədən qaçın, kliklədikcə kənarda buraxın və möhkəm əlçatanlıq semantikası alət ipuçları, açıqlama vidjetləri və sadə örtüklər kimi şeylər üçün pulsuz gəlir. Hazırda əlimdən gələn ilk alətdir. Bu, yerləşdirməni həll etmir. Qatlanmanı həll edir. Popoveri tetikleyicisinə uyğunlaşdırmaq üçün hələ də lövbər yerləşdirməsi və ya JavaScript lazımdır. Popover API təbəqələri idarə edir. Çapa yerləşdirilməsi yerləşdirməni idarə edir. Birlikdə istifadə edildikdə, onlar əvvəllər kitabxanada etmək üçün əl atdığınız işlərin çoxunu əhatə edir. Vəziyyətiniz üçün Qərar Bələdçisi Bütün bunları çətin yoldan keçdikdən sonra, indi seçim haqqında necə düşünürəm.
Portaldan istifadə edin. Tətik iç-içə sürüşdürmə konteynerlərində dərin olduqda istifadə edərdim. Bu nümunəni cədvəl fəaliyyət menyuları üçün istifadə etdim və onu fokusun bərpası və əlçatanlıq yoxlamaları ilə birləşdirdim. Bu, ən etibarlı seçimdir, lakin əlavə naqillər üçün büdcə vaxtıdır. Sabit yerləşdirmədən istifadə edin. Bu, vanil JavaScript-də və ya yüngül çərçivədə olduğunuz zaman üçündür və heç bir əcdadın transformasiya və ya filtr tətbiq etmədiyini yoxlaya bilmir. Quraşdırmaq və sazlamaq sadədir, bir məhdudiyyət qüvvədə olduğu müddətcə. Brauzer dəstəyiniz icazə verdikdə bunun üçün CSS Anchor Positioning.Reach istifadə edin. Firefox dəstəyi tələb olunursa, onu @oddbird polyfill ilə cütləşdirin. Platformanın sonda getdiyi yer budur və nəticədə sizin əsas yanaşmanız olacaqdır. DOM-u yenidən qurun. Arxitektura icazə verdikdə bundan istifadə edin və siz sıfır iş vaxtı mürəkkəbliyi istəyirsiniz. İnanıram ki, bu, ən çox qiymətləndirilən seçimdir. Nümunələri birləşdirin. Dəstəklənməyən brauzerlər üçün JavaScript ehtiyatı ilə birləşdirilmiş əsas yanaşmanız kimi lövbər yerləşdirməsini istədiyiniz zaman bunu edin. Və ya koordinat dəqiqliyi üçün getBoundingClientRect() ilə qoşalaşmış DOM yerləşdirmə portalı.
Nəticə Mən bu səhvi birdəfəlik problem kimi qəbul edirdim – yamaq və davam etmək üçün bir şey. Ancaq mən onunla kifayət qədər uzun oturdum ki, hər üç sistemi başa düşə bildim - daşqın kəsilməsi, kontekstlərin yığılması və bloklar - o, təsadüfi hiss etməyi dayandırdı. Mən sınıq açılan menyuya baxa və hansı əcdadın məsuliyyət daşıdığını dərhal izləyə bildim. DOM-u oxumağımdakı bu dəyişiklik əsl paket idi. Tək düzgün cavab yoxdur. Əldə etdiyim şey kod bazasında nəyi idarə edə biləcəyimdən asılı idi: əcdad ağacı gözlənilməz olduğu zaman portallar; təmiz və sadə olduqda sabit yerləşdirmə; heç nə mənə mane olmadıqda elementi hərəkət etdirmək; və indi lövbər yerləşdirmə,bacardığım yerdə. Nə seçsəniz də, əlçatanlığı son addım kimi qəbul etməyin. Təcrübəmə görə, bu, atlanan zamandır. ARIA əlaqələri, fokusun idarə edilməsi, klaviatura davranışı - bunlar parlaq deyil. Onlar şeyin həqiqətən işləməsini təmin edən şeylərin bir hissəsidir. GitHub repomda tam mənbə kodunu yoxlayın. Əlavə Oxu Bununla işləyərkən geri döndüyüm istinadlar bunlardır:
Yığma Konteksti (MDN) "CSS Anchor Positioning Guide", Juan Diego Rodriguez “Popover API ilə işə başlamaq”, Godstime Aburu Üzən UI (floating-ui.com) CSS Overflow (MDN)
