प्रॉम्प्ट और दायरा
एक रिस्पॉन्सिव कार्ड लिस्ट में CMS द्वारा एलिमेंट्स जोड़े और हटाए जाते हैं। प्रत्येक कार्ड को सिबलिंग काउंट से अपनी चौड़ाई की गणना करनी चाहिए और अपनी पोज़ीशन के आधार पर एनिमेशन में देरी (delay) करनी चाहिए, साथ ही एक वास्तविक एक्सेसिबल पोज़ीशन को भी बनाए रखना चाहिए। sibling-index() और sibling-count() के लिए सिमेंटिक्स, सीमाओं, फ़ॉलबैक और वेरिफिकेशन की व्याख्या करें।
इंटरव्यूअर क्या टेस्ट कर रहा है
- क्या आप जानते हैं कि दोनों फ़ंक्शंस फ़्लैट ट्री पर 1-बेस्ड इंडेक्स के साथ इंटीजर्स रिटर्न करते हैं।
- क्या आप विज़ुअल CSS ऑर्डर को DOM और एक्सेसिव-टेक्नोलॉजी ऑर्डर से अलग रखते हैं।
- क्या आप Limited availability,
@supports, स्टैटिक फ़ॉलबैक और परफ़ॉर्मेंस को ध्यान में रखते हैं। - क्या आप Shadow DOM, स्यूडो-एलिमेंट्स, छिपे हुए नोड्स और डायनेमिक लिस्ट्स को कवर करते हैं।
पूछने के लिए स्पष्टीकरण संबंधी प्रश्न
- क्या लक्ष्य विज़ुअल चौड़ाई है, एनिमेशन टाइमिंग है, या ऐसी पोज़ीशन है जिसे उपयोगकर्ताओं को सुनना चाहिए? इनके फ़ॉलबैक अलग होते हैं।
- क्या छिपे हुए (hidden), टेम्पलेट, या वर्चुअलाइज़्ड नोड्स मौजूद हैं, और क्या वे डायरेक्ट फ़्लैट-ट्री चिल्ड्रेन हैं?
- कौन सा ब्राउज़र सपोर्ट दायरा और JavaScript फ़ॉलबैक पॉलिसी लागू होती है?
- क्या Shadow DOM, स्लॉट्स, या CSS काउंटर्स शामिल हैं?
30-सेकंड उत्तर फ़्रेमवर्क
sibling-count() कुल डायरेक्ट-चाइल्ड काउंट रिटर्न करता है और sibling-index() एलिमेंट की 1-बेस्ड पोज़ीशन रिटर्न करता है; स्पेसिफिकेशन फ़्लैट ट्री का उपयोग करता है। वे calc(), ग्रिड चौड़ाई, या एनिमेशन डिले को संचालित कर सकते हैं, लेकिन वे एक्सेसिबल टेक्स्ट का विश्वसनीय स्रोत नहीं हैं। पहले एक फ़िक्स्ड CSS फ़ॉलबैक दें, फिर @supports के साथ संवर्धित (enhance) करें; पोज़ीशन के लिए सिमेंटिक HTML या टेस्टेड काउंटर का उपयोग करें। इंसर्शन, रिमूवल, स्लॉट्स, छिपे हुए नोड्स, असमर्थित ब्राउज़र्स और prefers-reduced-motion का परीक्षण करें।
चरण-दर-चरण गहन विश्लेषण
1. रिटर्न किए गए मानों की पुष्टि करें
दोनों फ़ंक्शंस इंटीजर्स रिटर्न करते हैं। sibling-count() में स्वयं एलिमेंट शामिल होता है, और sibling-index() 1 से शुरू होता है। वे फ़्लैट ट्री में पैरेंट के डायरेक्ट चिल्ड्रेन की गिनती करते हैं; मनमाने डिसेंडेंट्स और विज़ुअल ऑर्डर अलग अवधारणाएं हैं।
2. साइज़ और एनिमेशन के लिए इनका उपयोग करें
कार्ड्स उपलब्ध चौड़ाई को सिबलिंग काउंट से विभाजित कर सकते हैं, और एनिमेशन डिले पोज़ीशन के अनुसार बढ़ सकता है:
.card {
--count: sibling-count();
--index: sibling-index();
flex-basis: calc(100% / var(--count));
animation-delay: calc((var(--index) - 1) * 60ms);
}यह एक विज़ुअल गणना है, DOM ऑर्डर या बिज़नेस आइडेंटिफ़ायर का प्रतिस्थापन नहीं। डिवीज़न या अत्यधिक डिले से बचने के लिए खाली लिस्ट्स, एक आइटम और बहुत बड़ी संख्या के लिए सीमाएं (bounds) परिभाषित करें।
3. सपोर्ट और फ़ॉलबैक संभालें
MDN इन फ़ंक्शंस को Limited availability के रूप में चिह्नित करता है, इसलिए प्रोडक्शन CSS सपोर्ट मानकर नहीं चल सकता। एक फ़िक्स्ड या फ़्लेक्स लेआउट प्रदान करें, फिर @supports (width: calc(100% / sibling-count())) के साथ संवर्धित करें। जब किसी वास्तविक प्रोडक्ट आवश्यकता को डायनेमिक मानों की आवश्यकता होती है, तो JavaScript कस्टम प्रॉपर्टीज़ को अपडेट कर सकता है, लेकिन फ़र्स्ट पेंट और कंटेंट को इसके बिना काम करना चाहिए।
4. फ़्लैट ट्री, स्लॉट्स और छिपे हुए नोड्स
स्पेसिफिकेशन फ़्लैट ट्री पर सिबलिंग संबंधों को परिभाषित करता है; इसलिए Shadow DOM स्लॉट असाइनमेंट यह बदल देता है कि क्या टेस्ट किया जाना चाहिए। वास्तविक DOM का उपयोग करके सत्यापित करें कि क्या display: none, टेम्पलेट नोड्स और वर्चुअल-लिस्ट प्लेसहोल्डर्स डायरेक्ट चिल्ड्रेन हैं। विज़ुअल order से फ़ंक्शन के इंडेक्स का अनुमान न लगाएं।
5. एक्सेसिबिलिटी और सिमेंटिक्स
विज़ुअल चौड़ाई और डिले एक ऑडिबल (सुनाई देने योग्य) पोज़ीशन नहीं बनाते हैं। ol और li, या स्पष्ट aria-posinset और aria-setsize का उपयोग करें, और स्क्रीन-रीडर ऑर्डर को DOM के साथ संरेखित रखें। जब एनिमेशन या नए फ़ंक्शंस अक्षम हों, तो सजावटी CSS को कंटेंट को समझ से बाहर नहीं बनाना चाहिए।
6. डायनेमिक अपडेट और परफ़ॉर्मेंस
सिबलिंग इंसर्शन और रिमूवल कंप्यूटेड मानों को बदल देते हैं और स्टाइल रीकैलकुलेशन को ट्रिगर कर सकते हैं। एक छोटे डेमो पर भरोसा करने के बजाय हज़ारों नोड्स के लिए स्टाइल, लेआउट और एनिमेशन लागत को मापें। एक वर्चुअलाइज़्ड लिस्ट DOM साइज़ को सीमित करती है, लेकिन तब फ़ंक्शंस केवल विंडो को देखते हैं, पूरे डेटासेट को नहीं।
मॉडल उच्च-गुणवत्ता वाला उत्तर
मैं sibling-index() और sibling-count() को विज़ुअल-कैलकुलेशन फ़ीचर्स के रूप में मानूँगा: पहला एक 1-बेस्ड फ़्लैट-ट्री पोज़ीशन है और दूसरा डायरेक्ट-चाइल्ड काउंट है। वे कार्ड की चौड़ाई और एनिमेशन डिले को बढ़ा सकते हैं, जबकि सिमेंटिक पोज़ीशन ol, li या ARIA से आती है। एक फ़िक्स्ड लेआउट फ़ॉलबैक प्रदान करें और @supports के साथ एन्हांसमेंट को सुरक्षित करें। Shadow DOM, स्लॉट्स, छिपे हुए नोड्स और वर्चुअलाइज़ेशन के लिए वास्तविक DOM व्यवहार का परीक्षण करें। डायनेमिक और बड़ी लिस्ट्स के लिए स्टाइल रीकैलकुलेशन और लेआउट को मापें; बिना सपोर्ट के कंटेंट को उपयोग योग्य रखें और prefers-reduced-motion का सम्मान करें।
सामान्य गलतियाँ
- यूनिवर्सल सपोर्ट मान लेना → पुराने ब्राउज़र्स में स्टाइल खराब होना → एक फ़िक्स्ड लेआउट और
@supportsफ़ॉलबैक प्रदान करें। - विज़ुअल
orderसे इंडेक्स का अनुमान लगाना → CSS ऑर्डर फ़्लैट-ट्री ऑर्डर से भिन्न होता है → DOM और स्लॉट असाइनमेंट का परीक्षण करें। - CSS कैलकुलेशन को एक्सेसिबल पोज़ीशन के रूप में उपयोग करना → स्क्रीन रीडर्स को कोई पोज़ीशन नहीं मिलती → HTML सिमेंटिक्स या ARIA बनाए रखें।
- वर्चुअल विंडो को पूर्ण काउंट मानना → फ़ंक्शंस केवल वर्तमान DOM को देखते हैं → डेटा से कुल काउंट प्रदान करें।
- एनिमेशन डिले को बिना किसी सीमा के बढ़ने देना → प्रतीक्षा समय और रीकैलकुलेशन महंगा हो जाता है → इसे सीमित करें और reduced motion के लिए अक्षम करें।
फ़ॉलो-अप प्रश्न और उत्तर
क्या sibling-count() में डिसेंडेंट्स शामिल हैं?
नहीं। यह पैरेंट के डायरेक्ट चिल्ड्रेन की गणना करता है और इसमें वर्तमान एलिमेंट शामिल होता है; डिसेंडेंट्स भाग नहीं लेते हैं।
एक स्लॉटेड एलिमेंट का परीक्षण कैसे किया जाना चाहिए?
Shadow DOM लाइट ट्री, स्लॉट असाइनमेंट के बाद फ़्लैट ट्री और एक्सेसिबिलिटी ट्री का निरीक्षण करें। केवल सोर्स ऑर्डर की तुलना में ब्राउज़र-स्तरीय सत्यापन अधिक विश्वसनीय है।
क्या असमर्थित ब्राउज़रों के लिए JavaScript ही एकमात्र फ़ॉलबैक हो सकता है?
यह प्रोग्रेसिव एन्हांसमेंट हो सकता है, लेकिन बेस लेआउट और कंटेंट को बिना स्क्रिप्ट के काम करना चाहिए। कस्टम प्रॉपर्टीज़ को अपडेट करने वाले स्क्रिप्ट को इंसर्शन, SSR, नो-स्क्रिप्ट और reduced-motion हैंडलिंग की भी आवश्यकता होती है।