सीएसएस के फ़ील्ड का साइज़ बदलना

बदलाव किए जा सकने वाले कॉन्टेंट के साथ, एलिमेंट के साइज़ को अपने-आप अडजस्ट करने के लिए कोड की एक लाइन.

Adam Argyle

field-sizing के बिना, सही साइज़ वाला इनपुट फ़ील्ड बनाने के लिए, आपको टेक्स्ट फ़ील्ड के इनपुट के औसत साइज़ का अनुमान लगाना होता था. इसके अलावा, JavaScript का इस्तेमाल करके वर्णों की गिनती की जाती थी. साथ ही, उपयोगकर्ता के टेक्स्ट डालने पर एलिमेंट की ऊंचाई या चौड़ाई बढ़ाई जाती थी. दूसरे शब्दों में कहें, तो यह आसान नहीं था. साथ ही, जब कोई उपयोगकर्ता किसी इनपुट में कॉन्टेंट डालता था, तो उसे फ़ॉलो करने में गड़बड़ी होती थी.

field-sizing का इस्तेमाल करने पर, आपको कॉन्टेंट के हिसाब से साइज़ तय करने के लिए, सीएसएस की सिर्फ़ एक लाइन की ज़रूरत होती है. कॉन्टेंट के हिसाब से साइज़ बदलने वाली यह स्टाइल, textarea के अलावा अन्य एलिमेंट के लिए भी काम करती है!

textarea, select, input {
  field-sizing: content;
}

Browser Support

Source

त्वरित लिंक

खास जानकारी | सुविधा के बारे में जानकारी

क्या आपको शॉर्ट वीडियो पसंद हैं?

वेस बॉस और जे, दोनों ने Twitter पर field-sizing के बारे में जानकारी देने वाला एक बेहतरीन वीडियो शेयर किया है.

फ़ील्ड के साइज़ में बदलाव करने से किन एलिमेंट पर असर पड़ता है?

यहां <form> एलिमेंट की सूची दी गई है. साथ ही, यह भी बताया गया है कि field-sizing किस एलिमेंट पर काम करता है और हर एलिमेंट पर इसका क्या असर पड़ता है.

`<textarea>`

इनपुट को min-inline-size में छोटा कर दिया जाता है, ताकि वह प्लेसहोल्डर में फ़िट हो जाए.

उपयोगकर्ताओं के टाइप करने पर, इनपुट का साइज़ इनलाइन दिशा में तब तक बढ़ता है, जब तक वह इनलाइन के ज़्यादा से ज़्यादा साइज़ तक नहीं पहुंच जाता. इसके बाद, टेक्स्ट रैप हो जाएगा और इनपुट का ब्लॉक साइज़, नई लाइन के हिसाब से बढ़ जाएगा.

`<select>` और `<select multiple>`

चुना गया विकल्प दिखाने के लिए, select एलिमेंट छोटा हो जाता है.

multiple एट्रिब्यूट वाला कोई भी चुना गया विकल्प, सबसे बड़े विकल्प के हिसाब से बड़ा हो जाता है. साथ ही, विकल्पों की संख्या के हिसाब से लंबा हो जाता है.

`<input type="text">`, `<input type="email">`, और `<input type="number">`

इनपुट को min-inline-size में छोटा कर दिया जाता है, ताकि वह प्लेसहोल्डर में फ़िट हो जाए.

जैसे-जैसे उपयोगकर्ता टाइप करता है वैसे-वैसे इनपुट, इनलाइन दिशा में बढ़ता जाता है. यह तब तक बढ़ता है, जब तक कि यह max-inline-size तक नहीं पहुंच जाता. इसके बाद, ओवरफ़्लो इनपुट वैल्यू को काट देता है.

`<input type="file">`

इनपुट, बटन और पहले से भरे गए फ़ाइल के नाम के टेक्स्ट में छोटा हो जाता है.

किसी फ़ाइल को अपलोड करने पर, इनपुट फ़ील्ड का साइज़ बटन और फ़ाइल के नाम के टेक्स्ट जितना हो जाता है.

नतीजे देखना, उनकी जांच करना, और उनकी तुलना करना

यहां हर फ़ॉर्म एलिमेंट के लिए, field-sizing से पहले और बाद के व्यवहार का एक इंटरैक्टिव और छोटा उदाहरण दिया गया है.

Codepen पर इसे आज़माएँ

ज़्यादा जानकारी

[placeholder] का इस्तेमाल करने पर, प्लेसहोल्डर कॉन्टेंट बन जाता है. इसके बारे में पहले भी बताया गया था, लेकिन यहां इसे इसलिए बताया गया है, क्योंकि फ़ॉर्म को स्टाइल करते समय इसके बारे में जानना ज़रूरी है. लंबे या छोटे प्लेसहोल्डर से, field-sizing: content वाले इनपुट का मूल साइज़ बदल जाएगा.

Codepen पर इसे आज़माएँ

खाली और ज़्यादा स्टाइल हैंडल करना

field-sizing का इस्तेमाल करने का मतलब है कि आपको कुछ और काम करना होगा. अहमद शदीद इसे "डिफ़ेंसिव सीएसएस" कहते हैं. इसका मकसद यह बताना नहीं है कि कोई चीज़ कैसी दिखनी चाहिए या उसका व्यवहार कैसा होना चाहिए. इसके बजाय, इसका मकसद उसे ऐसी स्थिति में जाने से रोकना है जो देखने में ठीक न लगे. पहले, इनपुट के साइज़ तय होते थे. हालांकि, field-sizing: content लागू करने के बाद, इनपुट बहुत छोटे या बहुत बड़े हो सकते हैं.

यहां दी गई स्टाइल से शुरुआत की जा सकती है. ये एलिमेंट को बहुत छोटे बॉक्स में सिमटने से रोकते हैं. साथ ही, textarea के मामले में, इन्हें बहुत बड़ा होने से भी रोकते हैं.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

यह सीएसएस, साइज़िंग के लिए रिलेटिव यूनिट का इस्तेमाल करती है. नई lh यूनिट, ब्लॉक साइज़ के लिए सबसे सही है. साथ ही, ch इनलाइन साइज़ के लिए भी अच्छी तरह काम करती है.

field-sizing की डिफ़ॉल्ट वैल्यू क्या होती है?

field-sizing की डिफ़ॉल्ट वैल्यू fixed होती है. यह सिर्फ़ fixed या content की दो वैल्यू स्वीकार करता है.