फ्रंटएंड इंटरव्यू: रेजिलिएंट पॉपओवर प्लेसमेंट के लिए आप CSS Anchor Positioning का उपयोग कैसे करेंगे?

प्रॉम्प्ट और संदर्भ

डेटा-टेबल का एक एक्शन बटन मेनू या हेल्प बबल खोलता है। फ्लोटिंग पैनल को स्क्रॉल करते समय बटन का अनुसरण करना चाहिए, व्यूपोर्ट किनारों से दूर जाना चाहिए, और पूर्वजों द्वारा क्लिपिंग से बचना चाहिए; मोबाइल, कीबोर्ड उपयोगकर्ताओं और नए CSS के बिना ब्राउज़रों के लिए समर्थन बना रहना चाहिए। इसे CSS Anchor Positioning के साथ डिज़ाइन करें और बताएं कि स्क्रिप्ट या Popover API को कब बनाए रखना है।

यह प्रश्न फ्रंटएंड, डिज़ाइन-सिस्टम और कंपोनेंट-प्लेटफ़ॉर्म भूमिकाओं के लिए उपयुक्त है। मुख्य बात ज्यामितीय प्लेसमेंट, ओवरफ्लो फ़ॉलबैक, इंटरैक्शन सिमेंटिक्स और कम्पैटिबिलिटी की सीमाओं को संयोजित करना है।

इंटरव्यूअर क्या मूल्यांकन करता है

एक मजबूत उत्तर एंकर एलिमेंट और एंकर-पोजीशन वाले एलिमेंट के बीच अंतर करता है और बताता है कि anchor-name, position-anchor, anchor(), या position-area संबंध कैसे बनाते हैं। यह position-try क्रम, ओवरफ्लो निर्णय, छिपाने का व्यवहार, स्क्रॉल कंटेनर, स्टैकिंग संदर्भ, कीबोर्ड फ़ोकस और फ़ॉलबैक को भी कवर करता है।

पहले पूछे जाने वाले स्पष्टीकरण

• क्या पैनल एक मेनू, टूलटिप, पिकर या गैर-इंटरैक्टिव स्पष्टीकरण है? क्या इसे Popover या dialog सिमेंटिक्स की आवश्यकता है?
• पसंदीदा और अनुमत वैकल्पिक स्थितियाँ, न्यूनतम पठनीय आकार और सुरक्षित व्यूपोर्ट इनसेट क्या हैं?
• क्या ट्रिगर स्क्रॉल या क्लिपिंग कंटेनर के अंदर है, या किसी ट्रांसफ़ॉर्म किए गए एलिमेंट के अंदर है?
• क्या बढ़ते हुए कंटेंट को फ़्लिप करना चाहिए, सिकुड़ना चाहिए, आंतरिक रूप से स्क्रॉल करना चाहिए, या पूर्ण-स्क्रीन सतह बन जाना चाहिए?
• कौन से ब्राउज़र लक्षित हैं, और पुराने ब्राउज़रों के लिए स्थिर प्लेसमेंट फ़ॉलबैक क्या है?

30-सेकंड का उत्तर

"मैं ट्रिगर को एक एंकर और पैनल को एक एब्सोल्यूट या फिक्स्ड-पोजीशन एलिमेंट बनाऊंगा। मैं इसे anchor() या position-area के साथ रखूंगा, फिर position-try के साथ ऊपर और किनारे के विकल्प घोषित करूंगा। कंपोनेंट को अभी भी आकार सीमा, व्यूपोर्ट इनसेट, फ़ोकस और डिसमिसल सिमेंटिक्स की आवश्यकता होती है; असमर्थित ब्राउज़र मौजूदा Popover या मापे गए फ़ॉलबैक का उपयोग करते हैं। मैं एन्हांस्ड और फ़ॉलबैक दोनों मोड में स्क्रॉलिंग, ज़ूम, लंबे कंटेंट, कीबोर्ड नेविगेशन और व्यूपोर्ट किनारों का परीक्षण करूंगा।"

चरण-दर-चरण समाधान

चरण 1: एंकर संबंध बनाएं

