प्रॉम्प्ट और संदर्भ
आपको एक हॉरिजॉन्टल प्रोडक्ट-कार्ड हिंडोला (carousel) की आवश्यकता है और आप चाहते हैं कि ब्राउज़र पिछले/अगले स्क्रॉल बटन और स्थिति मार्कर जनरेट करे। CSS Overflow Module Level 5, असमर्थित-ब्राउज़र फ़ॉलबैक, एक्सेसिबिलिटी और रिलीज़ मानदंडों की व्याख्या करें।
CSS Overflow 5 स्क्रॉल कंटेनर द्वारा जनरेट किए गए ::scroll-button() और ::scroll-marker कंट्रोल्स को परिभाषित करता है, साथ ही उन्हें समूहीकृत करने के लिए scroll-marker-group भी प्रदान करता है। ब्राउज़र समर्थन अभी भी विकसित हो रहा है, इसलिए इंटरव्यू इस सुविधा को एक सार्वभौमिक बेसलाइन मानने के बजाय क्षमता सीमाओं और प्रोग्रेसिव एन्हांसमेंट का परीक्षण करता है।
इंटरव्यूअर क्या मूल्यांकन करता है
इंटरव्यूअर चाहता है कि आप स्क्रॉल कंटेनर, स्क्रॉल बटन और मार्कर ग्रुप के बीच अंतर स्पष्ट करें; अक्ष चयन, अक्षम (disabled) स्थितियों और स्क्रॉलिंग व्यवहार की व्याख्या करें; नेटिव लिंक और कीबोर्ड पाथ को सुरक्षित रखें; एक उपयोगी फ़ॉलबैक प्रदान करें; और केवल पिक्सल की जाँच करने के बजाय वास्तविक डिवाइसों और सहायक तकनीक (assistive technology) के साथ सत्यापन करें।
स्पष्टीकरण के लिए प्रश्न
सामग्री और लेआउट
पूछें कि क्या यह एक पेजिनेटेड कार्ड हिंडोला है, निरंतर गैलरी है, या टैब सूची है; प्रति पृष्ठ कितने आइटम दिखाई देते हैं; क्या आइटम की चौड़ाई निश्चित है; और क्या फ्री स्क्रॉलिंग की अनुमति है।
ब्राउज़र स्कोप
लक्षित ब्राउज़रों, समर्थित-संस्करण विंडो, JavaScript नीति की पुष्टि करें, और क्या उत्पाद बिना समर्थन वाले ब्राउज़रों में प्रायोगिक एन्हांसमेंट को छिपा सकता है।
इंटरैक्शन और एक्सेसिबिलिटी
कीबोर्ड फ़ोकस क्रम, स्क्रीन-रीडर द्वारा वर्तमान आइटम की घोषणा, टच और व्हील व्यवहार, रिड्यूस्ड-मोशन प्राथमिकता, और बटन अनुपलब्ध होने पर मिलने वाले फीडबैक की पुष्टि करें।
30-सेकंड का उत्तर
“मैं बेसलाइन के रूप में फ़ोकस करने योग्य कार्डों के साथ एक सामान्य हॉरिजॉन्टल स्क्रॉल कंटेनर बनाऊँगा, फिर जहाँ CSS Overflow 5 समर्थित है वहाँ scroll-marker-group और ::scroll-button() सक्षम करूँगा। बटन स्क्रॉलिंग को ट्रिगर करते हैं, लेकिन कार्ड अपने स्वयं के सिमेंटिक्स और कीबोर्ड पाथ को बनाए रखते हैं। मैं @supports selector(::scroll-button(*)) के साथ एन्हांसमेंट को गेट करूँगा। असमर्थित ब्राउज़र नेटिव स्क्रॉलिंग या एक छोटे JavaScript कंट्रोल को बनाए रखते हैं, और कीबोर्ड, स्क्रीन-रीडर, टच तथा रिड्यूस्ड-मोशन परीक्षण रिलीज़ गेट हैं।”
चरण-दर-चरण समाधान
चरण 1: एक उपयोगी बेसलाइन स्थापित करें
साधारण लेआउट, overflow-x: auto, एक स्पष्ट scroll-snap नीति और दृश्यमान फ़ोकस स्टाइलिंग के साथ शुरुआत करें। प्रत्येक कार्ड में एक हेडिंग, लिंक या बटन होता है, ताकि सामग्री जनरेट किए गए मार्करों के बिना भी सुलभ रहे।
चरण 2: नेटिव कंट्रोल्स सक्षम करें
समर्थन करने वाले ब्राउज़रों में, एक मार्कर ग्रुप सेट करें और पिछले तथा अगले कंट्रोल्स के लिए ::scroll-button(left) और ::scroll-button(right) का उपयोग करें। विनिर्देश इन बटनों को मूल स्क्रॉल कंटेनर से जोड़ता है; उपलब्धता शेष स्क्रॉल करने योग्य सामग्री पर निर्भर करती है, इसलिए वे सामान्य सजावटी स्यूडो-एलिमेंट्स नहीं हैं।
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-marker-group: after;
}
.carousel::scroll-button(left),
.carousel::scroll-button(right) {
inline-size: 2.5rem;
block-size: 2.5rem;
}चरण 3: क्षमता का पता लगाएँ (Detect capability)
@supports या चयनकर्ता क्षमता पहचान के साथ एन्हांसमेंट शैलियों को गेट करें। जब पहचान विफल हो जाए, तो स्क्रॉलबार, कार्ड या मैन्युअल रूप से बनाए गए फ़ॉलबैक को न छिपाएँ। जब यह सफल हो जाए, तो स्थिर आयाम बनाए रखें ताकि जनरेट किए गए कंट्रोल्स अप्रत्याशित रूप से दृश्य सामग्री सीमा को न बदलें।
चरण 4: सिमेंटिक्स और कीबोर्ड पाथ सुरक्षित रखें
जनरेट किए गए स्यूडो-एलिमेंट बटन संचालन का एकमात्र पाथ नहीं होने चाहिए। सुसंगत फ़ोकस मूवमेंट, Home/End, एरो-कीज़ और टच व्यवहार को परिभाषित करें; जब फ़ोकस किसी कार्ड तक पहुंचे तो उसे स्क्रॉल करके दृश्य में लाएँ। स्क्रीन रीडर को हिंडोला का नाम, वर्तमान कार्ड और क्रिया की घोषणा करनी चाहिए, न कि केवल “अगला”।
चरण 5: अक्ष और RTL को संभालें
बटन तर्क स्क्रॉल अक्ष से संबंधित होते हैं, इसलिए भौतिक left और right स्वचालित रूप से लॉजिकल शुरुआत और अंत नहीं होते हैं। RTL, वर्टिकल राइटिंग मोड और अन्य राइटिंग मोड का अलग से परीक्षण करें। लॉजिकल आयामों और स्पेसिंग को प्राथमिकता दें, फिर विज़ुअल और कीबोर्ड दिशाओं को सत्यापित करें।
चरण 6: फ़ॉलबैक डिज़ाइन करें
समर्थन के बिना, नेटिव हॉरिजॉन्टल स्क्रॉलिंग बनाए रखें। यदि स्पष्ट बटनों की आवश्यकता है, तो एक छोटी JavaScript लेयर स्क्रॉल स्थिति का निरीक्षण कर सकती है और disabled, वर्तमान आइटम और aria स्थिति को अपडेट कर सकती है। दो कंटेंट ट्री बनाए रखने के बजाय दोनों पाथ को कार्ड डेटा और सिमेंटिक्स साझा करना चाहिए।
चरण 7: रिलीज़ गेट्स सेट करें
समर्थित और गैर-समर्थित ब्राउज़रों, कीबोर्ड, टच, व्हील, 200% ज़ूम, हाई कंट्रास्ट, स्क्रीन रीडर्स और prefers-reduced-motion का परीक्षण करें। फ़र्स्ट पेंट पर दिखाई देने वाले कार्ड, आकस्मिक एक्टिवेशन, खोए हुए फ़ोकस, स्क्रॉल लेटेंसी और फ़ॉलबैक कवरेज को ट्रैक करें; एक स्क्रीनशॉट यह साबित नहीं कर सकता कि कंट्रोल्स उपयोग करने योग्य हैं।
मॉडल उत्तर
मैं सामान्य हॉरिजॉन्टल स्क्रॉलिंग और कार्ड सिमेंटिक्स को बेसलाइन मानूँगा, और फिर उसके ऊपर CSS Overflow 5 कंट्रोल्स की लेयर लगाऊँगा। क्षमता पहचान जहाँ उपलब्ध हो वहाँ scroll-marker-group और ::scroll-button() को सक्षम बनाती है; अन्य जगहों पर स्क्रॉलिंग अभी भी काम करती है, और यदि स्पष्ट कंट्रोल्स एक आवश्यकता हैं तो केवल एक छोटा JavaScript फ़ॉलबैक इस्तेमाल किया जाएगा। जनरेट किए गए बटन कभी भी लिंक, फ़ोकस या स्क्रीन-रीडर सिमेंटिक्स की जगह नहीं लेते हैं। मैं RTL, वर्टिकल राइटिंग, अनुपलब्ध स्थितियों, दृश्यमान फ़ोकस, टच और रिड्यूस्ड मोशन का परीक्षण करूँगा, और फिर यह पुष्टि करने के लिए एक ब्राउज़र मैट्रिक्स और वास्तविक सहायक तकनीक का उपयोग करूँगा कि प्रत्येक कार्ड सुलभ बना रहे।
सामान्य गलतियाँ
- गलती:
::scroll-button()को हर जगह उपलब्ध एक सामान्य बटन मानना। → यह क्यों विफल होता है: CSS Overflow 5 समर्थन अभी भी विकसित हो रहा है। → सुधार: क्षमता का पता लगाएँ और नेटिव स्क्रॉलिंग बनाए रखें। - गलती: स्क्रॉलबार और कार्ड लिंक को छिपाना, केवल डॉट्स छोड़ना। → यह क्यों विफल होता है: कीबोर्ड और सहायक तकनीक उपयोगकर्ता सामग्री का पाथ खो सकते हैं। → सुधार: कार्ड सिमेंटिक्स को स्वतंत्र रूप से कार्यशील बनाएँ; मार्कर अतिरिक्त नेविगेशन हैं।
- गलती: भौतिक लेफ्ट/राइट को सीधे RTL लॉजिक पर मैप करना। → यह क्यों विफल होता है: विज़ुअल दिशा, राइटिंग मोड और लॉजिकल दिशा भिन्न हो सकती हैं। → सुधार: RTL और वर्टिकल राइटिंग में बटन, फ़ोकस और स्क्रॉल परिणामों का अलग से परीक्षण करें।
- गलती: केवल क्लिक्स का परीक्षण करना। → यह क्यों विफल होता है: फ़ोकस का नुकसान, ज़ूम ओवरफ़्लो और रिड्यूस्ड-मोशन संबंधी समस्याएँ अदृश्य रह जाती हैं। → सुधार: कीबोर्ड, टच, स्क्रीन-रीडर और 200% ज़ूम जाँचों को रिलीज़ मानदंड बनाएँ।
फॉलो-अप और उत्तर
::scroll-button() और एक सामान्य बटन के बीच क्या सीमा है?
यह स्क्रॉल कंटेनर द्वारा जनरेट किया जाता है और स्क्रॉलिंग संदर्भ से जुड़ा होता है, जो इसकी शैली और उपलब्धता निर्धारित करता है। उत्पाद-विशिष्ट क्रियाओं, एनालिटिक्स या पुष्टिकरण फ़्लो के लिए अभी भी एक वास्तविक बटन या JavaScript की आवश्यकता हो सकती है।
नेटिव स्क्रॉलिंग क्यों बनाए रखें?
यह वह उपयोगी पाथ है जब एन्हांसमेंट अनुपलब्ध हो और यह टच, व्हील तथा उपयोगकर्ता प्राथमिकताओं को कवर करता है। यदि एन्हांसमेंट विफल हो जाता है, तब भी उपयोगकर्ता सामग्री तक पहुंच सकते हैं।
आप जनरेट किए गए कंट्रोल्स से लेआउट शिफ्ट से कैसे बचते हैं?
कंट्रोल के लिए जगह आरक्षित रखें, स्थिर कंटेनर आयामों और लॉजिकल स्पेसिंग का उपयोग करें, और क्षमता शाखाओं में फ़र्स्ट-पेंट कार्ड गणना और स्नैप स्थितियों की तुलना करें।
आपको इस सुविधा से कब बचना चाहिए?
जब लक्षित ब्राउज़रों में समर्थन की कमी हो, हिंडोला की स्थिति जटिल हो, या टीम एक विश्वसनीय फ़ॉलबैक बनाए नहीं रख सकती हो, तो एक परिपक्व कंट्रोल के साथ सामान्य स्क्रॉलिंग का उपयोग करें। JavaScript को कम करना एक्सेस कम करने के लायक नहीं है।