प्रॉम्प्ट और संदर्भ
प्रोडक्ट चाहता है कि सर्च फील्ड्स, टैग इनपुट्स और मल्टी-लाइन नोट्स अपने कंटेंट के साथ बड़े या छोटे हों। डिज़ाइन की यह भी मांग है कि वे ग्रिड के अंदर रहें, लेआउट शिफ्ट से बचें और पुराने ब्राउज़रों में उपयोग करने योग्य बने रहें। समझाइए कि field-sizing: content फॉर्म कंट्रोल के प्रेफर्ड साइज को कैसे बदलता है और बाउंड्स, फ़ॉलबैक और एक्सेसिबल इंटरैक्शन कैसे सेट किए जाते हैं।
यह प्रश्न फ्रंटएंड, डिज़ाइन-सिस्टम और फॉर्म-एक्सपीरियंस इंटरव्यू के लिए उपयुक्त है। मुख्य बात यह है कि यह प्रेफर्ड साइजिंग को बदलता है, कंटेनर, स्क्रॉलिंग या वैलिडेशन कॉन्ट्रैक्ट को नहीं।
इंटरव्यूअर क्या जांच रहा है
एक मजबूत उत्तर यह बताता है कि content टेक्स्ट कंट्रोल्स को कंटेंट के अनुसार सिकुड़ने या बढ़ने देता है जबकि fixed प्रारंभिक मान है। बिना न्यूनतम चौड़ाई के, एक खाली कंट्रोल केवल कैरेट जितना चौड़ा हो सकता है; प्लेसहोल्डर इसे शुरुआत में बड़ा बना सकता है। min-inline-size, max-inline-size, textarea की ऊंचाई, लंबे कंटेंट की स्क्रॉलिंग, लेआउट स्थिरता, फ़ॉलबैक और लेबल/एरर एसोसिएशन को कवर करें।
पहले पूछे जाने वाले स्पष्टीकरण प्रश्न
- किन कंट्रोल्स को अनुकूलित होना चाहिए: सिंगल-लाइन इनपुट्स, textareas, selects, या प्रदर्शित फ़ाइल नाम?
- क्या इनलाइन साइज और ब्लॉक साइज बदल सकते हैं, या कंट्रोल को एक सीमा पर आंतरिक रूप से स्क्रॉल करना चाहिए?
- ग्रिड कॉलम, मोबाइल चौड़ाई और आस-पास के बटनों से क्या हार्ड कंस्ट्रेंट्स हैं?
- खाली वैल्यू, प्लेसहोल्डर, लंबी स्ट्रिंग्स और पेस्ट किया गया कंटेंट कैसा दिखना चाहिए?
- कौन से ब्राउज़र दायरे में हैं, और क्या फ़ॉलबैक फिक्स्ड साइजिंग होना चाहिए या स्क्रिप्ट एन्हांसमेंट?
30-सेकंड का उत्तर ढांचा
“मैं field-sizing: content को एक पूर्ण ऑटो-लेआउट समाधान के बजाय एक प्रेफर्ड-साइज एन्हांसमेंट के रूप में मानूँगा। इनपुट्स और textareas को min-inline-size और max-inline-size दें, textarea की ऊंचाई पर कैप लगाएं, और कैप के बाद कंट्रोल को आंतरिक रूप से स्क्रॉल करने दें। स्पष्ट लेबल्स, एरर एसोसिएशन्स और फोकस शैलियों को बनाए रखें; असमर्थित ब्राउज़र फिक्स्ड साइजिंग बनाए रखते हैं। खाली वैल्यू, प्लेसहोल्डर्स, लंबे टेक्स्ट, ज़ूम, कीबोर्ड उपयोग और लेआउट शिफ्ट का परीक्षण करें ताकि फॉर्म कॉन्ट्रैक्ट बरकरार रहे।”
चरण-दर-चरण गहरा उत्तर
चरण 1: fixed और content को समझें
प्रारंभिक field-sizing मान fixed है, इसलिए कंट्रोल्स ब्राउज़र के डिफ़ॉल्ट प्रेफर्ड साइज का उपयोग करते हैं। content के साथ, समर्थित टेक्स्ट इनपुट्स अपने कंटेंट के अनुसार समायोजित होते हैं, और टेक्स्ट बदलने पर सिकुड़ते या बढ़ते हैं। यह प्रॉपर्टी सिमेंटिक्स, वैलिडेशन या सबमिशन नियमों को नहीं बदलती है।
चरण 2: सिंगल-लाइन कंट्रोल्स के लिए इनलाइन-साइज बाउंड्स सेट करें
बिना न्यूनतम आकार वाला एक खाली इनपुट केवल कैरेट दिखा सकता है, जिससे इसे खोजना मुश्किल हो जाता है; एक प्लेसहोल्डर इसे बहुत चौड़ा बना सकता है। ग्रिड के अंदर अनुकूलन बनाए रखने के लिए लॉजिकल मिनिमम और मैक्सिमम साइज का उपयोग करें।
.tag-input {
field-sizing: content;
min-inline-size: 8rem;
max-inline-size: min(100%, 28rem);
}चरण 3: दोनों अक्षों पर textarea की वृद्धि को संभालें
चौड़ाई में सीमित textarea कंटेंट दिखाने के लिए पंक्तियाँ जोड़ सकता है। एक अधिकतम ब्लॉक साइज सेट करें और कैप के बाद आंतरिक स्क्रॉलिंग की अनुमति दें, अन्यथा पेस्ट किया गया टेक्स्ट बाद के फील्ड्स को व्यूपोर्ट से बाहर धकेल सकता है। resize, overflow, और line-height के लिए अभी भी एक स्पष्ट प्रोडक्ट निर्णय की आवश्यकता है।
चरण 4: लेआउट शिफ्ट और ग्रिड डैमेज को रोकें
बढ़ता हुआ कंटेंट पड़ोसियों को स्थानांतरित करता है, विशेष रूप से टेबल्स, टूलबार्स और डायलॉग्स में। फील्ड्स को फ्लेक्सिबल ग्रिड ट्रैक्स में रखें, आस-पास के बटनों के लिए जगह आरक्षित करें, और महत्वपूर्ण एक्शन एरियाज में साइज पर कैप लगाएं। केवल प्रारंभिक स्क्रीनशॉट की जांच करने के बजाय CLS और यथार्थवादी टाइपिंग अनुक्रमों को मापें।
चरण 5: प्लेसहोल्डर्स, खाली मानों और फ़ाइल नामों का ध्यान रखें
content के साथ, एक कंट्रोल अपने प्लेसहोल्डर के लिए पर्याप्त रूप से बड़ा शुरू हो सकता है; इसके बिना एक खाली कंट्रोल बहुत संकीर्ण हो सकता है। प्रदर्शित फ़ाइल नाम बदलने पर फ़ाइल कंट्रोल का आकार भी बदल सकता है। प्रत्येक कंट्रोल को एक पठनीय न्यूनतम और ट्रंकेशन नीति दें; एक प्लेसहोल्डर स्थायी लेबल नहीं है।
चरण 6: फॉर्म एक्सेसिबिलिटी को सुरक्षित रखें
field-sizing लेबल्स, एरर्स या विज़िबल फोकस नहीं बनाता है। प्रत्येक कंट्रोल को अभी भी प्रोग्रामेटिक रूप से जुड़े लेबल, एरर संदेश और कीबोर्ड पथ की आवश्यकता होती है। रीसाइज़िंग को वर्तमान फोकस को कवर नहीं करना चाहिए या एरर को दृश्य से बाहर नहीं ले जाना चाहिए। ज़ूम और उच्च-कंट्रास्ट थीम का अलग से परीक्षण करें।
चरण 7: फ़ॉलबैक की योजना बनाएं
MDN इसे एक नए फीचर के रूप में वर्णित करता है, इसलिए पुराने ब्राउज़र इसे अनदेखा कर सकते हैं। डिफ़ॉल्ट CSS को एक समझदार फिक्स्ड या ग्रोएबल साइज प्रदान करना चाहिए, समर्थित ब्राउज़र इसे content से ओवरराइड करते हैं। तुरंत प्रति-कीस्ट्रोक मापन स्क्रिप्ट न जोड़ें; यदि लीगेसी एडेप्टेशन वास्तव में आवश्यक है, तभी इनपुट इवेंट्स, थ्रॉटलिंग और एक्सेसिबिलिटी साइड इफेक्ट्स का मूल्यांकन करें।
चरण 8: दोहराने योग्य सत्यापन का निर्माण करें
खाली, छोटे, लंबे, पेस्ट किए गए, बहुभाषी, प्लेसहोल्डर, डिलीट, अनडू, ज़ूम, कीबोर्ड-नेविगेशन और एरर स्थितियों का परीक्षण करें। Chromium, Firefox, Safari और प्रॉपर्टी को अनदेखा करने वाले ब्राउज़रों में कंट्रोल डायमेंशन्स, स्क्रॉलबार्स, CLS, फोकस स्थान और आस-पास के बटन की पहुंच को रिकॉर्ड करें।
ट्रेड-ऑफ़ और सीमाएं
एडेप्टिव साइजिंग व्हाइटस्पेस और स्क्रिप्ट को कम कर सकती है लेकिन लेआउट परिवर्तन और ब्राउज़र अंतर जोड़ती है। फिक्स्ड साइजिंग अधिक प्रेडिक्टेबल है; content उन टैग्स और सर्च टर्म्स के लिए उपयुक्त है जिनका आकार उनके अर्थ के अनुसार होता है। प्राथमिक फॉर्म फील्ड्स के लिए, डायनेमिक डायमेंशन्स चुनने से पहले खोज योग्यता, संचालन क्षमता और एरर रिकवरी को सुरक्षित रखें।
field-sizing: content को स्वचालित रैपिंग, वैलिडेशन या ओवरफ्लो प्रिवेंशन के रूप में न मानें। कंटेनर बाउंड्स, स्क्रॉलिंग और एरर प्रेजेंटेशन का स्वामित्व अभी भी कंपोनेंट के पास है।
रोलआउट योजना और प्रमाण
एक टैग इनपुट और एक नोट्स textarea को पायलट करें। डिफ़ॉल्ट डायमेंशन्स, कंटेंट-लेंथ डिस्ट्रीब्यूशन, अधिकतम बाउंड्स और लेआउट मेट्रिक्स रिकॉर्ड करें। फिक्स्ड साइजिंग से शुरुआत करें, फिर CLS, फोकस, स्क्रॉल और पूर्णता दर का निरीक्षण करते हुए समर्थित ब्राउज़रों में content सक्षम करें।
न्यूनतम और अधिकतम साइज, प्लेसहोल्डर नीति, textarea कैप, फ़ॉलबैक शैलियों और ब्राउज़र मैट्रिक्स का दस्तावेजीकरण करें। विज़ुअल रिग्रेशन के साथ-साथ, कीबोर्ड और स्क्रीन-रीडर स्वीकृति चलाएं ताकि रीसाइज़िंग से लेबल्स, एरर्स या सबमिट-बटन का क्रम न टूटे।
सामान्य गलतियाँ और फॉलो-अप
न्यूनतम चौड़ाई छोड़ देना
एक खाली इनपुट केवल कैरेट-चौड़ाई का हो सकता है और इसे खोजना मुश्किल हो सकता है। एक पठनीय न्यूनतम इनलाइन साइज सेट करें और एक दृश्य लेबल रखें।
textarea को हमेशा के लिए बढ़ने देना
एक बड़े दस्तावेज़ को पेस्ट करने से पूरा पृष्ठ हिल सकता है। ब्लॉक साइज पर कैप लगाएं और सीमा के बाद कंट्रोल के अंदर स्क्रॉल करें।
प्लेसहोल्डर को लेबल की तरह मानना
एक प्लेसहोल्डर प्रारंभिक आकार को प्रभावित करता है और इनपुट पर गायब हो जाता है। यह एक स्थायी, जुड़े हुए लेबल की जगह नहीं ले सकता।
केवल समर्थित ब्राउज़रों का परीक्षण करना
पुराने ब्राउज़र घोषणा को अनदेखा करते हैं। फिक्स्ड या ग्रोएबल डिफ़ॉल्ट को स्वतंत्र रूप से काम करना चाहिए और उसी फॉर्म स्वीकृति परीक्षणों का हिस्सा होना चाहिए।
क्या होगा यदि रीसाइज़िंग से बटन पहुंच से बाहर हो जाए?
ग्रिड ट्रैक्स, अधिकतम साइज, स्क्रॉल कंटेनर्स और फोकस स्थान का निरीक्षण करें। केवल अनुकूलन को अक्षम करने के बजाय CLS, कीबोर्ड नेविगेशन और लंबे-टेक्स्ट अनुक्रमों के साथ पुन: परीक्षण करें।