ट्रिगर से anchor-name के साथ एक नाम प्रदर्शित करें, फिर position-anchor के साथ पैनल से इसका चयन करें। अंतर्निहित एसोसिएशन के लिए, DOM स्कोप और डुप्लिकेट-नाम नियमों को सत्यापित करें ताकि बार-बार आने वाली पंक्ति किसी भिन्न बटन से बाइंड न हो सके।

चरण 2: प्लेसमेंट एक्सप्रेशन चुनें

anchor() इनसेट गुणों के अंदर एंकर किनारे या केंद्र को पढ़ता है; position-area तार्किक क्षेत्रों जैसे block-start या inline-end को व्यक्त करता है। दोनों को एक हार्ड-कोडेड पिक्सेल ऑफ़सेट के बजाय स्पष्ट स्थिति, आकार सीमा और गैप की आवश्यकता होती है।

.action {
  anchor-name: --action;
}

.menu {
  position: absolute;
  position-anchor: --action;
  top: anchor(bottom);
  inset-inline-start: anchor(start);
  margin-block-start: 0.5rem;
}

चरण 3: फ़ॉलबैक क्रम घोषित करें

डिफ़ॉल्ट बटन के नीचे है; जब स्थान अपर्याप्त हो, तो position-try ऊपर और inline-end किनारे का परीक्षण कर सकता है। क्रम को उत्पाद प्राथमिकता को प्रतिबिंबित करना चाहिए और बाएं-से-दाएं और दाएं-से-बाएं दोनों लोकेलों के लिए तार्किक दिशाओं का उपयोग करना चाहिए।

.menu {
  position-try: flip-block, flip-inline;
  max-inline-size: min(90vw, 24rem);
  max-block-size: min(70vh, 32rem);
  overflow: auto;
}

चरण 4: असंभव-प्लेसमेंट स्थिति को परिभाषित करें

जब प्रत्येक उम्मीदवार ओवरफ्लो हो जाता है, तो सोच-समझकर चुनें: सिकुड़ें और स्क्रॉल करें, गैर-महत्वपूर्ण संकेत छिपाएं, या पूर्ण-स्क्रीन सतह पर स्विच करें। आधे मेनू को व्यूपोर्ट के बाहर न छोड़ें या ओवरफ्लो को डिसमिसल के साथ भ्रमित न करें।

चरण 5: कंटेनरों और स्टैकिंग को ध्यान में रखें

overflow: hidden, क्लिपिंग परतें, transform, contain, और z-index दृश्यमान सीमा या युक्त ब्लॉक को बदल सकते हैं। वास्तविक पोजिशनिंग संदर्भ को सत्यापित करें; यदि आवश्यक हो, तो ट्रिगर-पैनल संबंध को बनाए रखते हुए उपयुक्त top layer में रेंडर करें।

चरण 6: इंटरैक्शन और एक्सेसिबिलिटी सिमेंटिक्स को सुरक्षित रखें

Anchor Positioning ज्यामिति प्रदान करता है, न कि मेनू, टूलटिप, या पॉपअप सिमेंटिक्स। इंटरैक्टिव घटकों को अभी भी एक उपयुक्त भूमिका और नाम, कीबोर्ड नेविगेशन, Escape डिसमिसल और फ़ोकस रिटर्न की आवश्यकता होती है; एक गैर-इंटरैक्टिव संकेत केवल होवर पर निर्भर नहीं होना चाहिए।

चरण 7: कम्पैटिबिलिटी फ़ॉलबैक की योजना बनाएं

MDN एंकर पोजिशनिंग के कुछ हिस्सों को नई क्षमताओं के रूप में चिह्नित करता है। एक प्रयोग करने योग्य डिफ़ॉल्ट शैली रखें, फिर समर्थन का पता लगाने के बाद संवर्द्धन सक्षम करें; पुराने ब्राउज़र Popover API, मौजूदा कंपोनेंट-पोजिशनिंग उपयोगिता, या एक छोटे मापे गए फ़ॉलबैक का उपयोग कर सकते हैं। शून्य स्क्रिप्ट के लिए मेनू की पहुंच से समझौता न करें।

चरण 8: दोहराने योग्य सत्यापन बनाएं

