फ्रंटएंड इंटरव्यू: CSS Anchor Positioning मॉडल और प्रिमिटिव्स

1. प्रॉम्प्ट और उपयोग का मामला (Use Case)

एक प्राइस एनोटेशन किसी प्रोडक्ट कार्ड को फॉलो करता है। इसका इनलाइन स्टार्ट कार्ड के कंटेंट स्टार्ट के साथ अलाइन होता है, और इसका इनलाइन साइज़ कार्ड से मेल खाता है। यह संबंध लेफ्ट-टू-राइट, राइट-टू-लेफ्ट और वर्टिकल राइटिंग मोड्स में भी सही रहना चाहिए। एक लिस्ट कई कार्ड-और-एनोटेशन पेयर्स को रेंडर करती है, जबकि दूसरा व्यू दो अलग-अलग एंडपॉइंट्स के बीच एक रेंज मार्कर को स्ट्रेच करता है।

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

2. इंटरव्यूअर क्या टेस्ट कर रहा है

• क्या आप समझते हैं कि anchor-name एक एंकर को एक्सपोज़ करता है और position-anchor एक पोज़ीशन्ड एलिमेंट के लिए डिफ़ॉल्ट एंकर चुनता है।
• क्या आप anchor(), जो पोज़ीशन रिज़ॉल्व करता है, और anchor-size(), जो लेंथ रिज़ॉल्व करता है, के बीच अंतर करते हैं।
• क्या आप सब कुछ left और right पर फ़िक्स करने के बजाय राइटिंग-मोड सपोर्ट के लिए लॉजिकल इनसेट्स और लॉजिकल साइज़ का उपयोग करते हैं।
• क्या आप जानते हैं कि सोर्स ऑर्डर, ट्री स्कोप और anchor-scope समान-नाम मिलान (same-name matching) को प्रभावित करते हैं।
• क्या आप पोज़ीशन्ड एलिमेंट के कंटेनिंग ब्लॉक का निरीक्षण करते हैं क्योंकि एंकर वैल्यूज़ अभी भी सामान्य पोज़ीशनिंग कैलकुलेशन्स में भाग लेती हैं।

3. पहले पूछे जाने वाले स्पष्टीकरण प्रश्न (Clarifying Questions)

1. क्या टारगेट position: absolute है या position: fixed, और कौन सा एलिमेंट इसका कंटेनिंग ब्लॉक स्थापित करता है?
2. क्या संबंध वन-टू-वन है, कई टारगेट्स से एक एंकर, या एक टारगेट से कई एंकर हैं?
3. क्या पेज समान नामों वाले कंपोनेंट्स को दोहराता है या Shadow DOM जैसी ट्री बाउंड्री को पार करता है?
4. क्या कंपोनेंट को राइट-टू-लेफ्ट और वर्टिकल राइटिंग मोड्स को सपोर्ट करना चाहिए? क्या इसे फिजिकल विड्थ को कॉपी करना चाहिए या लॉजिकल इनलाइन साइज़ को?
5. यदि नामित एंकर गायब है या वर्तमान संदर्भ में अस्वीकार्य है, तो कौन सी सामान्य पोज़ीशनिंग वैल्यू लागू होनी चाहिए?

4. एक 30-सेकंड उत्तर का ढांचा (Answer Framework)

सोर्स एलिमेंट को anchor-name के साथ एक डैश्ड आइडेंटिफ़ायर दें, फिर टारगेट को absolute या fixed बनाएं और position-anchor के साथ उस सोर्स को चुनें। एंकर एज (edge) को पढ़ने के लिए anchor() का उपयोग करें और फिजिकल या लॉजिकल डायमेंशन पढ़ने के लिए anchor-size() का उपयोग करें; टारगेट के इनसेट्स अभी भी अपने स्वयं के कंटेनिंग ब्लॉक के भीतर रिज़ॉल्व होते हैं। राइटिंग-मोड सपोर्ट के लिए inset-inline-*, inset-block-*, और inline-size का उपयोग करें। दोहराए गए नामों को anchor-scope के साथ स्कोप करें, और जब एक टारगेट कई सोर्सेस पर निर्भर हो तो फ़ंक्शन्स के अंदर एंकरों को स्पष्ट रूप से नाम दें।

