प्रॉम्प्ट और दायरा
यह प्रश्न इस बात का परीक्षण करता है कि क्या "इसे बटन के बगल में रखें" एक सत्यापन योग्य लेआउट और इंटरैक्शन अनुबंध बनता है या नहीं। मेनू या डायलॉग के लिए anchor-name, anchor(), संभावित स्थितियां (candidate positions), ओवरफ्लो, स्क्रॉलिंग, फ़ीचर डिटेक्शन, और कीबोर्ड व फ़ोकस व्यवहार को कवर करें।
साक्षात्कारकर्ता क्या मूल्यांकन कर रहा है
- एक स्थिर एंकर संबंध और
position-area,anchor(), तथा फ़ॉलबैक स्थितियों की भूमिकाएं। - व्यूपोर्ट किनारों, स्क्रॉल कंटेनरों, ज़ूम और डायनामिक सामग्री के तहत दृश्यता।
- जावास्क्रिप्ट मापन पर सख्त निर्भरता के बजाय प्रोग्रेसिव एन्हांसमेंट।
- मेनू, टूलटिप्स और डायलॉग्स के लिए सही सिमेंटिक्स और व्यवहार।
- ब्राउज़र-मैट्रिक्स, विज़ुअल-रिग्रेशन, कीबोर्ड और स्क्रीन-रीडर सत्यापन।
अनुशंसित उत्तर संरचना
पॉपओवर का प्रकार, एंकर और न्यूनतम दृश्य क्षेत्र परिभाषित करें। एंकर नामकरण, पसंदीदा स्थिति, फ़ॉलबैक और छिपाने के नियमों के साथ CSS पाथ प्रदान करें। फिर मौजूदा पोजिशनिंग कंपोनेंट के लिए @supports फ़ॉलबैक का वर्णन करें, जिसके बाद फ़ोकस, स्क्रॉलिंग, डायनामिक आकार और परीक्षण शामिल हों।
गहन विश्लेषण: उपयोगी और सुलभ पोज़िशनिंग
एक स्थिर एंकर बनाएं
ट्रिगर को एक अद्वितीय anchor-name दें; पॉपओवर पर position-anchor या स्पष्ट संदर्भ का उपयोग करें। दोहराई जाने वाली पंक्तियों (rows) के लिए, DOM निकटता से अनुमान लगाने के बजाय प्रति पंक्ति एक स्थिर संबंध बनाएं और अनमाउंट पर स्थिति (state) को साफ़ करें।
उम्मीदवार और ओवरफ्लो नियम परिभाषित करें
पसंदीदा पक्ष के लिए position-area या anchor() का उपयोग करें, फिर विपरीत पक्ष, एज अलाइनमेंट और घटे हुए आकार के लिए position-try-fallbacks या समकक्ष नियमों का उपयोग करें। एक अधिकतम ब्लॉक आकार और आंतरिक स्क्रॉलिंग सेट करें। यदि यह फिट नहीं हो सकता है, तो सामग्री को काटने (clipping) के बजाय इसे छुपाएं या पूर्ण-स्क्रीन पैनल पर स्विच करें।
स्क्रॉलिंग और डायनामिक आकार को संभालें
जब एंकर स्क्रॉल कंटेनर के अंदर चलता है, तो कंटेनिंग ब्लॉक और स्टैकिंग संदर्भ को सत्यापित करें। एसिंक्रोनस सामग्री, फ़ॉन्ट लोडिंग और ज़ूम परिवर्तनों के बाद दृश्यता की पुन: जांच करें। नेटिव पाथ पर हाथ से लिखे गए स्क्रॉल मापन से बचें।
प्रोग्रेसिव एन्हांसमेंट जोड़ें
@supports (anchor-name: --trigger) का उपयोग करें। समर्थित ब्राउज़र CSS का उपयोग करते हैं; अन्य सीमित मापन, क्लीनअप और फ़्लिप हैंडलिंग के साथ मौजूदा पोर्टल और पोज़िशनिंग लॉजिक का पुन: उपयोग करते हैं। दोनों पाथ मेनू स्थिति और एक्सेसिबिलिटी नियमों को साझा करते हैं।
कार्य के अनुसार सिमेंटिक्स का मिलान करें
मेनू, मेनू आइटम और एक प्रलेखित एरो-की मॉडल का उपयोग करते हैं। टूलटिप में आवश्यक कार्रवाइयां नहीं होनी चाहिए। डायलॉग का उपयोग केवल तभी करें जब बैकग्राउंड वास्तव में ब्लॉक हो; एक मोडल एंट्री फ़ोकस, Tab व्यवहार, Escape और फ़ोकस रीस्टोरेशन का प्रबंधन करता है।
नमूना उत्तर
"मैं फ़िल्टर को एक नॉन-मोडल मेनू बनाऊंगा। बटन को एक स्थिर anchor-name मिलता है; मेनू इसके नीचे position-anchor का उपयोग करता है, जिसमें ऊपर और व्यूपोर्ट किनारों के साथ फ़ॉलबैक और आंतरिक स्क्रॉलिंग के लिए अधिकतम ऊंचाई होती है। यदि @supports विफल हो जाता है, तो मौजूदा पोर्टल पोज़िशनर लेआउट को संभालता है जबकि स्थिति और कीबोर्ड व्यवहार साझा रहते हैं। खोलने पर फ़ोकस पहले आइटम पर जाता है, तीर (arrow keys) मेनू के भीतर चलते हैं, और Escape या बाहर क्लिक करने पर यह बंद हो जाता है और फ़ोकस बटन पर वापस आ जाता है। मैं स्क्रीनशॉट, कीबोर्ड चेक और स्क्रीन-रीडर चेक के साथ संकीर्ण व्यूपोर्ट, स्क्रॉल कंटेनर, ज़ूम, एसिंक्रोनस सामग्री और क्लिपिंग का परीक्षण करूंगा।"
सामान्य विफलता मोड और सुधार
- केवल
topऔरleftसेट करना → उम्मीदवारों, ओवरफ्लो, आकार सीमाओं और फ़ॉलबैक की व्याख्या करें। - प्रत्येक पॉपओवर को मोडल बनाना → कार्य के आधार पर मेनू, टूलटिप्स और डायलॉग्स को वर्गीकृत करें।
- असमर्थित ब्राउज़रों को अनदेखा करना →
@supportsऔर मौजूदा पोज़िशनिंग फ़ॉलबैक प्रदान करें। - केवल एक निश्चित डेस्कटॉप विंडो का परीक्षण करना → स्क्रॉलिंग, ज़ूम, संकीर्ण स्क्रीन, डायनामिक सामग्री और कीबोर्ड उपयोग को शामिल करें।
- फ़ोकस को केवल CSS का विषय मानना → ओपन, मूव, क्लोज़ और रीस्टोर-फ़ोकस स्थितियों को परिभाषित करें।
स्कोरिंग रूब्रिक और सेल्फ़-चेक
मजबूत उत्तरों में स्थिर एंकर, उम्मीदवार स्थितियां, ओवरफ्लो और छिपाने के नियम, प्रोग्रेसिव एन्हांसमेंट, स्क्रॉल और डायनामिक-आकार की सीमाएं, सही सिमेंटिक्स, फ़ोकस प्रबंधन, एक परीक्षण मैट्रिक्स और अवलोकनीयता शामिल हैं।
पूछें: क्या एंकर स्थिर है? यदि मेनू फिट नहीं होता है तो क्या होगा? स्क्रॉलिंग कंटेनर में इसे कौन स्थित करता है? एक पुराना ब्राउज़र क्या करता है? फ़ोकस कहाँ वापस आता है? मैं कैसे साबित करूँ कि कोई क्लिपिंग, जंप या अप्राप्य सामग्री नहीं है?
फ़ॉलो-अप और विस्तार
anchor() और position-area में क्या अंतर है?
position-area एंकर के सापेक्ष एक क्षेत्र को व्यक्त करता है; anchor() इनसेट, ऑफ़सेट और गणनाओं के लिए एक किनारे (edge) या आकार को प्रदर्शित करता है। उन्हें संयोजित किया जा सकता है, लेकिन फिर भी फ़ॉलबैक और आकार सीमाओं की आवश्यकता होती है।
क्या होगा यदि मेनू व्यूपोर्ट से अधिक लंबा हो?
इसके ब्लॉक आकार को सीमित करें और इसकी सामग्री को स्क्रॉल करें। छोटी स्क्रीन पर, फ़ुल-स्क्रीन या बॉटम शीट पर स्विच करें जब वह कार्य का बेहतर समर्थन करती हो। सामग्री को व्यूपोर्ट के बाहर न छोड़ें।
आप पोज़िशनिंग उम्मीदवारों का परीक्षण कैसे करते हैं?
व्यूपोर्ट आकारों, स्क्रॉल स्थितियों, ज़ूम, फ़ॉन्ट और सामग्री की लंबाई में स्क्रीनशॉट जनरेट करें। दृश्य क्षेत्र, फ़ोकस क्रम और बंद करने के बाद फ़ोकस लक्ष्य की पुष्टि (assert) करें।
जावास्क्रिप्ट पोज़िशनिंग अभी भी कब उपयुक्त है?
पुराने ब्राउज़रों, जटिल पोर्टल सीमाओं या व्यावसायिक टकराव डेटा के लिए जावास्क्रिप्ट फ़ॉलबैक बनाए रखें। समर्थित ब्राउज़रों को CSS संभालने दें और केवल क्षमता अंतराल और स्थिति सिंक्रनाइज़ेशन के लिए जावास्क्रिप्ट का उपयोग करें।