सभी व्यूपोर्ट कोनों, स्क्रॉल कंटेनरों, ज़ूम, गतिशील टेक्स्ट आकार, लंबे लेबल, RTL, वर्चुअल कीबोर्ड, कीबोर्ड नेविगेशन और स्क्रीन रीडर को कवर करें। समर्थित और फ़ॉलबैक दोनों परिवेशों में उम्मीदवार की स्थिति, क्लिपिंग, फ़ोकस, स्क्रॉल लॉकिंग और लेआउट शिफ्ट को रिकॉर्ड करें।

ट्रेड-ऑफ़ और सीमाएं

Anchor Positioning सामान्य टीथरिंग और फ़्लिपिंग नियमों को CSS में स्थानांतरित करता है और प्रति-फ़्रेम माप को कम कर सकता है। यह ब्राउज़र कार्यान्वयन, पोजिशनिंग संदर्भ और कंपोनेंट सिमेंटिक्स द्वारा विवश रहता है। जटिल टकराव नियम, क्रॉस-टॉप-लेयर प्लेसमेंट, या व्यवसाय-विशिष्ट मापों के लिए अभी भी स्क्रिप्ट की आवश्यकता हो सकती है।

position-try उम्मीदवारों के बीच चयन करता है; यह पठनीय कंटेंट की गारंटी नहीं देता है। आकार सीमाएं, स्क्रॉलिंग, फ़ोकस और डिसमिसल कंपोनेंट की जिम्मेदारियां बनी रहती हैं। Popover कुछ इंटरैक्शन व्यवहार प्रदान करता है लेकिन हर मेनू या डायलॉग डिज़ाइन को प्रतिस्थापित नहीं करता है।

रोलआउट योजना और साक्ष्य

एक पसंदीदा स्थिति, तीन फ़ॉलबैक, एक अधिकतम आकार और एक व्यूपोर्ट इनसेट के साथ एक एक्शन मेनू का परीक्षण करें। ब्राउज़र समर्थन मैट्रिक्स रिकॉर्ड करें और असमर्थित परिवेशों के लिए एक स्थिर डिफ़ॉल्ट प्लेसमेंट रखें।

एंकर नामकरण, फ़ॉलबैक क्रम, तार्किक दिशाएं, क्लिपिंग सीमाएं, भूमिकाएं, फ़ोकस और परीक्षण मामलों का दस्तावेजीकरण करें। स्थिर स्क्रीनशॉट पर भरोसा करने के बजाय वास्तविक स्क्रॉलिंग और लंबे कंटेंट के साथ स्थिति परिवर्तनों को सत्यापित करें।

सामान्य गलतियाँ और फॉलो-अप

फ़ॉलबैक के बिना anchor() लिखना

पैनल किसी किनारे पर क्लिप हो सकता है। उम्मीदवार प्राथमिकताओं की घोषणा करें और प्रत्येक उम्मीदवार के विफल होने पर एक स्क्रॉल करने योग्य या वैकल्पिक सतह को परिभाषित करें।

प्लेसमेंट को इंटरैक्शन सिमेंटिक्स के रूप में मानना

CSS किसी पैनल को मेनू या टूलटिप में नहीं बदलता है। भूमिका, नाम, कीबोर्ड पथ, Escape हैंडलिंग और फ़ोकस रिटर्न जोड़ें।

स्क्रॉल और क्लिपिंग पूर्वजों की अनदेखी करना

एक बड़ा z-index गलत युक्त ब्लॉक से नहीं बच सकता है। रेंडरिंग लेयर को बदलने से पहले overflow, transform, contain, और स्क्रॉल संदर्भ का निरीक्षण करें।

केवल Chromium का परीक्षण करना

समर्थन मैट्रिक्स विकसित होते हैं। एन्हांस्ड और फ़ॉलबैक मोड में समान किनारे, कीबोर्ड, RTL और लंबे-कंटेंट वाले मामलों को चलाएं।

क्या होगा यदि पैनल अभी भी अपठनीय है?

पहले उम्मीदवार पदों और अधिकतम आकार की जाँच करें, फिर आंतरिक स्क्रॉलिंग, सिकुड़न, पूर्ण-स्क्रीन सतह, या गैर-महत्वपूर्ण कंटेंट को छिपाने का चयन करें; केवल z-index न बढ़ाएं या ओवरफ्लो जांच को अक्षम न करें।