5. एंकर से फ़ाइनल लेआउट तक

स्टेप 1: एक स्पष्ट एंकर संबंध स्थापित करें

सोर्स anchor-name के माध्यम से एक या अधिक नामों को एक्सपोज़ करता है। इससे पहले कि position-anchor अपने डिफ़ॉल्ट एंकर का चयन कर सके, टारगेट का एब्सोल्यूटली या फ़िक्स्ड पोज़ीशन्ड होना आवश्यक है:

.product-card {
  anchor-name: --product-card;
}

.price-note {
  position: absolute;
  position-anchor: --product-card;
}

position-anchor केवल डिफ़ॉल्ट रेफरेंस स्थापित करता है। यह कोई इनसेट सेट नहीं करता है या टारगेट के कंटेनिंग ब्लॉक को रिप्लेस नहीं करता है। यदि नाम किसी स्वीकार्य एंकर में रिज़ॉल्व नहीं हो पाता है, तो निर्भर फ़ंक्शन्स अपने फ़ॉलबैक का उपयोग करते हैं या अमान्य हो जाते हैं, इसलिए सामान्य पोज़ीशनिंग फ़ॉलबैक को अभी भी एक पूर्वानुमेय (predictable) परिणाम की आवश्यकता होती है।

स्टेप 2: anchor() के साथ पोज़ीशन पढ़ें

anchor() एक इनसेट प्रॉपर्टी के लिए एक लेंथ देता है, जो एक टारगेट एज को एंकर एज से जोड़ता है। लॉजिकल इनसेट्स एक ही नियम को विभिन्न राइटिंग मोड्स का पालन करने की अनुमति देते हैं:

.price-note {
  position: absolute;
  position-anchor: --product-card;
  inset-block-start: anchor(end);
  inset-inline-start: anchor(start);
}

यहाँ, start और end प्रासंगिक एक्सिस पर रिज़ॉल्व होते हैं। डिफ़ॉल्ट एंकर के अलावा किसी अन्य चीज़ को रेफरेंस करने के लिए, उसका नाम सीधे फ़ंक्शन में रखें, जैसे anchor(--sidebar end)। स्पष्ट नाम एक टारगेट पर विभिन्न प्रॉपर्टीज़ को विभिन्न सोर्सेस पर निर्भर होने की अनुमति देते हैं।

स्टेप 3: anchor-size() के साथ साइज़ संबंध बनाएं

anchor-size() एक फिजिकल या लॉजिकल डायमेंशन लौटाता है, कोई कोऑर्डिनेट नहीं। एक एनोटेशन कार्ड की लॉजिकल विड्थ को इस तरह कॉपी कर सकता है:

.price-note {
  inline-size: anchor-size(inline);
  max-inline-size: min(32rem, anchor-size(inline));
}

width और height स्पष्ट रूप से फिजिकल संबंधों में फिट होते हैं; inline और block उन कंपोनेंट्स में फिट होते हैं जो राइटिंग मोड का पालन करते हैं। फ़ंक्शन calc() में भी भाग ले सकता है, उदाहरण के लिए एंकर के इनलाइन साइज़ के हिस्से से स्पेसिंग प्राप्त करने के लिए। यह केवल एक लेंथ की आपूर्ति करता है; एलिमेंट की पोज़ीशन अभी भी एब्सोल्यूट-पोज़ीशनिंग नियमों का पालन करती है।

स्टेप 4: एक से अधिक एंकरों को रेफरेंस करें

एक रेंज मार्कर स्टार्ट को अपने डिफ़ॉल्ट एंकर के रूप में जोड़ सकता है जबकि दूसरे इनसेट में एंड को स्पष्ट रूप से पढ़ सकता है:

