CSS Field Sizing Property का परिचय

CSS field-sizing property एक नया और रोमांचक फीचर है जो ऑटो-साइजिंग टेक्स्ट बॉक्स बनाना अविश्वसनीय रूप से आसान बनाता है। अब आपको सरल ऑटो-एक्सपैंडिंग टेक्स्ट बॉक्स के लिए JavaScript की आवश्यकता नहीं है। इस लेख में, हम field-sizing property की मूल बातें, इसकी चेतावनियों और ब्राउज़र समर्थन का पता लगाएंगे।

Field Sizing Property क्या है?

Field Sizing Property का परिचय field-sizing property एक CSS property है जो आपको ऑटो-साइजिंग टेक्स्ट बॉक्स बनाने की अनुमति देती है। इसमें दो मान होते हैं: fixed और content। fixed मान डिफ़ॉल्ट है, जहाँ तत्व का एक निश्चित आकार होता है, और content मान तत्व को उसके अंदर की सामग्री के आकार तक स्केल करने की अनुमति देता है।

शुरुआती कोड

यह प्रदर्शित करने के लिए कि field-sizing property कैसे काम करती है, हम एक बुनियादी HTML संरचना से शुरू करते हैं जिसमें एक मानक टेक्स्ट इनपुट, एक सेलेक्ट बॉक्स और एक टेक्स्ट एरिया शामिल है। हम उन्हें लंबवत रूप से स्टैक करने के लिए इनपुट समूह में कुछ बुनियादी CSS स्टाइल लागू करते हैं।

Field Sizing Property की मूल बातें

Field Sizing Property की मूल बातें डिफ़ॉल्ट रूप से, field-sizing property को fixed पर सेट किया गया है। जब हम इसे content में बदलते हैं, तो तत्व उसके अंदर की सामग्री के आकार तक स्केल हो जाएगा। हम इसे इनपुट फ़ील्ड में कुछ टेक्स्ट टाइप करके एक्शन में देख सकते हैं। जैसे ही हम टाइप करते हैं, इनपुट फ़ील्ड टेक्स्ट को समायोजित करने के लिए बढ़ जाएगा।

चेतावनियां

Field Sizing Property की चेतावनियां field-sizing property की चेतावनियों में से एक यह है कि यह तत्व पर सेट की गई न्यूनतम और अधिकतम चौड़ाई से प्रभावित हो सकता है। यदि हम न्यूनतम चौड़ाई निर्धारित नहीं करते हैं, तो तत्व सबसे छोटे संभावित आकार तक सिकुड़ जाएगा। इससे बचने के लिए, हम तत्व पर न्यूनतम चौड़ाई सेट कर सकते हैं।

ब्राउज़र समर्थन

Field Sizing Property के लिए ब्राउज़र समर्थन field-sizing property वर्तमान में केवल Chrome और Edge ब्राउज़रों में समर्थित है। इसका मतलब है कि यदि हम इस property का उपयोग करते हैं, तो यह केवल इन ब्राउज़रों में काम करेगा और Firefox या Safari में नहीं।

विभिन्न तत्वों पर Field Sizing Property का उपयोग करना

विभिन्न तत्वों पर Field Sizing Property का उपयोग करना field-sizing property का उपयोग विभिन्न तत्वों पर किया जा सकता है, जैसे कि टेक्स्ट इनपुट, सेलेक्ट बॉक्स और टेक्स्ट एरिया। हालाँकि, यह टेक्स्ट एरिया पर सबसे उपयोगी है, जहाँ यह तत्व को लंबवत के साथ-साथ क्षैतिज रूप से बढ़ने की अनुमति देता है।

टेक्स्ट एरिया का उदाहरण

टेक्स्ट एरिया का उदाहरण यह प्रदर्शित करने के लिए कि field-sizing property टेक्स्ट एरिया पर कैसे काम करती है, हम तत्व पर न्यूनतम चौड़ाई और अधिकतम चौड़ाई सेट कर सकते हैं। जैसे ही हम टेक्स्ट एरिया में अधिक टेक्स्ट टाइप करते हैं, यह टेक्स्ट को समायोजित करने के लिए बढ़ेगा, लेकिन यह अधिकतम चौड़ाई से अधिक नहीं होगा।

वैलिडेशन और Field Sizing Property

वैलिडेशन और Field Sizing Property field-sizing property का उपयोग वैलिडेशन के साथ भी किया जा सकता है। उदाहरण के लिए, यदि हम इनपुट फ़ील्ड पर अधिकतम लंबाई निर्धारित करते हैं, तो field-sizing property उस अधिकतम लंबाई तक पहुँचने के बाद तत्व को बढ़ाना बंद कर देगी।

प्रोग्रेसिव एन्हांसमेंट

प्रोग्रेसिव एन्हांसमेंट field-sizing property प्रोग्रेसिव एन्हांसमेंट का एक शानदार उदाहरण है। यहां तक कि अगर कोई ब्राउज़र property का समर्थन नहीं करता है, तो भी तत्व सामान्य रूप से काम करेगा, लेकिन इसमें ऑटो-साइजिंग कार्यक्षमता नहीं होगी।

निष्कर्ष

निष्कर्ष अंत में, field-sizing property CSS में एक शक्तिशाली नया फीचर है जो आपको ऑटो-साइजिंग टेक्स्ट बॉक्स बनाने की अनुमति देता है। जबकि इसमें कुछ चेतावनियां और सीमित ब्राउज़र समर्थन है, यह प्रोग्रेसिव एन्हांसमेंट का एक शानदार उदाहरण है और इसका उपयोग आपकी वेबसाइट पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए किया जा सकता है। यदि आप CSS के बारे में अधिक जानना चाहते हैं और नवीनतम सुविधाओं के साथ बने रहना चाहते हैं, तो मैं आपको मेरे CSS Simplified course को देखने की सलाह देता हूं। पढ़ने के लिए धन्यवाद, और आपका दिन शुभ हो!