परिदृश्य लगभग हमेशा एक जैसा होता है, जो स्क्रॉल करने योग्य कंटेनर के अंदर एक डेटा तालिका है। प्रत्येक पंक्ति में एक क्रिया मेनू होता है, कुछ विकल्पों के साथ एक छोटा सा ड्रॉपडाउन, जैसे संपादित करें, डुप्लिकेट और हटाएं। आप इसे बनाते हैं, ऐसा लगता है कि यह अलगाव में पूरी तरह से काम करता है, और फिर कोई इसे उस स्क्रॉल करने योग्य डिव के अंदर डालता है और चीजें अलग हो जाती हैं। मैंने इस सटीक बग को तीन अलग-अलग कोडबेस में देखा है: कंटेनर, स्टैक और फ्रेमवर्क, सभी अलग-अलग। हालाँकि, बग पूरी तरह से समान है। ड्रॉपडाउन कंटेनर के किनारे पर क्लिप हो जाता है। या यह उस सामग्री के पीछे दिखाई देता है जो तार्किक रूप से इसके नीचे होनी चाहिए। या यह तब तक ठीक काम करता है जब तक उपयोगकर्ता स्क्रॉल नहीं करता, और फिर यह चला जाता है। आप z-index: 9999 तक पहुँचते हैं। कभी-कभी यह मदद करता है, लेकिन कभी-कभी यह बिल्कुल कुछ नहीं करता है। वह असंगति पहला संकेत है कि कुछ गहरा घटित हो रहा है। इसके बार-बार वापस आने का कारण यह है कि इसमें तीन अलग-अलग ब्राउज़र सिस्टम शामिल हैं, और अधिकांश डेवलपर्स प्रत्येक को अपने आप समझते हैं, लेकिन कभी नहीं सोचते कि जब तीनों टकराते हैं तो क्या होता है: ओवरफ़्लो, स्टैकिंग संदर्भ और युक्त ब्लॉक।
एक बार जब आप समझ जाते हैं कि ये तीनों कैसे परस्पर क्रिया करते हैं, तो विफलता मोड यादृच्छिक महसूस करना बंद कर देते हैं। वास्तव में, वे पूर्वानुमानित हो जाते हैं। तीन चीजें वास्तव में इसका कारण बनती हैं आइए उनमें से प्रत्येक आइटम को विस्तार से देखें। अतिप्रवाह समस्या जब आप किसी तत्व पर ओवरफ़्लो: छिपा हुआ, ओवरफ़्लो: स्क्रॉल, या ओवरफ़्लो: ऑटो सेट करते हैं, तो ब्राउज़र अपनी सीमा से परे फैली किसी भी चीज़ को क्लिप कर देगा, जिसमें बिल्कुल स्थित वंशज भी शामिल हैं। .स्क्रॉल-कंटेनर { अतिप्रवाह: ऑटो; ऊंचाई: 300px; /* यह ड्रॉपडाउन को क्लिप कर देगा, पूर्ण विराम */ }
.ड्रॉपडाउन { स्थिति: निरपेक्ष; /* कोई फर्क नहीं पड़ता - अभी भी .स्क्रॉल-कंटेनर द्वारा क्लिप किया गया है */ }
जब मैं पहली बार इसमें गया तो मुझे आश्चर्य हुआ। मैंने मान लिया था कि स्थिति: पूर्ण तत्व किसी तत्व को कंटेनर की क्लिपिंग से बाहर निकलने देगा। ऐसा नहीं है व्यवहार में, इसका मतलब है कि एक बिल्कुल स्थित मेनू को किसी भी पूर्वज द्वारा काटा जा सकता है, जिसमें एक गैर-दृश्य अतिप्रवाह मान होता है, भले ही वह पूर्वज मेनू का ब्लॉक न हो। क्लिपिंग और पोजिशनिंग अलग-अलग प्रणालियाँ हैं। वे बस ऐसे तरीकों से टकराते हैं जो पूरी तरह से यादृच्छिक लगते हैं जब तक कि आप दोनों को समझ नहीं लेते।
यहाँ createPortal का उपयोग करके एक प्रतिक्रिया उदाहरण दिया गया है:
'रिएक्ट-डोम' से आयात {createPortal }; 'प्रतिक्रिया' से आयात { यूज़स्टेट, यूज़इफ़ेक्ट, यूज़रेफ };
फ़ंक्शन ड्रॉपडाउन({ एंकररेफ़, इज़ओपन, बच्चे }) { स्थिरांक [स्थिति, सेटपोज़िशन] = उपयोगस्टेट({ शीर्ष: 0, बाएँ: 0 });
उपयोगप्रभाव(() => { यदि (isOpen && एंकरRef.current) { const rect = एंकरRef.current.getBoundingClientRect(); सेटपोजीशन({ शीर्ष: rect.bottom + window.scrollY, बाएँ: rect.left + window.scrollX, }); } }, [isOpen, एंकरRef]);
यदि (!isOpen) शून्य वापसी;
वापसी createPortal(
और, निःसंदेह, हम पहुंच को नजरअंदाज नहीं कर सकते। सामग्री पर दिखाई देने वाले निश्चित तत्व अभी भी कीबोर्ड-पहुंच योग्य होने चाहिए। यदि फ़ोकस क्रम स्वाभाविक रूप से निश्चित ड्रॉपडाउन में नहीं जाता है, तो आपको कोड का उपयोग करके इसे प्रबंधित करना होगा। यह भी जांचने लायक है कि यह अन्य इंटरैक्टिव सामग्री पर नहीं बैठता है और इसे खारिज करने का कोई तरीका नहीं है। वह आपको कीबोर्ड परीक्षण में काटता है। सीएसएस एंकर पोजिशनिंग: जहां मैं सोचता हूं कि यह जा रहा है सीएसएस एंकर पोजिशनिंग वह दिशा है जिसमें मेरी अभी सबसे अधिक रुचि है। जब मैंने पहली बार इसे देखा तो मुझे यकीन नहीं था कि इसका कितना हिस्सा वास्तव में उपयोग करने योग्य था। यह आपको सीधे सीएसएस में ड्रॉपडाउन और उसके ट्रिगर के बीच संबंध घोषित करने देता है, और ब्राउज़र निर्देशांक को संभालता है। .ट्रिगर { एंकर-नाम: --माय-ट्रिगर; }
.ड्रॉपडाउन-मेनू { स्थिति: निरपेक्ष; स्थिति-एंकर: --माय-ट्रिगर; शीर्ष: एंकर(नीचे); बाएँ: एंकर(बाएँ); स्थिति-प्रयास-फ़ॉलबैक: फ्लिप-ब्लॉक, फ्लिप-इनलाइन; }
स्थिति-प्रयास-फ़ॉलबैक संपत्ति वह है जो इसे मैन्युअल गणना पर उपयोग करने लायक बनाती है। ब्राउज़र हार मानने से पहले वैकल्पिक प्लेसमेंट का प्रयास करता है, इसलिए व्यूपोर्ट के निचले भाग में एक ड्रॉपडाउन कट जाने के बजाय स्वचालित रूप से ऊपर की ओर फ़्लिप हो जाता है। क्रोमियम-आधारित ब्राउज़र में ब्राउज़र समर्थन ठोस है और सफ़ारी में बढ़ रहा है। फ़ायरफ़ॉक्स को पॉलीफ़िल की आवश्यकता है। @oddbird/css-anchor-positioning पैकेज मुख्य विशिष्टता को कवर करता है। मैंने इसके साथ लेआउट एज केस को हिट किया है जिसके लिए फ़ॉलबैक की आवश्यकता थी जिसकी मुझे आशा नहीं थी, इसलिए इसे एक प्रगतिशील वृद्धि के रूप में मानें या इसे एक के साथ जोड़ देंफ़ायरफ़ॉक्स के लिए जावास्क्रिप्ट फ़ॉलबैक। संक्षेप में, आशाजनक लेकिन अभी तक सार्वभौमिक नहीं। अपने लक्षित ब्राउज़र में परीक्षण करें. और जहां तक एक्सेसिबिलिटी का सवाल है, सीएसएस में विज़ुअल रिलेशनशिप घोषित करने से एक्सेसिबिलिटी ट्री को कुछ भी नहीं पता चलता है। एरिया-नियंत्रण, एरिया-विस्तारित, एरिया-हैसपॉपअप - वह हिस्सा अभी भी आप पर है। कभी-कभी समस्या का समाधान केवल तत्व को स्थानांतरित करना होता है किसी पोर्टल तक पहुंचने या समन्वय गणना करने से पहले, मैं हमेशा एक प्रश्न पूछता हूं: क्या इस ड्रॉपडाउन को वास्तव में स्क्रॉल कंटेनर के अंदर रहने की आवश्यकता है? यदि ऐसा नहीं होता है, तो मार्कअप को उच्च-स्तरीय रैपर पर ले जाने से समस्या पूरी तरह समाप्त हो जाती है, बिना किसी जावास्क्रिप्ट और बिना किसी समन्वय गणना के। यह हमेशा संभव नहीं है. यदि बटन और ड्रॉपडाउन एक ही घटक में समाहित हैं, तो एक को दूसरे के बिना ले जाने का मतलब पूरे एपीआई पर पुनर्विचार करना है। लेकिन जब आप यह कर सकते हैं, तो डिबग करने के लिए कुछ भी नहीं है। समस्या अस्तित्व में ही नहीं है. आधुनिक सीएसएस अभी भी क्या हल नहीं करता है सीएसएस यहां एक लंबा सफर तय कर चुका है, लेकिन अभी भी ऐसी जगहें हैं जहां यह आपको निराश करता है। स्थिति: स्थिर और परिवर्तन संबंधी मुद्दे अभी भी मौजूद हैं। यह जानबूझकर विशिष्टता में है, जिसका अर्थ है कि कोई सीएसएस समाधान मौजूद नहीं है। यदि आप एक एनीमेशन लाइब्रेरी का उपयोग कर रहे हैं जो आपके लेआउट को एक परिवर्तित तत्व में लपेटता है, तो आपको पोर्टल्स या एंकर पोजिशनिंग की आवश्यकता होती है। सीएसएस एंकर पोजिशनिंग आशाजनक है, लेकिन नई है। जैसा कि पहले उल्लेख किया गया है, जब मैं यह लिख रहा हूं तब फ़ायरफ़ॉक्स को अभी भी एक पॉलीफ़िल की आवश्यकता है। मैंने इसके साथ लेआउट एज केस को हिट किया है जिसके लिए फ़ॉलबैक की आवश्यकता थी जिसकी मुझे आशा नहीं थी। यदि आपको आज सभी ब्राउज़रों में सुसंगत व्यवहार की आवश्यकता है, तो आप अभी भी मुश्किल भागों के लिए जावास्क्रिप्ट तक पहुंच रहे हैं। जिस अतिरिक्त चीज़ के लिए मैंने अपना वर्कफ़्लो बदला है वह HTML पॉपओवर एपीआई है, जो अब सभी आधुनिक ब्राउज़रों में उपलब्ध है। पॉपओवर विशेषता वाले तत्व ब्राउज़र की शीर्ष परत में, हर चीज़ के ऊपर, बिना किसी जावास्क्रिप्ट पोजीशनिंग की आवश्यकता के प्रस्तुत होते हैं।
<बटन पॉपओवरटार्गेट='ड्रॉपडाउन-डेमो'>खोलें
टूलटिप्स, प्रकटीकरण विजेट और सरल ओवरले जैसी चीजों के लिए एस्केप हैंडलिंग, डिसमिस-ऑन-क्लिक-आउट और ठोस एक्सेसिबिलिटी सिमेंटिक्स मुफ्त आते हैं। यह पहला टूल है जिस तक मैं अभी पहुंचा हूं। जैसा कि कहा गया है, यह स्थिति का समाधान नहीं करता है। यह लेयरिंग का समाधान करता है। पॉपओवर को उसके ट्रिगर में संरेखित करने के लिए आपको अभी भी एंकर पोजिशनिंग या जावास्क्रिप्ट की आवश्यकता है। पॉपओवर एपीआई लेयरिंग को संभालता है। एंकर पोजिशनिंग प्लेसमेंट को संभालती है। एक साथ उपयोग किए जाने पर, वे उस अधिकांश चीज़ को कवर करते हैं जो आप पहले लाइब्रेरी में करने के लिए पहुँचते थे। आपकी स्थिति के लिए एक निर्णय मार्गदर्शिका इस सब कठिन रास्ते से गुजरने के बाद, अब मैं वास्तव में विकल्प के बारे में कैसे सोचता हूं।
एक पोर्टल का उपयोग करें। मैं इसका उपयोग तब करूंगा जब ट्रिगर नेस्टेड स्क्रॉल कंटेनरों में गहराई में रहता है। मैंने टेबल एक्शन मेनू के लिए इस पैटर्न का उपयोग किया और इसे फोकस रेस्टोरेशन और एक्सेसिबिलिटी जांच के साथ जोड़ा। यह सबसे विश्वसनीय विकल्प है, लेकिन अतिरिक्त वायरिंग के लिए बजट समय है। निश्चित स्थिति का उपयोग करें। यह तब होता है जब आप वेनिला जावास्क्रिप्ट या हल्के ढांचे में होते हैं और यह सत्यापित कर सकते हैं कि कोई भी पूर्वज परिवर्तन या फ़िल्टर लागू नहीं करता है। इसे स्थापित करना आसान है और डीबग करना आसान है, जब तक कि यह एक बाधा बनी रहती है। जब आपका ब्राउज़र समर्थन इसकी अनुमति देता है तो इसके लिए सीएसएस एंकर पोजिशनिंग का उपयोग करें। यदि फ़ायरफ़ॉक्स समर्थन की आवश्यकता है, तो इसे @oddbird पॉलीफ़िल के साथ जोड़ें। यह वह जगह है जहां प्लेटफ़ॉर्म अंततः जा रहा है और अंततः आपका दृष्टिकोण बन जाएगा। DOM का पुनर्गठन करें। इसका उपयोग तब करें जब आर्किटेक्चर इसकी अनुमति देता है, और आप शून्य रनटाइम जटिलता चाहते हैं। मेरा मानना है कि यह संभवतः सबसे कम मूल्यांकित विकल्प है। पैटर्न को संयोजित करें। ऐसा तब करें जब आप एंकर पोजिशनिंग को अपने प्राथमिक दृष्टिकोण के रूप में चाहते हैं, असमर्थित ब्राउज़रों के लिए जावास्क्रिप्ट फ़ॉलबैक के साथ जोड़ा गया है। या समन्वय सटीकता के लिए getBoundingClientRect() के साथ युग्मित DOM प्लेसमेंट के लिए एक पोर्टल।
निष्कर्ष मैं इस बग को एक बार के मुद्दे के रूप में मानता था - कुछ ऐसा जिसे सुधारा जाए और आगे बढ़ाया जाए। लेकिन एक बार जब मैं इसमें शामिल सभी तीन प्रणालियों - ओवरफ्लो क्लिपिंग, स्टैकिंग संदर्भ, और युक्त ब्लॉक - को समझने के लिए इसके साथ काफी देर तक बैठा - तो यह यादृच्छिक महसूस करना बंद कर दिया। मैं टूटे हुए ड्रॉपडाउन को देख सकता था और तुरंत पता लगा सकता था कि कौन सा पूर्वज जिम्मेदार था। मेरे द्वारा DOM को पढ़ने के तरीके में वह बदलाव वास्तविक उपलब्धि थी। कोई एक भी सही उत्तर नहीं है. मैं जिस तक पहुंचा वह इस पर निर्भर था कि मैं कोडबेस में क्या नियंत्रित कर सकता हूं: जब पूर्वज पेड़ अप्रत्याशित था तो पोर्टल; जब यह साफ और सरल था तो निश्चित स्थिति; जब कुछ भी मुझे रोक नहीं रहा था तब तत्व को हिलाना; और अब लंगर की स्थिति,जहाँ हो सकता था। अंत में आप जो भी चुनें, पहुंच को अंतिम चरण न मानें। मेरे अनुभव में, ठीक उसी समय इसे छोड़ दिया जाता है। ARIA संबंध, फ़ोकस प्रबंधन, कीबोर्ड व्यवहार - वे पॉलिश नहीं हैं। वे उस चीज़ का हिस्सा हैं जो चीज़ को वास्तव में काम करती है। मेरे GitHub रेपो में पूर्ण स्रोत कोड देखें। आगे पढ़ना ये वे संदर्भ हैं जिन पर मैं इस पर काम करते समय बार-बार आता रहा:
स्टैकिंग संदर्भ (एमडीएन) "सीएसएस एंकर पोजिशनिंग गाइड", जुआन डिएगो रोड्रिग्ज "पॉपओवर एपीआई के साथ शुरुआत करना", गॉडस्टाइम अबुरू फ़्लोटिंग यूआई (फ़्लोटिंग-ui.com) सीएसएस ओवरफ्लो (एमडीएन)
