प्रॉम्प्ट और संदर्भ
आप एक अत्यधिक पुन: उपयोग किए जाने वाले टूलटिप घटक का रखरखाव करते हैं। CSS anchor positioning इसे एक ट्रिगर से जोड़ती है और position-try फ़ॉलबैक ओवरफ़्लो को रोकते हैं, लेकिन जब पॉपओवर दूसरी तरफ जाता है तो इसका एरो, स्क्रॉल क्षेत्र और पैडिंग गलत ही रहते हैं।
एक CSS-फर्स्ट समाधान डिज़ाइन करें जो फ़ॉलबैक स्थिति को स्टाइल नियंत्रित करने दे, बार-बार उपयोग किए जाने वाले इंस्टेंसेस को अलग रखे, और एंकर पोज़िशनिंग अनुपलब्ध होने पर सुरक्षित रूप से डिग्रेड हो सके।
इंटरव्यूअर क्या जांचता है
- क्या आप एंकर पोज़िशनिंग संबंधों और फ़ॉलबैक चयन को समझते हैं।
- क्या एंकर की गई कंटेनर क्वेरीज़ जावास्क्रिप्ट स्थिति की नकल करने के बजाय वास्तविक प्लेसमेंट को पढ़ सकती हैं।
- क्या एक्सेसिबिलिटी, स्क्रॉल सीमाएं, स्टैकिंग और दोहराए गए घटकों का आइसोलेशन हल किया गया है।
- क्या फीचर डिटेक्शन, स्टैटिक लेआउट और प्रोग्रेसिव एन्हांसमेंट शामिल हैं।
स्पष्ट करने के लिए प्रश्न
- क्या टूलटिप सादा टेक्स्ट है, कोई मेनू है, या कोई इंटरैक्टिव डायलॉग है?
- क्या फ़ॉलबैक साइड बदलते हैं या किसी स्क्रॉलिंग कंटेनर में प्रवेश करते हैं?
- क्या लक्षित ब्राउज़र एंकर पोज़िशनिंग और कंटेनर क्वेरीज़ का समर्थन करते हैं?
- क्या जावास्क्रिप्ट आयामों को पढ़ सकता है, या समाधान पूरी तरह से CSS होना चाहिए?
30-सेकंड का उत्तर
मैं ट्रिगर को एक एंकर और टूलटिप को क्रमबद्ध position-try फ़ॉलबैक के साथ एक एंकर-पोज़िशन्ड कंटेनर बनाऊंगा। प्रत्येक फ़ॉलबैक एरो, पैडिंग और अधिकतम ऊंचाई को बदलने के लिए एक एंकर्ड कंटेनर क्वेरी का उपयोग करता है; आंतरिक शैलियाँ केवल घटक कंटेनर पर निर्भर करती हैं। फीचर डिटेक्शन के लिए @supports का उपयोग करें, जिसमें एक्सेसिबल डिस्क्रिप्शन संबंध को बनाए रखते हुए स्टैटिक या मौजूदा जावास्क्रिप्ट पोज़िशनिंग को फ़ॉलबैक के रूप में उपयोग किया जाए। व्यूपोर्ट किनारों, ज़ूम, स्क्रॉल कंटेनर और लंबे टेक्स्ट का परीक्षण करें ताकि यह साबित हो सके कि कोई ओवरफ़्लो या फ़ोकस क्लिपिंग नहीं है।
चरण-दर-चरण विस्तृत विश्लेषण
एंकर और उम्मीदवार पोज़िशन्स स्थापित करें
ट्रिगर पर anchor-name घोषित करें और टूलटिप को position-anchor और inset/anchor() के साथ कनेक्ट करें। घटक तर्क में दिशा को हार्ड-कोड करने के बजाय position-try फ़ॉलबैक के साथ उम्मीदवार क्रम का वर्णन करें।
पॉपओवर को एक क्वेरी कंटेनर बनाएं
container-type सेट करें ताकि पॉपओवर के अंदर एक एंकर्ड कंटेनर क्वेरी चयनित फ़ॉलबैक के अनुकूल हो सके। व्यूपोर्ट चौड़ाई से अनुमान लगाने के बजाय एंकर किए गए परिणाम से जुड़ी कंटेनर स्थिति को क्वेरी करें।
एरो और स्क्रॉलिंग को सिंक्रनाइज़ करें
प्रत्येक प्लेसमेंट के लिए अलग-अलग एरो किनारों, transform-origin, max-block-size और overflow का उपयोग करें। लंबी सामग्री पॉपओवर के अंदर स्क्रॉल होती है; टूलटिप को व्यूपोर्ट के बाहर विस्तारित नहीं होना चाहिए या कीबोर्ड फ़ोकस को क्लिप नहीं करना चाहिए।
बार-बार उपयोग किए जाने वाले इंस्टेंसेस को अलग करें
प्रत्येक इंस्टेंस को उसका अपना एंकर नाम या नामकरण स्कोप दें ताकि सूची का कोई आइटम दूसरे इंस्टेंस के एंकर से मेल न खाए। स्टैकिंग, position-area और स्क्रिम नियमों को स्थानीय रखें।
फीचर पहचानें और डिग्रेड करें
@supports (anchor-name: --x) और आवश्यक कंटेनर-क्वेरी क्षमता के साथ समर्थन का पता लगाएं। एक फ़ॉलबैक आसन्न स्टैटिक सामग्री या मौजूदा जावास्क्रिप्ट पोज़िशनर का उपयोग कर सकता है, लेकिन यह aria-describedby, कीबोर्ड डिस्मिसल और फ़ोकस क्रम को बनाए रखता है।
सीमाओं और एक्सेसिबिलिटी को सत्यापित करें
संकीर्ण व्यूपोर्ट, ज़ूम, RTL, स्क्रॉल कंटेनर, टच और रिड्यूस्ड मोशन का परीक्षण करें। यह सुनिश्चित करने के लिए कि फ़ॉलबैक प्लेसमेंट बदलने पर टूलटिप फ़ोकस न छीने, कटे नहीं या पढ़ने योग्य न रहे, कीबोर्ड और स्क्रीन रीडर का उपयोग करें।
मॉडल उत्तर
मैं ट्रिगर को एक एंकर के रूप में घोषित करूंगा, टूलटिप को एक कंटेनर बनाऊंगा, और क्रमबद्ध position-try फ़ॉलबैक प्रदान करूंगा। पॉपओवर के अंदर एक एंकर्ड कंटेनर क्वेरी वास्तविक प्लेसमेंट के अनुसार एरो, पैडिंग, अधिकतम ऊंचाई और स्क्रॉल दिशा को अनुकूलित करती है; प्रत्येक इंस्टेंस अपने एंकर नाम और स्टैकिंग नियमों को अलग रखता है। @supports प्रोग्रेसिव एन्हांसमेंट प्रदान करता है, जबकि असमर्थित ब्राउज़र समान aria-describedby, कीबोर्ड डिस्मिसल और फ़ोकस क्रम के साथ स्टैटिक या मौजूदा जावास्क्रिप्ट पोज़िशनिंग का उपयोग करते हैं। संकीर्ण व्यूपोर्ट, ज़ूम, RTL, स्क्रॉल कंटेनर, लंबे टेक्स्ट और स्क्रीन रीडर का परीक्षण करें।
सामान्य गलतियां
- वास्तविक प्लेसमेंट का जवाब देने के बजाय जावास्क्रिप्ट में व्यूपोर्ट चौड़ाई से फ़ॉलबैक का अनुमान लगाना।
- प्रत्येक टूलटिप में एक ही एंकर नाम साझा करना और इंस्टेंसेस को एक साथ जोड़ना।
- एरो, स्क्रॉल या transform-origin को सिंक्रनाइज़ किए बिना top/left बदलना।
@supportsको छोड़ देना और असमर्थित ब्राउज़रों को अनुपयोगी पॉपओवर के साथ छोड़ देना।- केवल सामान्य व्यूपोर्ट का परीक्षण करना और RTL, ज़ूम, स्क्रॉल कंटेनर और कीबोर्ड फ़ोकस की उपेक्षा करना।
- बिना स्पष्ट एक्सेसिबल सेमेंटिक्स के टूलटिप को डायलॉग मानना।
फॉलो-अप प्रश्न
एंकर्ड कंटेनर क्वेरी सामान्य कंटेनर क्वेरी से किस प्रकार भिन्न है?
यह एंकर-पोज़िशन्ड एलिमेंट के फ़ॉलबैक प्लेसमेंट से शैलियों का चयन करती है; एक सामान्य कंटेनर क्वेरी मुख्य रूप से कंटेनर आकार या शैली स्थितियों का उपयोग करती है।
एंकर पोज़िशनिंग असमर्थित होने पर क्या होता है?
उसी एक्सेसिबल नाम, डिस्मिसल और सामग्री क्रम के साथ आसन्न स्टैटिक लेआउट या मौजूदा जावास्क्रिप्ट पोज़िशनर का उपयोग करें; आंशिक सिंटैक्स पथ पर निर्भर न रहें।
आप पॉपओवर को फ़ोकस को ढकने से कैसे रोकते हैं?
इसके आकार को सीमित करें और आंतरिक रूप से स्क्रॉल करें, फिर Tab, Escape, स्क्रीन रीडर और स्क्रॉल पैरेंट का परीक्षण करें ताकि फ़ोकस किए गए तत्व दिखाई देते रहें।
चार दिशात्मक मीडिया क्वेरीज़ का उपयोग क्यों न करें?
मीडिया क्वेरीज़ व्यूपोर्ट का वर्णन करती हैं, वास्तविक एंकर और कंटेनर स्थान का नहीं; फ़ॉलबैक स्क्रॉल कंटेनर, फ़ॉन्ट और सामग्री की लंबाई पर भी निर्भर करते हैं।