.range-start { anchor-name: --range-start; }
.range-end { anchor-name: --range-end; }

.range-band {
  position: absolute;
  position-anchor: --range-start;
  inset-inline-start: anchor(--range-start center);
  inset-inline-end: anchor(--range-end center);
}

पोज़ीशन्ड एलिमेंट में अभी भी position-anchor के माध्यम से केवल एक संबद्ध डिफ़ॉल्ट एंकर होता है; अन्य नाम anchor() के माध्यम से पोज़ीशन कैलकुलेशन्स में भाग ले सकते हैं। वह डिफ़ॉल्ट एसोसिएशन स्क्रॉल अटैचमेंट जैसे व्यवहार को भी प्रभावित करता है। दोनों इनसेट वैल्यूज़ टारगेट के कंटेनिंग-ब्लॉक समीकरण में प्रवेश करती हैं, इसलिए डिज़ाइन को गायब, क्रॉस्ड या अस्वीकार्य एंकरों के लिए फ़ॉलबैक को परिभाषित करना चाहिए।

स्टेप 5: दोहराए गए एंकर नामों को स्कोप करें

यदि प्रत्येक दोहराया गया कंपोनेंट --item घोषित करता है, तो एक अनस्कोप वाला पोज़ीशन्ड एलिमेंट सोर्स ऑर्डर में अंतिम स्वीकार्य एंकर से मेल खा सकता है। anchor-scope उसी नाम को एक कंपोनेंट सबट्री तक सीमित करता है:

.result-row {
  anchor-scope: --item;
}

.result-row__value { anchor-name: --item; }
.result-row__note {
  position: absolute;
  position-anchor: --item;
  inset-inline-start: anchor(end);
}

यह नाम की विजिबिलिटी को नियंत्रित करता है। यह ट्री स्कोप्स के पार रेफरेंस को बाध्य नहीं कर सकता है, और यह कोई कंटेनिंग ब्लॉक स्थापित नहीं करता है। कंपोनेंट को अभी भी एक जानबूझकर पोज़ीशन्ड किए गए पूर्वज (ancestor) की आवश्यकता होती है।

स्टेप 6: मॉडल में कंटेनिंग ब्लॉक को शामिल करें

anchor() द्वारा लौटाई गई पोज़ीशन को टारगेट इनसेट द्वारा उपयोग करने योग्य लेंथ में बदल दिया जाता है, लेकिन टारगेट अभी भी अपने स्वयं के एब्सोल्यूट-पोज़ीशनिंग कंटेनिंग ब्लॉक द्वारा लेआउट किया जाता है। absolute और fixed के बीच स्विच करना, टारगेट को DOM में ले जाना, या किसी पूर्वज पर एक नया पोज़ीशनिंग संदर्भ स्थापित करना परिणाम बदल सकता है। जब प्लेसमेंट गलत हो, तो एंकर मैचिंग को डीबग करने से पहले टारगेट के कंटेनिंग ब्लॉक का निरीक्षण करें।

6. उच्च गुणवत्ता वाला नमूना उत्तर

Anchor Positioning सबसे पहले एक सोर्स एलिमेंट को एक पोज़ीशन्ड टारगेट से जोड़ता है। सोर्स anchor-name के साथ एक नाम घोषित करता है; एक absolute या fixed टारगेट position-anchor के साथ अपने डिफ़ॉल्ट सोर्स का चयन करता है। anchor() एक इनसेट को पोज़ीशन प्रदान करता है, जबकि anchor-size() एक फिजिकल या लॉजिकल डायमेंशन प्रदान करता है। मैं राइट-टू-लेफ्ट या वर्टिकल राइटिंग के लिए लॉजिकल इनसेट्स और inline-size का उपयोग करता हूं। एक टारगेट जिसे दो सोर्सेस की आवश्यकता होती है, वह एक डिफ़ॉल्ट एसोसिएशन का चयन करता है और संबंधित anchor() के अंदर प्रत्येक सोर्स को नाम देता है; दोहराए गए लिस्ट कंपोनेंट्स एक ही नाम को अलग करने के लिए anchor-scope का उपयोग करते हैं। मैं टारगेट के कंटेनिंग ब्लॉक को भी सत्यापित करता हूं, क्योंकि एंकर फ़ंक्शन्स एब्सोल्यूट-पोज़ीशनिंग मॉडल को बायपास नहीं करते हैं।

