प्रॉम्प्ट और दायरा
एक हेल्प पैनल या अकॉर्डियन कार्ड डिफ़ॉल्ट रूप से केवल एक हेडिंग दिखाता है, फिर कंटेंट द्वारा निर्धारित ऊंचाई तक बढ़ता है। प्रोडक्ट की आवश्यकता कीबोर्ड, स्क्रीन-रीडर और पुराने-ब्राउज़र व्यवहार को बनाए रखते हुए auto, max-content, या fit-content पर एक सुचारू (स्मूद) ट्रांज़िशन है। समझाइए कि आप interpolate-size या calc-size() का उपयोग कैसे करेंगे और परिणाम को कैसे मान्य (validate) करेंगे।
यह फ़्रंटएंड, डिज़ाइन-सिस्टम और परफ़ॉर्मेंस इंटरव्यू के लिए उपयुक्त है। MDN ने interpolate-size को सीमित-उपलब्धता और नॉन-बेसलाइन के रूप में चिह्नित किया है; इसके लिए इंट्रिन्सिक-साइज़ इंटरपोलेशन के लिए एक स्पष्ट ऑप्ट-इन की आवश्यकता होती है और यह सार्वभौमिक रूप से सुरक्षित एनीमेशन शॉर्टकट नहीं है।
इंटरव्यूअर क्या मूल्यांकन करता है
- क्या आप लेंथ मानों और इंट्रिन्सिक-साइज़ कीवर्ड्स के बीच की सीमा को समझते हैं।
- क्या आप जानते हैं कि
interpolate-sizeइनहेरिट होता है और ग्लोबल ऑप्ट-इन डिसेंडेंट्स को प्रभावित करता है। - क्या आप
interpolate-sizeऔरcalc-size()में अंतर कर सकते हैं। - क्या असमर्थित ब्राउज़र उपयोग योग्य स्थिर स्थिति और रिड्यूस्ड-मोशन व्यवहार को बनाए रखते हैं।
- क्या आप केवल विज़ुअल स्मूदनेस के बजाय कंटेंट परिवर्तन, लेआउट शिफ्ट, फ़ोकस क्रम और परफ़ॉर्मेंस का परीक्षण करते हैं।
पहले पूछे जाने वाले स्पष्टीकरण
पुष्टि करें:
- कौन से लक्षित ब्राउज़र और न्यूनतम संस्करण मायने रखते हैं, और क्या प्रोग्रेसिव एन्हांसमेंट स्वीकार्य है?
- क्या यह एक सेमांटिक डिस्क्लोज़र कंट्रोल है, और क्या कंटेंट को डॉक्यूमेंट और एक्सेसिबिलिटी ट्री में मौजूद रहना चाहिए?
- क्या आप ऊंचाई, चौड़ाई, या दोनों को एनिमेट कर रहे हैं, और क्या ट्रांज़िशन के दौरान कंटेंट एसिंक्रोनस रूप से बदल सकता है?
- क्या कॉम्पोनेंट को रिड्यूस्ड मोशन, कीबोर्ड इंटरैक्शन, फ़ोकस रिटर्न और एनीमेशन के बीच में रिवर्सिंग का समर्थन करना चाहिए?
यदि अनिर्दिष्ट है, तो विभिन्न समर्थन स्तरों वाले आधुनिक Chromium, Firefox और Safari मान लें; पुराने ब्राउज़र स्मूद इंट्रिन्सिक-साइज़ एनीमेशन के बिना भी उपयोग योग्य रहने चाहिए।
तीस-सेकंड का उत्तर ढांचा
मैं पहले एक सेमांटिक बटन और कंटेंट क्षेत्र बनाऊंगा, फिर एनीमेशन को प्रोग्रेसिव एन्हांसमेंट के रूप में मानूंगा। समर्थित ब्राउज़रों में, स्थानीय कंटेनर पर interpolate-size: allow-keywords को सक्षम करें और एक स्पष्ट कोलैप्स की गई लेंथ से max-content या auto में ट्रांज़िशन करें; calc-size() का मूल्यांकन केवल तभी करें जब इंट्रिन्सिक साइज़ को और गणना की आवश्यकता हो। असमर्थित ब्राउज़र एक स्थिर विस्तार, सीमित अधिकतम ऊंचाई, या तत्काल टॉगल का उपयोग करते हैं। व्यावसायिक स्थिति एनीमेशन पूर्ण होने पर निर्भर नहीं हो सकती। अंत में, कीबोर्ड, स्क्रीन रीडर, रिड्यूस्ड मोशन, लंबे कंटेंट, रिवर्सल और वास्तविक परफ़ॉर्मेंस का परीक्षण करें।
चरण-दर-चरण विस्तृत विश्लेषण
1. सेमांटिक स्थिति स्थापित करें
कंटेंट क्षेत्र की ओर इंगित करते हुए aria-expanded वाले बटन का उपयोग करें, और उत्पाद सेमांटिक्स से मेल खाने वाली छिपने की रणनीति चुनें। एनीमेशन केवल विज़ुअल और लेआउट ट्रांज़िशन को बदलता है; यह तय नहीं करता कि कंटेंट ऑपरेट करने योग्य है या नहीं। कोलैप्स किए गए क्षेत्र में फ़ोकस को कभी भी न छोड़ें। यदि फ़ोकस छिपी हुई सामग्री के अंदर रहता है, तो इसे ट्रिगर या स्पष्ट रूप से दिखाई देने वाले कंट्रोल पर लौटाएं।
2. इंटरपोलेशन तंत्र चुनें
interpolate-size: allow-keywords एक लेंथ या प्रतिशत और एक इंट्रिन्सिक-साइज़ मान के बीच इंटरपोलेशन को सक्षम करता है, लेकिन यह सीधे दो इंट्रिन्सिक कीवर्ड्स के बीच एनिमेट नहीं करता है। जब इंट्रिन्सिक साइज़ को किसी गणना में भाग लेना हो तो calc-size() का उपयोग करें; साधारण calc(), auto या max-content की गणना नहीं कर सकता है। इसे रूट पर सक्षम करने और असंबंधित कॉम्पोनेंट्स को अप्रत्याशित रूप से प्रभावित करने के बजाय स्थानीय स्कोप से शुरू करें।
3. कंटेंट और लेआउट सीमाओं को परिभाषित करें
एनिमेटेड कंटेनर को स्पष्ट ओवरफ़्लो, अधिकतम-आकार और पोज़िशनिंग सीमाएं दें। एसिंक्रोनस कंटेंट लक्षित आकार को बदल देता है, इसलिए चुनें कि स्थिर कंटेंट की प्रतीक्षा करनी है, पुनर्गणना करनी है, या अंतिम स्थिति पर जाना है। नेस्टेड ग्रिड, एब्सोल्यूट पोज़िशनिंग और स्क्रॉल कंटेनर इंट्रिन्सिक साइज़ को अंतर्ज्ञान से भिन्न बना सकते हैं; वास्तविक कॉम्पोनेंट संरचना को मापें।
4. कम्पैटिबिलिटी और फ़ॉलबैक
एन्हांसमेंट को सपोर्ट डिटेक्शन के पीछे रखें। पुराने ब्राउज़रों को एक स्थिर ऊंचाई, एक सीमित max-height अनुमान, या एक तत्काल टॉगल का उपयोग करना चाहिए। फ़ॉलबैक को पढ़ने योग्य कंटेंट, प्रयोग करने योग्य कंट्रोल, फ़ोकस करने योग्य लिंक और एक समझने योग्य बंद स्थिति को बनाए रखना चाहिए। केवल अनुपलब्ध CSS समर्थन को छिपाने के लिए जावास्क्रिप्ट में हर एनीमेशन फ़्रेम पर लेआउट को न मापें; यह फोर्स्ड लेआउट और अधिक स्टेट पाथ्स का कारण बनता है।
5. मोशन प्राथमिकताएं और इंटरैक्शन
prefers-reduced-motion: reduce के तहत, स्थिति और फ़ोकस तर्क को बनाए रखते हुए ट्रांज़िशन को छोटा करें या हटा दें। Enter, Space, Tab और Escape व्यवहार को कॉम्पोनेंट कॉन्ट्रैक्ट का पालन करना चाहिए। यदि उपयोगकर्ता ट्रांज़िशन के बीच में फिर से क्लिक करता है, तो स्वाभाविक रूप से रिवर्स करें या नए लक्ष्य पर जाएं; समवर्ती एनीमेशन को लेआउट और aria-expanded के लिए संघर्ष करते हुए न छोड़ें।
6. सत्यापन मेट्रिक्स
छोटे और लंबे टेक्स्ट, एसिंक्रोनस त्रुटियों और स्थानीयकृत रैपिंग का उपयोग करें। लेआउट शिफ्ट, ड्रॉप किए गए फ़्रेम, स्टाइल और लेआउट समय, इंटरैक्शन लेटेंसी, फ़ोकस विज़िबिलिटी और सहायक तकनीक आउटपुट को मापें। समर्थित और असमर्थित पाथ्स की तुलना करें, जिसमें वह मामला भी शामिल है जहां प्रॉपर्टी को अनदेखा किया जाता है। एक ब्राउज़र कम्पैटिबिलिटी टेबल उत्पाद के प्रदर्शन की गारंटी नहीं है; लाभ माप से आना चाहिए।
उच्च-गुणवत्ता वाला नमूना उत्तर
मैं स्थिति स्रोत के रूप में aria-expanded के साथ एक सेमांटिक बटन और कंटेंट क्षेत्र लागू करूंगा; CSS एनीमेशन केवल एक एन्हांसमेंट है। समर्थित ब्राउज़रों पर, पैनल कंटेनर पर interpolate-size: allow-keywords सेट करें और एक स्पष्ट कोलैप्स की गई लेंथ से max-content या auto में ट्रांज़िशन करें। यदि इंट्रिन्सिक साइज़ पर गणना की आवश्यकता है, तो calc-size() का उपयोग करें। मैं रूट-स्तर पर आँख बंद करके ऑप्ट-इन करने से बचूंगा क्योंकि प्रॉपर्टी इनहेरिट होती है।
जब असमर्थित हो, तब भी पैनल तुरंत खुलता है या सीमित max-height का उपयोग करता है; सामग्री और फ़ोकस एनीमेशन समाप्त होने पर निर्भर नहीं करते हैं। रिड्यूस्ड मोशन ट्रांज़िशन को हटा देता है लेकिन स्थिति परिवर्तन को नहीं। यदि ट्रांज़िशन के दौरान एसिंक्रोनस कंटेंट बदलता है, तो मैं स्थिरता की प्रतीक्षा करूंगा, पुनर्गणना करूंगा, या एक प्रलेखित नीति के अनुसार अंतिम स्थिति पर कूद जाऊंगा, जबकि aria-expanded को एक बार अपडेट करूंगा।
सत्यापन में छोटी और लंबी सामग्री, स्थानीयकरण, कीबोर्ड, स्क्रीन रीडर, फ़ोकस रिटर्न, रिवर्सल, पुराने ब्राउज़र और रिड्यूस्ड मोशन शामिल हैं। परफ़ॉर्मेंस के लिए, स्टाइल, लेआउट, फ़्रेम रेट, लेआउट शिफ्ट और इंटरैक्शन लेटेंसी की तुलना करें। यदि एन्हांस्ड पाथ में जिटर या कम्पैटिबिलिटी विफलताएं होती हैं, तो इसके चयनकर्ता (selector) को सीमित करें या इसे अक्षम करें; एक CSS प्रयोग को बेसलाइन उपयोगिता को कम नहीं करना चाहिए।
सामान्य गलतियां
- इंट्रिन्सिक-साइज़ कीवर्ड्स को साधारण संख्यात्मक एंडपॉइंट्स के रूप में मानना जो सभी एक दूसरे के साथ इंटरपोलेट हो सकते हैं।
- रूट पर
interpolate-sizeसेट करना और अनजाने में असंबंधित डिसेंडेंट्स को बदलना। calc-size()की सीमा को समझाए बिना इसेcalc()के ड्रॉप-इन प्रतिस्थापन के रूप में मानना।- केवल समर्थित ब्राउज़रों का परीक्षण करना और प्रॉपर्टी छूट जाने पर सामग्री या फ़ोकस की अनदेखी करना।
- वास्तविक ऊंचाई को एक विशाल
max-heightके पीछे छिपाना, जो एनीमेशन गति और लेआउट को विकृत करता है। - हर जावास्क्रिप्ट फ़्रेम में लेआउट को पढ़ना और स्टाइल लिखना, जिससे सिंक्रोनस लेआउट बाध्य होता है।
- रिड्यूस्ड मोशन, कीबोर्ड रिवर्सल और एसिंक्रोनस सामग्री परिवर्तनों की अनदेखी करना।
- CLS, इंटरैक्शन लेटेंसी, या स्क्रीन-रीडर स्थिति को मापे बिना एक स्मूद डेमो दिखाना।
फॉलो-अप प्रश्न और उत्तर
आप सीधे शून्य से auto में ट्रांज़िशन क्यों नहीं कर सकते?
पारंपरिक इंटरपोलेशन को संख्यात्मक एंडपॉइंट्स की आवश्यकता होती है; auto और max-content इंट्रिन्सिक साइज़ हैं। interpolate-size ब्राउज़र समर्थन के अधीन, चयनित लेंथ-टू-इंट्रिन्सिक इंटरपोलेशन की अनुमति देता है।
आप calc-size का उपयोग कब करेंगे?
इसका उपयोग तब करें जब लक्ष्य को इंट्रिन्सिक साइज़ पर आधारित गणना की आवश्यकता हो, जैसे कि स्पेसिंग जोड़ना या सीमा लागू करना। यदि आपको केवल लेंथ-टू-इंट्रिन्सिक इंटरपोलेशन की आवश्यकता है, तो स्थानीय interpolate-size अधिक स्पष्ट है।
क्या होगा यदि एनीमेशन के दौरान कंटेंट बढ़ता है?
एक नीति परिभाषित करें: स्थिर डेटा की प्रतीक्षा करें, लक्ष्य की पुनर्गणना करें, या अंतिम स्थिति पर जाएं। स्क्रॉलिंग, फ़ोकस और aria-expanded को सुसंगत रखें, और तीव्र दोहराए गए इंटरैक्शन का परीक्षण करें।
असमर्थित ब्राउज़र क्या करते हैं?
एक तत्काल या सीमित स्थिर विस्तार रखें ताकि सामग्री, लिंक और कीबोर्ड पाथ पूर्ण रहें। प्रोग्रेसिव-एन्हांसमेंट विफलता से विज़ुअल पॉलिश कम होनी चाहिए, व्यावसायिक उपयोगिता नहीं।
आप एक्सेसिबिलिटी को कैसे सत्यापित करते हैं?
खोलने, बंद करने, फिर से खोलने और फ़ोकस को स्थानांतरित करने के लिए कीबोर्ड का उपयोग करें, फिर जांचें कि सहायक तकनीक समान स्थिति और सामग्री की रिपोर्ट करती है। रिड्यूस्ड मोशन के साथ दोहराएं और सुनिश्चित करें कि छिपी हुई सामग्री कभी भी दुर्गम फ़ोकस को बनाए न रखे।