टैब-आकार - सीएसएस-ट्रिक्स

tab-sizeसीएसएस में संपत्ति रिक्त स्थान की मात्रा टैब वर्ण के लिए कि प्रदर्शन को समायोजित करने के लिए प्रयोग किया जाता है।

pre ( tab-size: 8; /* default. Pretty big! */ tab-size: 2; tab-size: 13px; /* you can set a width-per-tab also */ )

इन रेंज स्लाइडर के साथ एक नाटक करें, यह देखने के लिए कि विभिन्न मूल्य कैसे प्रभावी होते हैं कि टैब कैसे प्रस्तुत करते हैं (जब आप वास्तव में टैब देख सकते हैं):

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन rNBLYaP देखें
।

टैब वर्ण (यूनिकोड यू + 0009) को आमतौर पर श्वेत अंतरिक्ष प्रसंस्करण नियमों द्वारा रिक्त स्थान (यूनिकोड यू + 0020) में बदल दिया जाता है और फिर ढह जाता है, ताकि ब्राउज़र में एक पंक्ति में केवल एक ही स्थान प्रदर्शित हो। इसलिए tab-sizeसंपत्ति केवल तभी उपयोगी होती है जब सफेद अंतरिक्ष प्रसंस्करण नियम लागू नहीं होते हैं, अर्थात् अंदर

टैग और जब white-spaceकिसी तत्व की संपत्ति सेट की जाती है pre-wrap।
tab-sizeसंपत्ति के लिए डिफ़ॉल्ट मान 8 अंतरिक्ष वर्ण है, और यह किसी भी सकारात्मक पूर्णांक मान को स्वीकार कर सकता है।
वह tab-sizeइस्तेमाल किए जा सकने वाले विभिन्न तरीकों के कुछ उदाहरण हैं :

CodePen पर क्रिस कॉयर (@chisciscoyier) द्वारा पेन rNBLYjg देखें
।


जैसा कि आप ऊपर के उदाहरणों में देख सकते हैं, tab-sizeसंपत्ति टैब वर्ण के लिए आवंटित स्थान की मात्रा को समायोजित करती है। दूसरे उदाहरण में, ए
टैब वर्णों के लिए टैग को अपनी white-spaceसंपत्ति को समायोजित करना पड़ता pre-wrapहै ताकि उन्हें नियमित स्थानों में परिवर्तित न किया जा सके और ढह जाए।
तुम भी सीएसएस कि में नोटिस होगा -moz-और -o-उपसर्गों फ़ायरफ़ॉक्स और ओपेरा के लिए आवश्यक हैं, लेकिन क्रोम गैर उपसर्ग संस्करण स्वीकार करता है।
पॉलीफ़िल
आठ-स्थान का डिफ़ॉल्ट बहुत बड़ा है। यदि आपको एक असमर्थित ब्राउज़र का समर्थन करने की आवश्यकता है, तो आप इस पॉलीफ़िल (इस पेन में जावास्क्रिप्ट) का उपयोग कर सकते हैं:
CodePen पर
CSS-Tricks (@ css-tricks) द्वारा पेन टैब-साइज़
पॉलीफ़िल देखें।
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
 

 
 
क्रोम
 
फ़ायर्फ़ॉक्स
 
अर्थात
 
एज
 
सफारी
 

 

 

 
 
४२
 
53 *
 
नहीं न
 
। ९
 
13.1
 

 

 

मोबाइल / टेबलेट
 

 
 
Android क्रोम
 
Android फ़ायरफ़ॉक्स
 
एंड्रॉयड
 
iOS सफारी
 

 

 

 
 
88
 
85 *
 
81
 
13.4-13.7
 

 

 

यह संपत्ति बहुत ही इनायत से अपमानित करती है। प्रत्येक ब्राउज़र टैब वर्णों का समर्थन करता है। इस संपत्ति के लिए समर्थन का अभाव कुछ भी नहीं तोड़ता है, ब्राउज़र इसके बजाय केवल आठ-वर्ण चौड़े टैब प्रदर्शित करता है।