प्रॉम्प्ट और संदर्भ
प्रोडक्ट टीम एक मेसनरी (masonry) इमेज वॉल चाहती है: कार्ड्स की ऊंचाइयां अलग-अलग हैं, डेस्कटॉप कई कॉलम का उपयोग करता है, मोबाइल एक कॉलम का उपयोग करता है, और कंटेंट कीबोर्ड और स्क्रीन-रीडर उपयोगकर्ताओं के लिए काम करना चाहिए। CSS Grid Level 3 मेसनरी लेआउट को परिभाषित कर रहा है, लेकिन सिंटैक्स और ब्राउज़र सपोर्ट के सत्यापन की आवश्यकता है। नेटिव CSS, कॉलम और स्क्रिप्ट दृष्टिकोणों की तुलना करें और एक फॉलबैक व टेस्ट प्लान डिज़ाइन करें।
इंटरव्यूअर क्या जांच रहा है
- विजुअल पैकिंग को DOM, रीडिंग और फोकस ऑर्डर से अलग करना।
- ब्राउज़र-नाम के अनुमानों के बजाय फीचर डिटेक्शन और एक सपोर्ट मैट्रिक्स का उपयोग करना।
- इमेज डायमेंशन, CLS, रिस्पॉन्सिव कॉलम काउंट, वर्चुअलाइजेशन और रीफ्लो (reflow) लागत को संभालना।
- नो-स्क्रिप्ट (no-script), कीबोर्ड, स्क्रीन-रीडर, ज़ूम और प्रिंट स्वीकृति को शामिल करना।
पहले स्पष्ट करने योग्य प्रश्न
- क्या कार्ड्स को पब्लिश समय और प्राथमिकता का पालन करना चाहिए, या विजुअल कॉलम का क्रम बदल सकता है?
- क्या मेसनरी केवल सजावटी है, या उपयोगकर्ताओं को कंटेंट को क्रमबद्ध तरीके से पढ़ना और संचालित करना होगा?
- कौन से ब्राउज़र, नो-स्क्रिप्ट और SEO प्रतिबंध लागू होते हैं?
- क्या लिस्ट इतनी बड़ी है कि वर्चुअलाइजेशन, पेजिनेशन या लेज़ी लोडिंग की आवश्यकता हो?
- क्या ड्रैग-एंड-ड्रॉप, इंसर्शन, डायनेमिक ऊंचाइयां और प्रिंट आवश्यक हैं?
30-सेकंड का उत्तर ढांचा
मैं सिमेंटिक DOM ऑर्डर को स्थिर रखूंगा और केवल विजुअल एन्हांसमेंट के लिए CSS का उपयोग करूंगा। जहां सपोर्ट हो वहां मेसनरी का चयन करने के लिए @supports और एक वास्तविक ब्राउज़र मैट्रिक्स का उपयोग करूंगा; अन्यथा सामान्य Grid या कॉलम पर फॉलबैक करूंगा और भिन्न व्हाइटस्पेस को स्वीकार करूंगा। लेआउट शिफ्ट को कम करने के लिए इमेज डायमेंशन को पहले से रिज़र्व रखूंगा, और जावास्क्रिप्ट को कभी भी एक्सेसिबिलिटी का एकमात्र जरिया नहीं बनाऊंगा। सुसंगत कंटेंट क्रम के लिए कीबोर्ड, स्क्रीन रीडर, ज़ूम, प्रिंट, डिसेबल्ड स्क्रिप्ट और लंबी लिस्ट का परीक्षण करूंगा।
चरण-दर-चरण विस्तृत उत्तर
चरण 1: मेसनरी ट्रेड-ऑफ को परिभाषित करें
मेसनरी आइटम्स को एक अक्ष के अनुदिश ग्रिड ट्रैक्स में पैक करती है जबकि दूसरे अक्ष को कस देती है। यह खाली जगह को कम करती है और विजुअल डेंसिटी को बढ़ाती है; यह रीडिंग ऑर्डर, फोकस मूवमेंट या प्रेडिक्टेबल पेजिनेशन को अपने आप हल नहीं करती है। किसी कार्यान्वयन को चुनने से पहले उन प्रोडक्ट बाधाओं को स्वीकृति मानदंडों (acceptance criteria) में बदलें।
चरण 2: सिमेंटिक्स और फोकस ऑर्डर को बनाए रखें
वास्तविक लिंक, बटन और हेडिंग को व्यावसायिक क्रम में रेंडर करें। स्क्रिप्ट के साथ नोड्स को न ले जाएं या पॉजिटिव tabindex के साथ विजुअल ऑर्डर को ठीक न करें। यदि विजुअल कॉलम DOM ऑर्डर से भिन्न हैं, तो इसे स्पष्ट रूप से स्वीकार करें या पंक्ति-दर-पंक्ति रीडिंग बनाए रखने के लिए सामान्य Grid का उपयोग करें।
चरण 3: फीचर-डिटेक्ट करें और फॉलबैक दें
प्रायोगिक सिंटैक्स को @supports के पीछे रखें और टारगेट मैट्रिक्स में इसका परीक्षण करें। उपलब्ध होने पर स्पेसिफिकेशन के समर्थित मेसनरी सिंटैक्स का उपयोग करें; अन्यथा display: grid, फिक्स्ड ट्रैक्स या कॉलम्स पर फॉलबैक करें। फॉलबैक में समान DOM, कंटेंट और इंटरैक्शन रखें; केवल व्हाइटस्पेस और पैकिंग डेंसिटी में अंतर होना चाहिए।
चरण 4: इमेज और डायनेमिक ऊंचाइयों को संभालें
सर्वर से इमेज डायमेंशन या aspect-ratio भेजें और CLS को कम करने के लिए उन्हें लेज़ी लोडिंग और उपयुक्त object-fit के साथ संयोजित करें। इमेज लोड, फ़ॉन्ट स्वैप और कंटेंट अपडेट रीफ्लो को ट्रिगर करते हैं, इसलिए लंबी लिस्ट को पेजिनेट या वर्चुअलाइज़ करें। स्क्रिप्ट माप को थ्रॉटल करें और सिंक्रोनस लेआउट को बाध्य करने वाले लेआउट रीड्स और राइट्स के आपस में मिलने से बचें।
चरण 5: परफॉर्मेंस और मेंटेनेंस का मूल्यांकन करें
CSS, कॉलम्स और स्क्रिप्ट के लिए फर्स्ट पेंट, स्क्रॉल फ्रेम रेट, लेआउट समय, मेमोरी और लंबी लिस्ट में इंसर्शन को अलग-अलग मापें। न्यूनतम विजुअल अंतर को डॉक्यूमेंट करें और प्रत्येक ब्रेकपॉइंट के लिए नियमों की नकल करने से बचें। स्क्रिप्ट को केवल तभी सक्षम करें जब ड्रैग-एंड-ड्रॉप, जटिल क्रॉस-कॉलम एनीमेशन, या कोई स्पष्ट लेगेसी आवश्यकता वास्तव में इसकी मांग करे।
चरण 6: एक्सेसिबिलिटी और गैर-विजुअल उपयोग को कवर करें
प्रत्येक आइटम के माध्यम से टैब करें और सत्यापित करें कि फोकस अचानक इधर-उधर न कूदे। हेडिंग, लिंक और वैकल्पिक टेक्स्ट DOM ऑर्डर का पालन करते हैं, यह पुष्टि करने के लिए स्क्रीन रीडर का उपयोग करें। 200% ज़ूम, हाई कंट्रास्ट, रिड्यूस्ड मोशन, प्रिंट और डिसेबल्ड स्क्रिप्ट्स का परीक्षण करें। मेसनरी कंटेंट प्राप्त करने का एकमात्र तरीका नहीं होना चाहिए।
चरण 7: रिलीज़ और मॉनिटर करें
स्पेसिफिकेशन वर्ज़न, ब्राउज़र मैट्रिक्स और फॉलबैक नीति को रिकॉर्ड करें। ब्राउज़र के अनुसार CLS, LCP, स्क्रिप्ट एरर, ओवरफ्लो और कार्ड-इंटरैक्शन पूर्णता की निगरानी करें। जब सिंटैक्स सपोर्ट बदलता है, तो रोलआउट का विस्तार करने से पहले एक प्रयोग में स्क्रीनशॉट और एक्सेसिबिलिटी मामलों को दोबारा चलाकर देखें।
उच्च-गुणवत्ता वाला नमूना उत्तर
मैं सिमेंटिक DOM ऑर्डर को बनाए रखूंगा और मेसनरी को विजुअल एन्हांसमेंट के रूप में मानूंगा। स्पेसिफिकेशन सिंटैक्स के लिए @supports और वास्तविक ब्राउज़र परीक्षणों का उपयोग करूंगा; समान कंटेंट और इंटरैक्शन के साथ सामान्य Grid या कॉलम्स पर फॉलबैक करूंगा। CLS को कम करने के लिए इमेज डायमेंशन या aspect-ratio को रिज़र्व रखूंगा, और लंबी लिस्ट के लिए बार-बार सिंक्रोनस माप के बजाय पेजिनेशन या वर्चुअलाइजेशन का उपयोग करूंगा। कीबोर्ड, स्क्रीन-रीडर, ज़ूम, प्रिंट और नो-स्क्रिप्ट परीक्षणों को DOM ऑर्डर में कंटेंट प्राप्त करना चाहिए। ब्राउज़र के अनुसार CLS, लेआउट एरर और इंटरैक्शन पूर्णता की निगरानी करें, और रीप्ले व एक्सेसिबिलिटी परिणामों के आधार पर स्पेसिफिकेशन अपडेट को नियंत्रित करें।
सामान्य गलतियां
- DOM, फोकस और स्क्रीन-रीडर ऑर्डर को अनदेखा करते हुए विजुअल डेंसिटी को ऑप्टिमाइज़ करना।
- बिना
@supportsऔर परीक्षण के यह मान लेना कि प्रत्येक आधुनिक ब्राउज़र समान मेसनरी सिंटैक्स का समर्थन करता है। - ऑर्डर को ठीक करने के लिए स्क्रिप्ट या पॉजिटिव
tabindexके साथ नोड्स को स्थानांतरित करना। - इमेज डायमेंशन को छोड़ना और लोड के बाद CLS व रीफ्लो उत्पन्न करना।
- लेआउट और मेमोरी लागत को मापे बिना कंपैटिबिलिटी के लिए हमेशा चालू रहने वाली स्क्रिप्ट जोड़ना।
फॉलो-अप प्रश्न और उत्तर
फॉलो-अप 1: कॉलम्स का उपयोग क्यों न करें?
कॉलम मेसनरी की तरह दिख सकते हैं, लेकिन कंटेंट कॉलम के अनुसार विभाजित होती है और पढ़ने या फोकस का क्रम व्यावसायिक क्रम से भिन्न हो सकता है। यदि क्रम मायने रखता है, तो सामान्य Grid को प्राथमिकता दें या व्हाइटस्पेस को स्वीकार करें।
फॉलो-अप 2: आप मेसनरी सपोर्ट का पता कैसे लगाते हैं?
पास होने वाली सटीक प्रॉपर्टीज़ और वैल्यूज़ को रिकॉर्ड करते हुए, @supports और टारगेट ब्राउज़र मैट्रिक्स में ऑटोमेटेड परीक्षणों का उपयोग करें। User-Agent या "आधुनिक ब्राउज़र" लेबल से सपोर्ट का अनुमान न लगाएं।
फॉलो-अप 3: कार्ड्स को डायनेमिक रूप से सम्मिलित करने के बारे में क्या?
इंसर्शन क्रम बनाए रखें, इमेज डायमेंशन रिज़र्व रखें, अपडेट्स को बैच में प्रोसेस करें और प्रति-आइटम फ़ोर्स्ड लेआउट से बचें। बड़ी लिस्टों को पेजिनेशन, वर्चुअलाइजेशन और रीस्टोरेबल फोकस की आवश्यकता होती है।
फॉलो-अप 4: स्क्रिप्ट फॉलबैक कब उचित है?
जब ड्रैग-एंड-ड्रॉप, जटिल क्रॉस-कॉलम एनीमेशन, या कोई स्पष्ट लेगेसी आवश्यकता CSS द्वारा पूरी नहीं की जा सकती है। स्क्रिप्ट एक एन्हांसमेंट बनी रहती है और इसके विफल होने पर भी सिमेंटिक कंटेंट उपलब्ध रहना चाहिए।
फॉलो-अप 5: आप कैसे साबित करते हैं कि विजुअल लेआउट ने एक्सेसिबिलिटी को प्रभावित नहीं किया?
प्रत्येक आइटम को कीबोर्ड और स्क्रीन रीडर द्वारा DOM ऑर्डर में संचालित करें, फिर 200% ज़ूम, रिड्यूस्ड मोशन, प्रिंट और डिसेबल्ड स्क्रिप्ट का परीक्षण करें। इन परिणामों को रिलीज़ गेट बनाएं।