प्रॉम्प्ट और दायरा
एक बटन एक मेनू, हिंट या कमांड पैनल खोलता है। Popover को बटन के पास रहना चाहिए, जगह न होने पर फ्लिप होना चाहिए, व्यूपोर्ट या स्क्रॉल कंटेनर द्वारा कटने (clipping) से बचना चाहिए, और कीबोर्ड फोकस व डिसमिसल का समर्थन करना चाहिए। JavaScript कोऑर्डिनेट गणनाओं की तुलना CSS Anchor Positioning से करें और प्रोग्रेसिव एन्हांसमेंट का प्रस्ताव दें।
MDN एंकर पोजिशनिंग को एक एलिमेंट को दूसरे के सापेक्ष रखने के रूप में वर्णित करता है, जिसमें position-try जैसे फॉलबैक तंत्र शामिल हैं। Chrome की गाइड anchor-name और position-anchor के माध्यम से इस संबंध को दर्शाती है। एक मजबूत उत्तर लेआउट, स्क्रॉलिंग, ब्राउज़र सपोर्ट और इंटरैक्शन सेमेंटिक्स को एक साथ कवर करता है।
इंटरव्यूअर क्या मूल्यांकन करता है
- क्या आप विजुअल प्लेसमेंट, DOM सेमेंटिक्स और फोकस प्रबंधन को अलग करते हैं।
- क्या आप केवल प्रॉपर्टी के नाम याद रखने के बजाय एंकर संबंधों और फॉलबैक उम्मीदवारों को समझते हैं।
- क्या आप स्क्रॉल कंटेनर, क्लिपिंग और स्टैकिंग कॉन्टेक्स्ट के बारे में तर्क करते हैं।
- जब CSS फीचर अनुपलब्ध हो, तो क्या आप एक न्यूनतम JavaScript फॉलबैक डिज़ाइन करते हैं।
- क्या आप एक ब्राउज़र, इनपुट और एक्सेसिबिलिटी टेस्ट मैट्रिक्स परिभाषित करते हैं।
Frontend इंटरव्यू में आमतौर पर ब्राउज़र लेआउट के बुनियादी सिद्धांतों, मेंटेन करने योग्य कंपोनेंट्स और एज हैंडलिंग का परीक्षण किया जाता है। एक मजबूत उत्तर सार्वभौमिक समर्थन मान लेने के बजाय एक नए CSS फीचर को वास्तविक अनुकूलता और उत्पाद की बाधाओं के भीतर रखता है।
उत्तर देने से पहले स्पष्ट करने वाले प्रश्न
- क्या popover एक मेनू, टूलटिप या डायलॉग है? सेमेंटिक रोल फोकस और Escape के व्यवहार को बदल देता है।
- क्या संदर्भ एक बटन, आइकन या लिस्ट आइटम है? क्या यह हिल सकता है या वर्चुअलाइज्ड हो सकता है?
- क्या यह स्क्रॉल कंटेनर से बाहर निकल सकता है? क्लिपिंग से बचने के लिए क्या इसे टॉप-लेवल रेंडरिंग लेयर की आवश्यकता है?
- कौन से ब्राउज़र और WebViews समर्थित हैं? क्या फॉलबैक को सभी व्यवहारों को बनाए रखना चाहिए?
- क्या मूवमेंट को एनिमेट किया जाना चाहिए, और जब उपयोगकर्ता रिड्यूस्ड मोशन पसंद करता है तो क्या होता है?
30-सेकंड उत्तर फ्रेमवर्क
मैं पहले popover के सेमेंटिक्स और फोकस मॉडल को परिभाषित करूँगा। फिर मैं बटन को एक एंकर के रूप में नाम दूँगा और popover को उससे जोड़ूँगा। मैं इसे डिफ़ॉल्ट रूप से नीचे रखूँगा और ऊपर और किनारों पर क्रमबद्ध position-try फॉलबैक प्रदान करूँगा; मैं एक निश्चित ऑफसेट पर निर्भर नहीं रहूँगा। असमर्थित ब्राउज़र एक छोटे पोजिशनिंग एडॉप्टर या इनलाइन फॉलबैक का उपयोग करेंगे, जिसे समान एक्सेसिबिलिटी परीक्षणों द्वारा मान्य किया जाएगा।
चरण-दर-चरण विस्तृत उत्तर
चरण 1: पहले सेमेंटिक्स और फोकस को संभालें
एक मेनू को फोकस करने योग्य मेनू आइटम और एक स्पष्ट विस्तारित स्थिति की आवश्यकता होती है; टूलटिप में आवश्यक क्रियाएं नहीं होनी चाहिए; एक जटिल कमांड पैनल डायलॉग जैसा हो सकता है। खुलने पर, ट्रिगर को रिकॉर्ड करें; बंद होने पर, फोकस रीस्टोर करें। Escape और आउटसाइड-क्लिक के नियम एक समान होने चाहिए। CSS प्लेसमेंट को नियंत्रित करता है, इन इंटरैक्शन गारंटियों को नहीं।
चरण 2: एंकर संबंध स्थापित करें
ट्रिगर को एक एंकर के रूप में नाम दें और popover को उस पोजिशन एंकर पर इंगित करें। संबंध को स्थिर या इंस्टेंस-स्कोप्ड रखें ताकि कई लिस्ट आइटम एक ही नाम साझा न करें। कंपोनेंट डिस्ट्रक्शन, पुनर्चक्रण (reuse), और वर्चुअल स्क्रॉलिंग को पुराने संबंधों को हटा देना चाहिए।
चरण 3: डिफ़ॉल्ट और फॉलबैक स्थितियां परिभाषित करें
ट्रिगर के नीचे सामान्य स्थिति घोषित करें, फिर ऊपर, स्टार्ट-साइड और एंड-साइड उम्मीदवारों की सूची बनाएं। उम्मीदवार का क्रम उत्पाद की प्राथमिकता को व्यक्त करता है, जैसे कंटेंट को सिकोड़ने से पहले क्षैतिज संरेखण को बनाए रखना। ब्राउज़र को एक व्यावहारिक उम्मीदवार चुनने देने और डिबगिंग के लिए विफल उम्मीदवारों को देखने के लिए position-try तंत्र का उपयोग करें।
चरण 4: सीमाओं और स्क्रॉलिंग को संभालें
स्क्रॉल कंटेनरों, ट्रांसफॉर्म किए गए पूर्वजों (ancestors), और नए स्टैकिंग कॉन्टेक्स्ट द्वारा क्लिपिंग की जाँच करें। यदि popover को कंटेनर की सीमा को पार करना होगा, तो इंस्टेंस-स्तरीय एंकर संबंध बनाए रखते हुए इसे टॉप-लेवल लेयर में रेंडर करें। जब ट्रिगर व्यूपोर्ट, नेस्टेड कंटेनरों और दाएं-से-बाएं (RTL) टेक्स्ट से बाहर निकलता है, तो स्क्रॉलिंग और ज़ूमिंग का परीक्षण करें।
चरण 5: प्रोग्रेसिव एन्हांसमेंट बनाए रखें
क्षमता का पता लगाने (capability detection) के बाद CSS प्लेसमेंट का उपयोग करें; JavaScript एडॉप्टर को केवल आवश्यकता पड़ने पर ही सक्रिय करें। एडॉप्टर ट्रिगर रेक्टैंगल को पढ़ता है, उम्मीदवारों का मूल्यांकन करता है, और केवल आवश्यक स्क्रॉल, आकार और लेआउट सिग्नलों पर नज़र रखता है। दोनों कार्यान्वयनों को एक साथ पोजिशन स्टाइल लिखने की अनुमति न दें, अन्यथा वे रेस कर सकते हैं और फ्लिकर हो सकते हैं।
चरण 6: आकार और कंटेंट को सीमित करें
अधिकतम चौड़ाई और ऊंचाई, पैडिंग, और एक आंतरिक स्क्रॉल क्षेत्र परिभाषित करें। उम्मीदवार के चयन में उपलब्ध स्थान और न्यूनतम पठनीय आकार पर विचार किया जाना चाहिए; लंबे कंटेंट को पेज को ओवरफ्लो करने के बजाय popover के अंदर स्क्रॉल होना चाहिए। डायनामिक कंटेंट लोड होने के बाद पुनर्मूल्यांकन करें क्योंकि प्रारंभिक माप पुराना हो सकता है।
चरण 7: मोशन और इनपुट डिवाइस को संभालें
पोजिशन परिवर्तनों को एक स्पष्ट अवधि और एक रिड्यूस्ड-मोशन पाथ दें। कीबोर्ड, टच और पॉइंटर इनपुट को ओपन, क्लोज और फोकस नियमों को साझा करना चाहिए; होवर टूलटिप कीबोर्ड-सुलभ सहायता की जगह नहीं ले सकता। एनीमेशन को फोकस रीस्टोरेशन में देरी नहीं करनी चाहिए या सहायक तकनीक (assistive technology) को गलत स्थिति नहीं दिखानी चाहिए।
चरण 8: एक सत्यापन मैट्रिक्स बनाएं
डिफ़ॉल्ट स्थिति, प्रत्येक फॉलबैक, संकीर्ण व्यूपोर्ट, नेस्टेड स्क्रॉलिंग, ज़ूम, दाएं-से-बाएं टेक्स्ट, लंबे कंटेंट, डायनामिक कंटेंट और असमर्थित ब्राउज़रों का परीक्षण करें। कोई क्लिपिंग न होना, सही ट्रिगर-कंटेंट संबंध, Escape द्वारा डिसमिस होना, फोकस रीस्टोरेशन, और सुसंगत एक्सेसिबिलिटी-ट्री स्थिति सुनिश्चित करें। केवल वाइड-स्क्रीन स्क्रीनशॉट स्वीकार करने के बजाय CSS और फॉलबैक पाथ की तुलना करें।
मॉडल उत्तर
मैं मेनू, टूलटिप और डायलॉग सेमेंटिक्स में अंतर करूँगा और पहले फोकस व डिसमिसल व्यवहार स्थापित करूँगा। ट्रिगर को एक एंकर नाम मिलता है; popover position-anchor का उपयोग करता है, डिफ़ॉल्ट रूप से नीचे रहता है, और ऊपर व किनारों पर position-try फॉलबैक सूचीबद्ध करता है। यदि कोई स्क्रॉल कंटेनर इसे क्लिप करता है, तो मैं इंस्टेंस संबंध बनाए रखते हुए इसे टॉप-लेवल लेयर में रेंडर करूँगा। असमर्थित ब्राउज़र समान सेमेंटिक्स वाले एक JavaScript एडॉप्टर का उपयोग करेंगे। मैं रिड्यूस्ड मोशन का सम्मान करते हुए संकीर्ण व्यूपोर्ट, नेस्टेड स्क्रॉल, दाएं-से-बाएं टेक्स्ट, डायनामिक कंटेंट, कीबोर्ड और स्क्रीन रीडर्स का परीक्षण करूँगा।
सामान्य गलतियां
- कोऑर्डिनेट्स की गणना केवल एक बार करना → स्क्रॉलिंग और ज़ूम प्लेसमेंट को तोड़ देते हैं → CSS या एडॉप्टर को लेआउट परिवर्तनों पर प्रतिक्रिया देने योग्य बनाएं।
- टूलटिप को मेनू की तरह मानना → कीबोर्ड और सहायक तकनीक विफल हो जाती हैं → पहले सेमेंटिक्स और फोकस परिभाषित करें।
- केवल नीचे की स्थिति प्रदान करना → व्यूपोर्ट के किनारे ओवरफ्लो हो जाते हैं → कई उम्मीदवारों को क्रमबद्ध करें।
overflow: hiddenको अनदेखा करना → एक पूर्वज popover को क्लिप कर देता है → सही टॉप-लेवल रेंडरिंग बाउंड्री चुनें।- CSS और JavaScript दोनों को पोजिशन करने देना → रेस और फ्लिकरिंग → क्षमता का पता लगाने के बाद ठीक एक पाथ सक्षम करें।
- माउस के साथ केवल वाइड स्क्रीन पर परीक्षण करना → मोबाइल और कीबोर्ड विफल हो जाते हैं → इनपुट डिवाइस, दिशात्मकता और एक्सेसिबिलिटी को कवर करें।
फॉलो-अप और उत्तर
क्या Anchor Positioning हर फ्लोटिंग-एलिमेंट लाइब्रेरी की जगह ले सकता है?
नहीं। यह लेआउट संबंधों और फॉलबैक प्लेसमेंट को संभालता है, फोकस, रोल्स, डिसमिसल, ड्रैगिंग या जटिल व्यावसायिक कोलिज़न नियमों को नहीं। कंपोनेंट्स को अभी भी इंटरैक्शन और अनुकूलता लेयर्स की आवश्यकता होती है।
क्या होगा यदि कोई स्क्रॉल कंटेनर popover को क्लिप कर देता है?
तय करें कि क्या सीमा पार करना आवश्यक है। यदि ऐसा है, तो इंस्टेंस संबंध के साथ एक टॉप-लेवल रेंडरिंग लेयर का उपयोग करें; अन्यथा उम्मीदवारों को सीमित करें और कंटेनर के अंदर कंटेंट को स्क्रॉल करें।
आप लिस्ट में anchor-name के टकराव से कैसे बचते हैं?
प्रति-इंस्टेंस एक स्थिर संबंध बनाएं या कंपोनेंट लाइफसाइकिल के साथ नामों का प्रबंधन करें। जब वर्चुअलाइज्ड नोड्स को रीसायकल किया जाता है तो संबंधों को हटा दें।
जब CSS असमर्थित हो तो फॉलबैक क्या है?
समान सेमेंटिक्स, फोकस और डिसमिसल के साथ एक JavaScript पोजिशनिंग एडॉप्टर को सक्षम करने के लिए क्षमता का पता लगाने का उपयोग करें। गैर-महत्वपूर्ण कंटेंट के लिए, ट्रिगर के नीचे एक इनलाइन ब्लॉक इससे भी सरल फॉलबैक हो सकता है।
क्या होगा यदि डायनामिक कंटेंट स्थिति बदल देता है?
आकार परिवर्तनों को फिर से लेआउट ट्रिगर करने दें; फॉलबैक पाथ पर केवल आवश्यक आकार और स्क्रॉल सिग्नलों पर नज़र रखें। एक निश्चित टाइमआउट के पीछे अस्थिर लेआउट को न छिपाएं।
आप कैसे साबित करते हैं कि फॉलबैक उम्मीदवार काम करते हैं?
प्रत्येक किनारे पर पुनरुत्पादित व्यूपोर्ट और स्क्रॉल स्थितियां बनाएं, फिर केवल CSS क्लास नाम की जांच करने के बजाय अंतिम प्लेसमेंट, क्लिपिंग, पठनीय आकार और एंकर दूरी को सत्यापित करें।
आप अभी भी JavaScript फ्लोटिंग लाइब्रेरी कब चुनेंगे?
इसे तब चुनें जब व्यापक ब्राउज़र समर्थन, उन्नत कोलिज़न नियम, क्रॉस-डॉक्यूमेंट प्लेसमेंट, या परिपक्व एक्सेसिबिलिटी व्यवहार नेटिव CSS पाथ के मूल्य से अधिक महत्वपूर्ण हों। CSS प्रोग्रेसिव लेआउट लेयर बना रह सकता है।