संकेत और दायरा (Prompt and scope)
एक सूची में दोहराए गए कार्ड हैं। प्रत्येक कार्ड में एक ट्रिगर और एक निरपेक्ष रूप से स्थित (absolutely positioned) टूलटिप होता है। ट्रिगर समान anchor-name का उपयोग करता है, और टूलटिप इसे position-anchor के साथ संदर्भित करता है; प्रत्येक टूलटिप दस्तावेज़ में समान नाम वाले अंतिम एंकर के साथ संरेखित होता है। नामकरण दायरा, घटक सीमाएं, फ़ॉलबैक और परीक्षण डिज़ाइन करें।
इस बात पर ध्यान केंद्रित करें कि anchor-scope स्पष्ट नामित-एंकर (explicit named-anchor) लुकअप को कैसे सीमित करता है। यह Shadow DOM आइसोलेशन नहीं है, और प्रत्येक ब्राउज़र अभी तक इस Baseline 2026 सुविधा का समर्थन नहीं करता है।
साक्षात्कारकर्ता क्या परीक्षण कर रहा है
- समझाएं कि एक बिना स्कोप वाला समान-नाम का एंकर स्रोत क्रम (source order) द्वारा क्यों हल (resolve) हो सकता है।
none,allऔर dashed-ident नामों की सूची के बीच अंतर स्पष्ट करें।- अंतर्निहित (implicit) एंकर, शैडो ट्री, ओवरफ़्लो फ़ॉलबैक और असमर्थित ब्राउज़रों को संभालें।
- नियम को एक पुन: प्रयोज्य (reusable) घटक अनुबंध, परीक्षण योग्य DOM और देखने योग्य (observable) फ़ॉलबैक में बदलें।
स्पष्टीकरण हेतु प्रश्न
- क्या टूलटिप को कार्ड के पूर्वज (ancestor) को पार करना चाहिए, या इसे कार्ड सबट्री के अंदर रहना चाहिए?
- क्या घटक नेस्ट हो सकते हैं, Shadow DOM का उपयोग कर सकते हैं, या टूलटिप को कहीं और पोर्टल (portal) कर सकते हैं?
- पुराने ब्राउज़रों को किस अनुभव को संरक्षित रखना चाहिए?
- क्या एंकर नाम किसी डिज़ाइन सिस्टम द्वारा जनरेट किए जाते हैं या प्रति पेज हस्तलिखित (handwritten) होते हैं?
- कौन से ओवरफ़्लो, कीबोर्ड-फ़ोकस और रीसाइज़ मामले आवश्यक हैं?
30-सेकंड का उत्तर
“समान एंकर नाम की कोई दृश्यता सीमा नहीं होती है, इसलिए एक स्थित तत्व स्रोत क्रम में अंतिम मिलान वाले एंकर को हल कर सकता है। मैं एक कार्ड कंटेनर को स्कोप रूट के रूप में सेट करता हूं और anchor-scope: --card-anchor का उपयोग करता हूं, या all का उपयोग करता हूं जब प्रत्येक आंतरिक नाम को अलग किया जाना चाहिए, ताकि टूलटिप उस सबट्री के भीतर हल हो। मैं @supports में एन्हांसमेंट नियमों को रैप करता हूं और रिलेटिव-कंटेनर प्लस एब्सोल्यूट पोज़िशनिंग पर फ़ॉलबैक करता हूं। परीक्षण नेस्टिंग, पोर्टल्स, ओवरफ़्लो, कीबोर्ड व्यवहार और विभिन्न समर्थन वाले ब्राउज़रों को कवर करते हैं। मैं घटक अनुबंध के हिस्से के रूप में नाम और DOM सीमा का दस्तावेजीकरण करता हूं।”
चरण-दर-चरण डिज़ाइन
1. गलत जुड़ाव का निदान करें
anchor-name और position-anchor एक स्पष्ट जुड़ाव बनाते हैं। कई समान-नाम वाले एंकरों और बिना किसी स्कोप के, एक स्थित तत्व स्रोत क्रम में अंतिम मिलान वाले एंकर को हल कर सकता है, इसलिए दोहराए गए टूलटिप्स एक साथ स्टैक हो जाते हैं। आकार या स्टैकिंग संदर्भ को दोष देने से पहले DevTools में गणना किए गए एंकर, DOM क्रम और कंटेनिंग ब्लॉक का निरीक्षण करें।
2. एक स्कोप सीमा चुनें
चुने गए नामों के लुकअप को उस तत्व के सबट्री तक सीमित करने के लिए प्रत्येक कार्ड कंटेनर पर anchor-scope सेट करें। all सबट्री में एंकर नामों को कवर करता है; --card-anchor केवल उस नाम को सीमित करता है, जिससे अन्य नाम क्रॉस-कंपोनेंट जुड़ाव के लिए उपलब्ध रहते हैं। स्कोप अंतर्निहित एंकरों को सीमित नहीं करता है या सामान्य शैली या इनहेरिटेंस आइसोलेशन के रूप में कार्य नहीं करता है।
.card {
anchor-scope: --card-anchor;
}
.card__trigger {
anchor-name: --card-anchor;
}
.card__tip {
position: absolute;
position-anchor: --card-anchor;
position-area: block-end;
}3. घटक नामकरण अनुबंध को परिभाषित करें
एंकर नाम को एक आंतरिक घटक इंटरफ़ेस के रूप में मानें। रूट, एंकर और स्थित तत्व को अपेक्षित सबट्री में रहना चाहिए, और मनमाने पूर्वजों को स्कोप को ओवरराइड नहीं करना चाहिए। नेस्टिंग के लिए, प्रति स्तर नाम चुनें या आंतरिक घटक के अंदर स्कोप रीसेट करें। घटक परीक्षणों या Storybook में DOM अनुबंध का दावा (assert) करें।
4. क्षमता पहचान (capability detection) और फ़ॉलबैक जोड़ें
MDN anchor-scope को Baseline 2026 के रूप में चिह्नित करता है, लेकिन पुराने ब्राउज़र इसे लागू नहीं कर सकते हैं। एन्हांसमेंट नियमों को @supports (anchor-scope: all) के पीछे रखें। समर्थन के बिना, एब्सोल्यूट इनसेट के साथ एक रिलेटिव कंटेनर, JavaScript ज्यामिति (geometry), या मौजूदा टूलटिप घटक का उपयोग करें। फ़ॉलबैक में फ़ोकस क्रम, सुलभ नाम (accessible names) और गैर-अस्पष्ट (non-obscured) सामग्री को सुरक्षित रखें।
5. पोर्टल, Shadow DOM और अंतर्निहित एंकर का मूल्यांकन करें
एंकर स्कोप स्पष्ट नामित-एंकर जुड़ाव को प्रभावित करता है। यदि किसी टूलटिप को कार्ड के बाहर पोर्टल किया जाता है, तो यह स्कोप सबट्री को छोड़ सकता है; इसके बजाय एक अद्वितीय नाम का उपयोग करें, ज्यामिति पास करें, या मौजूदा पोज़िशनिंग पथ को बनाए रखें। शैडो ट्री का अपना ट्री स्कोप होता है और उन्हें सीमा परीक्षणों की आवश्यकता होती है। प्रत्येक अंतर्निहित-एंकर मामले के समाधान के रूप में anchor-scope का उपयोग न करें।
6. परीक्षण और निरीक्षण करें
एकाधिक कार्ड, नेस्टेड कार्ड, डायनामिक प्रविष्टि, पुनर्क्रमण (reordering), रीसाइज़, स्क्रॉल, ज़ूम, कीबोर्ड फ़ोकस और पोर्टल्स का परीक्षण करें। प्रत्येक टूलटिप की ज्यामिति, ओवरफ़्लो, एक्सेसिबिलिटी ट्री और फ़ॉलबैक दर का दावा करें। उपयोगकर्ता इनपुट को लॉग किए बिना क्षमता पहचान और पोज़िशनिंग त्रुटियों को लॉग करें।
मॉडल उच्च-गुणवत्ता वाला उत्तर
“बिना स्कोप के, एक समान-नाम वाला एंकर स्रोत क्रम में अंतिम तत्व के लिए हल हो सकता है, इसलिए दोहराए गए टूलटिप्स ओवरलैप होते हैं। मैं कार्ड रूट पर anchor-scope: --card-anchor, ट्रिगर पर anchor-name, और टूलटिप पर position-anchor सेट करता हूं ताकि स्पष्ट लुकअप को कार्ड सबट्री तक सीमित किया जा सके। यदि सभी आंतरिक नामों को अलग किया जाना चाहिए, तो मैं all का उपयोग करता हूं; यह अंतर्निहित एंकरों या सामान्य CSS इनहेरिटेंस को प्रभावित नहीं करता है। पुराने ब्राउज़रों को रिलेटिव-कंटेनर पोज़िशनिंग और मौजूदा टूलटिप पथ के लिए एक @supports फ़ॉलबैक मिलता है। मैं नेस्टिंग, पोर्टल्स, Shadow DOM, ओवरफ़्लो, रीसाइज़, कीबोर्ड फ़ोकस और पुनर्क्रमण संचालन का परीक्षण करता हूं, और घटक अनुबंध में नाम और DOM सीमाओं का दस्तावेजीकरण करता हूं।”
सामान्य गलतियाँ
- प्रत्येक तत्व को एक अलग एंकर नाम देना → घटक को स्पष्ट रूप से पुन: उपयोग नहीं किया जा सकता है → दोहराए गए नाम को स्कोप करें।
allको Shadow DOM के रूप में मानना → इनहेरिटेंस, पोर्टल्स और ट्री स्कोप अभी भी भिन्न हैं → लुकअप और स्टाइल सीमाओं का अलग से परीक्षण करें।- स्रोत क्रम को अनदेखा करना → एकल अंतिम-कार्ड परीक्षण बग को छुपाता है → एकाधिक कार्ड और पुनर्क्रमण का परीक्षण करें।
- कोई फ़ॉलबैक प्रदान न करना → पुराने ब्राउज़र टूलटिप प्लेसमेंट खो देते हैं →
@supportsऔर मौजूदा एब्सोल्यूट या JavaScript पथ का उपयोग करें। - किसी अंतर्निहित एंकर पर स्कोप लागू करना → नियम का कोई इच्छित प्रभाव नहीं होता है → पुष्टि करें कि जुड़ाव स्पष्ट है या अंतर्निहित।
अनुवर्ती प्रश्न और उत्तर
आप एक नामित मान के मुकाबले anchor-scope: all कब चुनते हैं?
all का उपयोग तब करें जब घटक के अंदर प्रत्येक एंकर नाम केवल उस कार्ड के भीतर ही हल होना चाहिए। --card-anchor का उपयोग तब करें जब एक नाम को आइसोलेशन की आवश्यकता हो लेकिन अन्य नामों को सीमाओं के पार उपलब्ध रहना चाहिए। घटक के DOM अनुबंध के साथ दोनों का परीक्षण करें।
क्या टूलटिप को कार्ड सबट्री के अंदर रहना चाहिए?
नहीं। एक पोर्टल या ग्लोबल ओवरले स्कोप सबट्री को छोड़ सकता है और कार्ड एंकर तक पहुंच खो सकता है। ओवरले को गलत DOM लेयर में जबरन डालने के बजाय उसे एक अद्वितीय एंकर नाम दें, ज्यामिति पास करें, या JavaScript पोज़िशनिंग बनाए रखें।
क्या यह प्रॉपर्टी प्रत्येक उत्पाद के लिए तैयार है?
MDN इसे Baseline 2026 के रूप में लेबल करता है, जबकि W3C CSS Anchor Positioning Level 1 एक Working Draft बना हुआ है। लक्षित ब्राउज़र मैट्रिक्स की जांच करें और प्रोग्रेसिव एन्हांसमेंट के लिए क्षमता परीक्षणों के साथ @supports का उपयोग करें।