7. सामान्य गलतियाँ

• केवल anchor-name घोषित करना और मूवमेंट की उम्मीद करना → अभी तक कोई पोज़ीशन्ड संबंध मौजूद नहीं है → टारगेट को absolute या fixed बनाएं और नाम को रेफरेंस करें।
• anchor() को साइज़िंग फ़ंक्शन के रूप में मानना → पोज़ीशन और डायमेंशन की जिम्मेदारियां भ्रमित हो जाती हैं → एजेस के लिए anchor() और डायमेंशन्स के लिए anchor-size() का उपयोग करें।
• left और width को हार्ड-कोड करना → राइट-टू-लेफ्ट या वर्टिकल राइटिंग इच्छित संबंध को उलट देती है → लॉजिकल इनसेट्स और लॉजिकल साइज़ चुनें।
• स्कोप के बिना लिस्ट आइटम्स में एक नाम का पुन: उपयोग करना → टारगेट्स उसी नाम वाले अंतिम एंकर को फॉलो करते हैं → प्रत्येक कंपोनेंट कंटेनर पर anchor-scope सेट करें।
• anchor-scope को कंटेनिंग ब्लॉक के रूप में मानना → मैचिंग सही है लेकिन कोऑर्डिनेट्स अभी भी गलत हैं → पोज़ीशन्ड पूर्वज का अलग से निरीक्षण करें।
• मल्टी-एंकर टारगेट के लिए एक डिफ़ॉल्ट position-anchor सेट करना → अन्य प्रॉपर्टीज़ अभी भी गलत सोर्स को पढ़ती हैं → प्रत्येक सोर्स को उसके anchor() में स्पष्ट रूप से नाम दें।

8. फॉलो-अप प्रश्न और उत्तर

फॉलो-अप 1: anchor() और position-area में क्या अंतर है?

anchor() एक विशिष्ट एंकर एज को एक इनसेट के लिए लेंथ में बदल देता है, जो सटीक एज-टू-एज संबंधों के लिए उपयोगी है। position-area टारगेट को एंकर पर केंद्रित एक एरिया ग्रिड में रखता है, जो एक व्यापक प्लेसमेंट क्षेत्र को व्यक्त करता है। वे एक ही मॉडल से संबंधित हैं लेकिन विभिन्न स्तरों पर समाधान करते हैं।

फॉलो-अप 2: क्या anchor-size() टारगेट को एंकर मूवमेंट को फॉलो करने के लिए बाध्य करता है?

नहीं। यह एक लेंथ की गणना करता है। पोज़ीशन ट्रैकिंग anchor(), position-area, या किसी अन्य पोज़ीशनिंग नियम से आती है। केवल inline-size: anchor-size(inline) सेट करने से लॉजिकल साइज़ सिंक्रनाइज़ होता है, लोकेशन नहीं।

फॉलो-अप 3: क्या होता है जब कई एलिमेंट्स एक ही anchor-name साझा करते हैं?

टारगेट मैचिंग नियमों के अनुसार एक स्वीकार्य एंकर का चयन करता है, इसलिए दोहराए गए कंपोनेंट्स सभी बाद के समान-नाम वाले सोर्स में रिज़ॉल्व हो सकते हैं। प्रत्येक कंपोनेंट के अंदर नाम को anchor-scope के साथ स्कोप करें, या इंस्टेंसेस को स्पष्ट विशिष्ट नाम दें।

फॉलो-अप 4: एंकर के सही होने पर भी टारगेट ऑफ़सेट क्यों हो सकता है?

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